踏上征途

在开始之前，你需要把你的 Node.js 和 NPM 都更新到最新的版本。访问 nodejs.org 查看安装详情。我们将会使用 NPM 安装一些工具。

开始使用 Webpack 非常简单，我会展示给你看使用它的一个简单的项目。第一步，为你的项目新建一个文件夹，然后输入 npm init，然后填写相关问题。这样会为你创建了 package.json，不用担心填错，你可以之后修改它。

安装 Webpack

接下来我们安装 Webpack，我们要把它安装在本地，然后把它作为项目依赖保存下来。这样你可以在任何地方编译（服务端编译之类的）。输入 npm i wepack --save-dev。如果你想运行它，就输入 node_modules/.bin/webpack。

目录结构

项目的目录结构长这样：

  • /app

    • main.js
    • component.js
  • /build
    • bundle.js (自动创建)
    • index.html
  • package.json
  • webpack.config.js

我们会使用 Webpack 在我们的 /app 里来自动创建 bundle.js 。接下来，我们来设置 webpack.config.js。

设置 Webpack

Webpack 的配置文件长这样：

webpack.config.js

var path = require('path');

module.exports = {

    entry: path.resolve(__dirname, 'app/main.js'),

    output: {

        path: path.resolve(__dirname, 'build'),

        filename: 'bundle.js',

    },

};

运行你的第一个编译

现在我们有了一个最简单的配置，我们需要有什么东西去编译，让我们开始一个经典的 Hello World，设置 /app 像这样：

app/component.js

'use strict';

module.exports = function () {

    var element = document.createElement('h1');

    element.innerHTML = 'Hello world';

    return element;

};

app/main.js

'use strict';

var component = require('./component.js');

document.body.appendChild(component());

现在在你的命令行运行 webpack，然后你的应用会开始编译，一个 bundle.js 文件就这样出现在你的 /build 文件夹下，需要在build/ 下的 index.html 去启动项目。

build/index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8"/>

  </head>

  <body>

    <script src="bundle.js"></script>

  </body>

</html>

这个文件可以用 html-webpack-plugin 来生成。如果你觉得冒险，那就把剩下的工具交给它来做。使用它就只有一个配置的问题。一般来说使用 Webpack 来工作就是这么个套路。

运行应用

只要双击 index.html 或者设置一个 Web 服务指向 build/ 文件夹。

设置 package.json scripts

npm 是一个非常好用的用来编译的指令，通过 npm 你可以不用去担心项目中使用了什么技术，你只要调用这个指令就可以了，只要你在 package.json 中设置 scripts 的值就可以了。

在这个案例中我们把编译步骤放到 npm run build 中是这样：

  1. npm i webpack --save - 如果你想要把 Webpack 作为一个项目的开发依赖，就可以使用 --save-dev，这样就非常方便地让你在开发一个库的时候，不会依赖工具（但不是个好方法！）。
  2. 把下面的内容添加到 package.json中。
  "scripts": {

    "build": "webpack"

  }

现在你可以输入 npm run build 就可以编译了。

当项目越发复杂的时候，这样的方法会变得越来越有效。你可以把所有复杂的操作隐藏在 scripts 里面来保证界面的简洁。

不过潜在的问题是这种方法会导致如果你使用一些特殊的指令的时候只能在 Unix 环境中使用。所以如果你需要考虑一些未知的环境中的话，那么 gulp-webpack 会是一个好的解决方案。

注意 NPM 会找到 Webpack，npm run 会把他临时加到 PATH来让我们这个神奇的命令工作。

工作流

如果需要一直输入 npm run build 确实是一件非常无聊的事情，幸运的是，我们可以把让他安静的运行，让我们设置 webpack-dev-server。

设置 webpack-dev-server

第一步，输入 npm i webpack-dev-server --save，此外，我们需要去调整 package.json scripts 部分去包含这个指令，下面是基本的设置：

package.json

{

  "scripts": {

    "build": "webpack",

    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"

  }

}

当你在命令行里运行 npm run dev 的时候他会执行 dev 属性里的值。这是这些指令的意思：

  1. webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
  2. --devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
  3. --progress - 显示合并代码进度
  4. --colors - Yay，命令行中显示颜色！
  5. --content-base build - 指向设置的输出目录

总的来说，当你运行 npm run dev 的时候，会启动一个 Web 服务器，然后监听文件修改，然后自动重新合并你的代码。真的非常简洁！

访问 http://localhost:8080 你会看到效果。

浏览器自动刷新

当运行 webpack-dev-server 的时候，它会监听你的文件修改。当项目重新合并之后，会通知浏览器刷新。为了能够触发这样的行为，你需要把你的 index.html 放到 build/ 文件夹下，然后做这样的修改：

build/index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8"/>

  </head>

  <body>

    <script src="http://localhost:8080/webpack-dev-server.js"></script>

    <script src="bundle.js"></script>

  </body>

</html>

我们需要增加一个脚本当发生改动的时候去自动刷新应用，你需要在配置中增加一个入口点。

var path = require('path');

module.exports = {

    entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],

    output: {

        path: path.resolve(__dirname, 'build'),

        filename: 'bundle.js',

    },

};

就是这样！现在你的应用就可以在文件修改之后自动刷新了。

默认环境

在上面的例子中我们创建了 index.html 文件来获取更多的自由和控制。同样也可以从 http://localhost:8080/webpack-dev-server/bundle 运行应用。这会触发一个默认的你不能控制的 index.html ，它同样会触发一个允许iFrame中显示重合并的过程。

引入文件

模块

Webpack 允许你使用不同的模块类型，但是 “底层”必须使用同一种实现。所有的模块可以直接在盒外运行。

ES6 模块

import MyModule from './MyModule.js';

CommonJS

var MyModule = require('./MyModule.js');

AMD

define(['./MyModule.js'], function (MyModule) {

});

理解文件路径

一个模块需要用它的文件路径来加载，看一下下面的这个结构：

  • /app

    • /modules
    • MyModule.js
    • main.js (entry point)
    • utils.js

      踏上征途

      在开始之前，你需要把你的 Node.js 和 NPM 都更新到最新的版本。访问 nodejs.org 查看安装详情。我们将会使用 NPM 安装一些工具。

      开始使用 Webpack 非常简单，我会展示给你看使用它的一个简单的项目。第一步，为你的项目新建一个文件夹，然后输入 npm init，然后填写相关问题。这样会为你创建了 package.json，不用担心填错，你可以之后修改它。

      安装 Webpack

      接下来我们安装 Webpack，我们要把它安装在本地，然后把它作为项目依赖保存下来。这样你可以在任何地方编译（服务端编译之类的）。输入 npm i wepack --save-dev。如果你想运行它，就输入 node_modules/.bin/webpack。

      目录结构

      项目的目录结构长这样：

      • /app

        • main.js
        • component.js
      • /build
        • bundle.js (自动创建)
        • index.html
      • package.json
      • webpack.config.js

      我们会使用 Webpack 在我们的 /app 里来自动创建 bundle.js 。接下来，我们来设置 webpack.config.js。

      设置 Webpack

      Webpack 的配置文件长这样：

      webpack.config.js

      var path = require('path');

module.exports = {
      
    entry: path.resolve(__dirname, 'app/main.js'),
      
    output: {
      
        path: path.resolve(__dirname, '/build'),
      
        filename: 'bundle.js',
      
    },
      
};

      运行你的第一个编译

      现在我们有了一个最简单的配置，我们需要有什么东西去编译，让我们开始一个经典的 Hello World，设置 /app 像这样：

      app/component.js

      'use strict';

module.exports = function () {
      
    var element = document.createElement('h1');

    element.innerHTML = 'Hello world';

    return element;
      
};

      app/main.js

      'use strict';
      
var component = require('./component.js');

document.body.appendChild(component());

      现在在你的命令行运行 webpack，然后你的应用会开始编译，一个 bundle.js 文件就这样出现在你的 /build 文件夹下，需要在build/ 下的 index.html 去启动项目。

      build/index.html

      <!DOCTYPE html>
      
<html>
      
  <head>
      
    <meta charset="UTF-8"/>
      
  </head>
      
  <body>
      
    <script src="bundle.js"></script>
      
  </body>
      
</html>

      这个文件可以用 html-webpack-plugin 来生成。如果你觉得冒险，那就把剩下的工具交给它来做。使用它就只有一个配置的问题。一般来说使用 Webpack 来工作就是这么个套路。

      运行应用

      只要双击 index.html 或者设置一个 Web 服务指向 build/ 文件夹。

      设置 package.json scripts

      npm 是一个非常好用的用来编译的指令，通过 npm 你可以不用去担心项目中使用了什么技术，你只要调用这个指令就可以了，只要你在 package.json 中设置 scripts 的值就可以了。

      在这个案例中我们把编译步骤放到 npm run build 中是这样：

      1. npm i webpack --save - 如果你想要把 Webpack 作为一个项目的开发依赖，就可以使用 --save-dev，这样就非常方便地让你在开发一个库的时候，不会依赖工具（但不是个好方法！）。
      2. 把下面的内容添加到 package.json中。
        "scripts": {
      
    "build": "webpack"
      
  }

      现在你可以输入 npm run build 就可以编译了。

      当项目越发复杂的时候，这样的方法会变得越来越有效。你可以把所有复杂的操作隐藏在 scripts 里面来保证界面的简洁。

      不过潜在的问题是这种方法会导致如果你使用一些特殊的指令的时候只能在 Unix 环境中使用。所以如果你需要考虑一些未知的环境中的话，那么 gulp-webpack 会是一个好的解决方案。

      注意 NPM 会找到 Webpack，npm run 会把他临时加到 PATH来让我们这个神奇的命令工作。

      工作流

      如果需要一直输入 npm run build 确实是一件非常无聊的事情，幸运的是，我们可以把让他安静的运行，让我们设置 webpack-dev-server。

      设置 webpack-dev-server

      第一步，输入 npm i webpack-dev-server --save，此外，我们需要去调整 package.json scripts 部分去包含这个指令，下面是基本的设置：

      package.json

      {
      
  "scripts": {
      
    "build": "webpack",
      
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
      
  }
      
}

      当你在命令行里运行 npm run dev 的时候他会执行 dev 属性里的值。这是这些指令的意思：

      1. webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
      2. --devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
      3. --progress - 显示合并代码进度
      4. --colors - Yay，命令行中显示颜色！
      5. --content-base build - 指向设置的输出目录

      总的来说，当你运行 npm run dev 的时候，会启动一个 Web 服务器，然后监听文件修改，然后自动重新合并你的代码。真的非常简洁！

      访问 http://localhost:8080 你会看到效果。

      浏览器自动刷新

      当运行 webpack-dev-server 的时候，它会监听你的文件修改。当项目重新合并之后，会通知浏览器刷新。为了能够触发这样的行为，你需要把你的 index.html 放到 build/ 文件夹下，然后做这样的修改：

      build/index.html

      <!DOCTYPE html>
      
<html>
      
  <head>
      
    <meta charset="UTF-8"/>
      
  </head>
      
  <body>
      
    <script src="http://localhost:8080/webpack-dev-server.js"></script>
      
    <script src="bundle.js"></script>
      
  </body>
      
</html>

      我们需要增加一个脚本当发生改动的时候去自动刷新应用，你需要在配置中增加一个入口点。

      var path = require('path');

module.exports = {
      
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
      
    output: {
      
        path: path.resolve(__dirname, '/build'),
      
        filename: 'bundle.js',
      
    },
      
};

      就是这样！现在你的应用就可以在文件修改之后自动刷新了。

      默认环境

      在上面的例子中我们创建了 index.html 文件来获取更多的自由和控制。同样也可以从 http://localhost:8080/webpack-dev-server/bundle 运行应用。这会触发一个默认的你不能控制的 index.html ，它同样会触发一个允许iFrame中显示重合并的过程。

      引入文件

      模块

      Webpack 允许你使用不同的模块类型，但是 “底层”必须使用同一种实现。所有的模块可以直接在盒外运行。

      ES6 模块

      import MyModule from './MyModule.js';

      CommonJS

      var MyModule = require('./MyModule.js');

      AMD

      define(['./MyModule.js'], function (MyModule) {

});

      理解文件路径

      一个模块需要用它的文件路径来加载，看一下下面的这个结构：

      • /app

        • /modules
        • MyModule.js
        • main.js (entry point)
        • utils.js

      打开 main.js 然后可以通过下面两种方式引入 app/modules/MyModule.js

      app/main.js

      // ES6
      
import MyModule from './modules/MyModule.js';

// CommonJS
      
var MyModule = require('./modules/MyModule.js');

      最开始的 ./ 是 “相对当前文件路径”

      让我们打开 MyModule.js 然后引入 app/utils：

      app/modules/MyModule.js

      // ES6 相对路径
      
import utils from './../utils.js';

// ES6 绝对路径
      
import utils from '/utils.js';

// CommonJS 相对路径
      
var utils = require('./../utils.js');

// CommonJS 绝对路径
      
var utils = require('/utils.js');

      相对路径是相对当前目录。绝对路径是相对入口文件，这个案例中是 main.js。

打开 main.js 然后可以通过下面两种方式引入 app/modules/MyModule.js

app/main.js

// ES6

import MyModule from './modules/MyModule.js';

// CommonJS

var MyModule = require('./modules/MyModule.js');

最开始的 ./ 是 “相对当前文件路径”

让我们打开 MyModule.js 然后引入 app/utils：

app/modules/MyModule.js

// ES6 相对路径

import utils from './../utils.js';

// ES6 绝对路径

import utils from '/utils.js';

// CommonJS 相对路径

var utils = require('./../utils.js');

// CommonJS 绝对路径

var utils = require('/utils.js');

相对路径是相对当前目录。绝对路径是相对入口文件，这个案例中是 main.js。

npm + webpack +react的更多相关文章

  1. npm+webpack+babel+react安装

    npm+webpack+babel+react安装 1.首先要安装 Node.js, Node.js 自带了软件包管理器 npm 2.在项目文件目录下生成package.json # 进入项目目录$ ...

  2. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  3. Webpack+React+ES6开发模式入门指南

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  4. webpack+react+es6开发模式

    一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...

  5. webpack react基础配置一

    简单介绍webpack react基本配置,入门型: 环境配置: 依赖nodejs,官网下载最新版的nodejs:nodejs.org/en 安装完nodejs  npm便自动集成了,通过npm安装其 ...

  6. Webpack+React+ES6入门指南[转]

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  7. webpack+react+redux+es6

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  8. Webpack+React配合开发

    前面两篇关于webpack的基础和进阶,请先务必阅读之前的文章. Webpack教程一 Webpack教程二 什么是React React是一个由Facebook开发的library,它的口号是“A ...

  9. 手把手教你如何使用webpack+react

    上一篇随笔讲述了新手入门入门前端 里面提到的第四阶段跟上当前前端的发展需要入门一个框架和自动化工具,当时推荐的是webpack+react 今天正好有空,也把自己入门webpack + react 的 ...

随机推荐

  1. mysql23个知识点

    1.它是一种解释语言:写一句执行一句,不需要整体编译执行. 2.1.没有“ ”,字符串使用‘ '包含 3.一个表只有一个主键,但是一个主键可以是由多个字段组成的 组合键 4.实体完整性:实体就是指一条 ...

  2. TCL语言笔记：TCL基础语法

    一.什么是TCL Tcl 全称是 Tool command Language.它是一个基于字符串的命令语言,基础结构和语法非常简单,易于学习和掌握. Tcl 语言是一个解释性语言,所谓解释性是指不象其 ...

  3. Lotus Notes中编程发送邮件（二）

    在编程发送各种类似通知的邮件时,时常会需要发件人显示为某个特定的帐户,比如某个部门的名称或者管理员的名字.另一种需求是,用户收到某封邮件后,回复邮件的地址不同于发件人栏显示的地址.而正常情况下,发送邮 ...

  4. printf left justify

    http://www.lemoda.net/c/printf-left-justify/index.html This example program demonstrates how to left ...

  5. UVA 11916 Emoogle Grid（同余模）

    题目链接:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  6. [Codeforces673C]Bear and Colors（枚举，暴力）

    题目链接:http://codeforces.com/contest/673/problem/C 题意:给一串数,不同大小的区间内出现次数最多的那个数在计数的时候会+1,问所有区间都这样计一次数,所有 ...

  7. 【Todo】JS跨域访问问题的解决

    做双十一,需要在主会场页面,嵌入我们产品的JS豆腐块.而这个豆腐块需要调用我们后端的数据接口,涉及跨域访问. 参考 http://www.cnblogs.com/2050/p/3191744.html ...

  8. BNU 4188 Superprime Rib【BFS】

    题意:给出n,输出n位超级质数,超级质数的定义为“依次去掉右边一位后仍然为质数的数” 因为一个n位质数去掉右边一位数之后仍然为质数,说明它是由n-1位超级质数演变而来的, 同理,n-1位超级质数也由n ...

  9. Mysql的 时间戳转换 和 c# 的时间戳转换 (以秒来进行转换,非毫秒,主要是mysql不能存毫秒)

    Mysql 时间戳函数 => 从时间 转成 时间戳   UNIX_TIMESTAMP() 获取当前服务器时间的时间戳 UNIX_TIMESTAMP('2013-01-01 12:33:19') ...

  10. 深入分析 ThreadLocal 内存泄漏问题

    前言 ThreadLocal 的作用是提供线程内的局部变量,这种变量在线程的生命周期内起作用,减少同一个线程内多个函数或者组件之间一些公共变量的传递的复杂度.但是如果滥用ThreadLocal,就可能 ...