模块打包工具——Webpack

一、Webpack简介

Webpack是一个模块打包器，它能够根据模块的依赖关系递归地构建一个依赖关系图，当中包含了应用程序需要地所有模块，最后打包成一个或多个boundle。

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

Webpack地全局安装命令为：

npm install -g webpack webpack-cli

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

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

二、Webpack的核心概念

1、entry（入口）

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

module.exports = {
	entry: './src/file.js'
}

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: 'doundle.js'
	},
	module: {
		rules: [
			{
				test: /\.less$/,
				use: 'less-loader',
				//use: ['less-loader','css-loader'] //当使用多个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'
};