初识Webpack

Webpack是什么

Webpack是前端开发中常用的一个开源的、跨平台的模块打包工具。它主要用来打包JavaScript文件，但是借助相应的插件，它也可以转换HTML和CSS文件，甚至是图片等资源。根据官方文档，其基本原理是利用模块间的依赖关系建立依赖图，并据此生成表示这些模块的静态资源。

安装

• 使用npm
  npm install --save-dev webpack
• 使用yarn
  yarn add webpack --dev

基本配置

从版本4.0.0后，Webpack不要求自定义一个配置文件，默认的打包入口文件为src/index，默认输出文件为dist/main.js。可查看GitHub上WebpackOptionsDefaulter.js源码：
this.set("entry", "./src");
以及下文即将提到的resolve参数中用于解析模块的文件名规则：
this.set("resolve.mainFiles", ["index"]);
由上述两行代码可知默认打包入口文件应该为项目根目录下src/index，同理，默认的输出目录也可以从上述源码中找到。
通常由于项目的需要，可以在根目录下创建一个webpack.config.js，Webpack将会自动使用该配置文件。下面简单介绍配置文件中的一些基本参数。

入口（entry）

入口起点（entry point）指示Webpack应该使用哪个模块作为构建其内部依赖图的起点。Webpack会找到依赖入口起点的模块和库。
默认值通常为./src/index.js，也可以使用entry属性指定一个或多个不同的入口起点，如下代码为实际项目中使用的单入口简写法：

module.exports = {
	entry: resolve('app/main.js')
};

其中resolve函数封装Node中path.join方法，如下./build/utils.js：
exports.resolve = (...arg) => path.join(__dirname, '..', ...arg)

输出（output）

输出（output）属性指示Webpack输出它所创建的bundle的位置以及文件命名规则。默认目录为dist,默认主文件名为dist/main.js，当然也可以设定output属性值以满足自己的项目需求。如下项目实际代码：

module.exports = {
	entry: resolve('app/main.js'),
	output: {
		//输出文件目录
		path: resolve('dist'),
		//静态资源引用地址，此处为'/'
		publicPath: config.publicPath,
        // 入口文件生产的js
		filename: config.noHash ? 'js/[name].js' : 'js/[name].[chunkhash].js',
		// 非入口文件生产的js
		chunkFilename: config.noHash ? 'js/[name].js' : 'js/[name].[chunkhash].js'
	}
}

其中config.noHash表示产生的资源是否需要hash值；由于项目中客户端和服务端存在不同的入口文件，此处filename和chunkFilename使用替换模板字符串输出文件名。

加载器（loader）

loader的作用是让Webpack可以处理除JavaScript和JSON类型外的其他文件，将它们转换为可供应用程序使用的有效模块，并添加到依赖图中。
需要在module.rules中定义规则，常用的两个属性为：test和use，如下代码：

module: {
	rules: [
		{
			test: /.(js|jsx)$/,
			exclude: [resolve('node_modules')],
            use: {
				loader: 'babel-loader',
				options: {
                	presets: [
                    	'@babel/preset-env',
                       	'@babel/preset-react',
                    ],
                    plugins: [
                    	"@babel/plugin-transform-runtime",
                        ["@babel/plugin-proposal-class-properties", { "loose": false }],
                    ]
                 }
            }
        }
	]
}

test属性值是匹配特定文件类型的正则表达式，在上述代码中use属性值指定babel-loder用来转译js和jsx文件，排除node_modules目录下的文件。

解析（resolve）

resolve参数定义Webpack查找模块的规则，可以将模块原导入路径映射为新的路径，或是根据提供的文件后缀去检索文件。如下代码：

resolve: {
	//设置路径别名
	alias: {
		'@': resolve('app'),
	},
	// 文件后缀自动补全
	extensions: ['.js', '.jsx'],
}

插件（plugin）

加载器（loader）用于转换某些类型的文件，而插件则可以执行范围更广的任务。使用插件的方法也很简单——安装对应插件的NPM包后引入该插件，在plugins数组添加该对象，如下代码所示：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
	new MiniCssExtractPlugin({
		filename: config.noHash ? 'css/[name].css' : 'css/[name].[chunkhash].css',
	})
],

上述MiniCssExtractPlugin插件的功能是为每一个包含CSS的JavaScript文件创建一个独立的CSS文件，支持按需加载CSS和SourceMap。