《React+Redux前端开发实战》—1.1.3 模块打包工具之Webpack

1.1.3  模块打包工具之Webpack

　　本节重点介绍Webpack，这是本书案例代码最常用的打包工具。当然市面上类似的打包工具还有Rollup、Parceljs等，感兴趣的读者可自行研究。

　　Webpack是一个“模块打包器”，如图1.2所示。它能根据模块的依赖关系递归地构建一个依赖关系图（Dependency Graph），当中包含了应用程序需要的所有模块，最后打包成一个或多个bundle。

说明：bundle一般用来形容模块打包后生成的文件，通常我们会将文件命名为bundle.js。

　　Webpack的全局安装命令如下：

　　npm install -g webpack webpack-cli

注意：不同于Webpack 3.x ，webapck-cli在Webpack 4中被分离了，所以需要同时安装两个库。

　　同Browserify一样，Webpack最后打包输出的静态资源在HTML中被引用。但Webpack相比Browserify又多了更多的特色，Webpack能将CSS和图片等打包到同一个包；打包前还能对文件进行预编译（比如Less、TypeScript和JSX等）；还能配置多入口，将包拆分；还能进行“热”替换等。

图1.2  Webpack示意图

　　在Webpack中有4个核心概念：

•  entry（入口）；

•  output（输出）；

•  loader（转换器）；

•  plugins（插件）。

　　1．entry（入口）

　　entry（入口）用于指引Webpack应该从哪个模块开始，它是构建的入口。之后Webpack会自动找出应用内其他相互依赖的内容进行打包。通过在Webpack配置文件中配置entry属性来指定入口。虽然一般项目中只指定一个入口，但实际上是可以指定多个入口的。

　　entry配置示例：

　　module.exports = {

　　 entry： './src/file.js'

　　}

提示：这些配置都在webpack.config.js文件中，但在Webpack 4以上的版本中，该文件不是必要文件。

　　2．output（出口）

　　output（出口）告诉Webpack所构建的bundles在哪里输出，默认输出路径是./dist。

　　output配置示例：

　　const path = require('path');

　　module.exports = {

　　  entry: './src/file.js',

　　  output: {

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

　　    filename: 'bundle.js'

　　  }

　　};

　　上面的配置通过output.path和output.filename属性来自定义Webpack打包后bundle的路径和名称。

　　3．loader（转换器）

　　loader用于配置Webpack处理一些非JS文件，因为Webpack本身只能理解JavaScript。通过loader可以实现import导入的任何类型模块（如.jsx，.css，.less等）。

　　loader配置示例：

　　const path = require('path');

　　module.exports ={

　　  entry: './src/file.js',                                 // 打包入口

　　  output: {

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

　　     filename: 'bundle.js'

　　  },

　　  module: {

　　    rules: [

　　      { test: /\.less$/, use: 'less-loader' }

　　    ]

　　  }

　　};

　　上面的配置中，loader的test属性告诉Webpack需要处理的“对象”；use属性告诉Webpack用什么去处理。当Webpack打包的时候会识别所有后缀为.less的文件，并用less-loader去转换。

　　4．plugins（插件）

　　plugins（插件）的作用主要是打包优化、压缩等，它的功能同loader一样极其强大，使用任何插件时只需要require()进来即可。

　　plugins配置示例：

　　const HtmlWebpackPlugin = require('html-webpack-plugin');     // 通过NPM安装

　　const webpack = require('webpack');                                   // 用于访问内置插件

　　module.exports = {

　　  module: {

　　    rules: [

　　      { test: /\.less$/, use: 'less-loader' }

　　    ]

　　  },

　　  plugins: [

　　    new webpack.optimize.UglifyJsPlugin(),

　　    new HtmlWebpackPlugin({template: './src/index.html'})

　　  ]

　　};

　　在真实项目中会区分开发环境（production）和生产环境（development），两种环境可以通过mode参数来配置，如下：

　　module.exports = {

　　  mode: 'production'

　　};

　　接下来通过新建一个项目来深入了解Webpack的使用。