webpack是前端人员的打包、压缩、测试的多方位一体工具。
webpack有四个比较重要的概念：

  • 入口(entry)
  • 输出(output)
  • loader
  • 插件(plugins)

    基本用法

    入口

    入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
    1
    2
    3
    4
    5
    6
    //webpack.config.js
    const config = {
      entry: './path/to/my/entry/file.js'
    };

    module.exports = config;

向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。

当应用于多页面应用时

1
2
3
4
5
6
7
const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

输出

在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：

  • filename 用于输出文件的文件名。
  • 目标输出目录 path 的绝对路径。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    //webpack.config.js
    const config = {
      output: {
        filename: 'bundle.js',
        path: '/home/proj/public/assets'
      }
    };

    module.exports = config;

在有多个入口的时候,则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

1
2
3
4
5
6
7
8
9
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

loader

由于webpack可以处理的只是js文件，所以当要打包其他类型的文件时，就需要用loder将这些文件转化成webpack可以处理的有效模块。
在使用前，必须要先安装对应的loder

1
2
npm install --save-dev css-loader
npm install --save-dev ts-loader

然后再config.js中进行相应的配置

1
2
3
4
5
6
7
8
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

插件(plugins)

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

想要使用一个插件，你只需要 require() 它，然后把它添加到 config.js中的plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

1
2
3
4
5
6
7
8
9
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
    apply(compiler) {
        compiler.hooks.run.tap(pluginName, compilation => {
            console.log("webpack 构建过程开始！");
        });
    }
}

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

常用命令

  • webpack -p：压缩
  • webpack -w：压缩文件自动更新
  • webpack -d：可在控制台看到j压缩后的s文件（7也可以在config.js中设置devtool属性为souerce-map）
  • webpack -progress：查看生产过程
  • webpack -pw：同时压缩并自动 更新

原理

流程

  1. 初始化参数：从配置文件(默认webpack.config.js)和shell语句中读取与合并参数，得出最终的参数
  2. 开始编译(compile)：用上一步得到的参数初始化Comiler对象，加载所有配置的插件，通过执行对象的run方法开始执行编译
  3. 确定入口：根据配置中的entry找出所有的入口文件
  4. 编译模块：从入口文件出发，调用所有配置的Loader对模块进行翻译,再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过处理
  5. 完成编译模块：经过第四步之后，得到了每个模块被翻译之后的最终内容以及他们之间的依赖关系
  6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，再将每个chunk转换成一个单独的文件·加入输出列表中，这是可以修改输出内容的最后机会
  7. 输出完成：在确定好输出内容后，根据配置(webpack.config.js && shell)确定输出的路径和文件名，将文件的内容写入文件系统中(fs)