webpack #

webpack是一款强大的模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,优势如下:

1. webpack 是以commonJS的形式来书写，但对AMD/CMD的支持也很全面,方便旧项目进行代码迁移
2. 能被模块化的不仅仅是JS,还包括各种资源文件
3. 开发便捷，能替代部分gulp的工作，比如打包、混淆压缩、图片转base64等
4. 扩展性强，插件机制完善，特别是支持React热插拔

1. webpack安装 #

$ npm install webpack --save-dev

2. 使用webpack配置文件 #

2.1 初始化git #

mkdir webpack-demos
cd webpack-demos
git init

2.2 初始化项目 #

$ npm init -y

2.3 增加.gitignore #

创建文件

$ touch.gitignore

在文件中增加以下内容

node_modules
.idea
lib

2.4 在项目根目录下创建src和build目录 #

src目录存放源码，build目录存放编译打包之后的资源

$ mkdir src build

2.5 增加以下文件 #

2.5.1 src/component.js #

$ cd src && touch component.js

exports.name = 'zfpx';

2.5.2 src/index.js #

$ cd src && touch index.js

var comp = require('./component.js');
console.log(comp.name);

2.5.3 build/index.html #

$ cd build && touch index.html

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

2.6 下载webpack #

$ npm install webpack --save-dev

2.7 创建webpack的配置文件 #

$ touch webpack.config.js

配置webpack.config.js

var path = require('path');
module.exports = {
     //打包的入口文件  String|Object
    entry: path.resolve(__dirname, 'src/index.js'),
    output: { //配置打包结果     Object
        //定义输出文件路径
        path: path.resolve(__dirname, 'build'),
        //指定打包文件名称
        filename: 'bundle.js'
    },
};

请注意webpack.config.js这个文件名是定死的，不然会报Output filename not configured的错误；另外，如果不按这个命名，那么在webpack运行的时候需要通过--config这个参数指定配置文件，比如：webpack --config conf.js

2.8 修改 package.json #

  "scripts": {
+    "build": "webpack"
  }

2.9 执行命令进行编译 #

$ npm run build

build目录下会新增了一个bundle.js文件，里面就存放着打包后的目录

3. loader #

使用babel-loader来解析es6写成的模块 加载器列表

3.1 安装loader #

babel-loader可以将ES6的代码转为ES5的代码 babel官网

$ npm install babel-loader babel-core --save-dev
$ npm install babel-preset-es2015 babel-preset-stage-0 --save-dev

3.2 修改webpack.config.js #

module.exports = {
    ////打包的入口文件  String|Object
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        //定义输出文件路径
        path: path.resolve(__dirname, 'build'),
        //指定打包文件名称
        filename: 'bundle.js'
    },
    //定义了对模块的处理逻辑     Object
+    module: {
+        loaders: [ 定义了一系列的加载器   Array
+            {
+                test: /\.js$/, //正则，匹配到的文件后缀名
+                // loader/loaders：string|array，处理匹配到的文件
+                loader: 'babel-loader'
+                // include：String|Array  包含的文件夹
+                 // exclude：String|Array  排除的文件夹
+
+            }
+        ]
+    }
};

"-loader"其实是可以省略不写的，多个loader之间用“!”连接起来 loaders是一个数组

3.3 添加.babelrc文件 #

内容如下:

{
   "presets": ["es2015", "stage-0"],
   "plugins": []
}

3.4 修改src/component.js #

-  exports.name = 'zfpx';
+  export var name = 'zfpx';

3.4 修改src/index.js #

-  var comp = require('./component.js');
-  console.log(comp.name);
+  import {name} from './component.js';
+  console.log(name);

3.5 增加.babelrc文件 #

{
  "presets": ["es2015", "stage-0"],
  "plugins": []
}

3.6 执行命令进行编译 #

$ npm run build

4. devServer #

webpack-dev-server是一个Web服务器,可以预览项目，并且当修改源码后可以实时刷新页面 server配置

4.1 安装devServer #

$ npm install webpack-dev-server --save-dev

4.3 修改package.json #

"scripts": {
+    "dev": "webpack-dev-server"
}

4.4 配置webpack.config.js #

+    devServer: {
+        stats: { colors: true }, //显示颜色
+        port: 8080,//端口
+        contentBase: 'build',//指定静态文件的根目录
+    }

4.5 执行命令进行启动服务 #

$ npm run dev

启动此服务的时候，编译后的产出文件放在内存里,在build目录下看不见,但也不会删除原来已经有的文件

4.6 预览项目 #

打开浏览器中访问 http://localhost:8080