前端项目自动化构建工具——Webpack入门教程
参考资料：https://www.webpackjs.com/（中文文档） https://www.webpackjs.com/（官方文档）
首先有必要说明一下，本文侧重讲解webpack基本配置属性，不附带实例，将会以通俗易懂的形式地讲解；如若需要实例进行相关练习，可将本文作为理论基础；
Webpack是前端项目自动化构建工具，本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。（官网定义）。
那么用我们人话来说：webpack是一个前端模块化的解决方案，更侧重点打包，可以把开发中的资源文件（图片、js文件、css文件等）看成是一个个的模块，然后通过webpack提供的loader（加载器）和plugins（插件）来进行处理、合并以及压缩，打包成符合生产环境、体积更小的文件资源，以方便提升浏览器的渲染速度；
首先我们要理解一下webpack的四大核心概念：
入口（entry）
出口（output）
loader（加载器）
plugins（插件）
入口（entry）：
webpack入口指的是通过配置来指示webpack的入口文件，即从哪里开始，我们可以在webpack中配置entry属性，来指定入口文件的路径；
我们可以看一个简单的案例：
//必须将模块抛出webpack才能访问得到 module.exports = { //entry属性指定入口文件 值为相对路径 entry: \'./src/app.js\' }
出口（output）：
出口即告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件，输出的文件目录路径；也就是说在你用webpack打包的时候可以通过添加output属性，来设置最终经过webpack打包输出后的文件名以及输出路径；
//引入node的path模块 const path = require(\'path\'); module.exports = { // webpack执行入口文件 entry: \'./src/app.js\', //出口 output: { // 把所有依赖的模块合并输出到一个 bundle.js 文件 filename: \'bundle.js\', // 输出文件都放到 dist 目录下 //__dirname是node环境中全局变量，表示当前目录 path: path.resolve(__dirname, \'./dist\'), } };
加载器（loader）：
loader是让webpack能够去处理一些非Javscript类型的文件（webpack自身只能够识别原生JS和ES5），loader可以将所有类型的文件转为webpack能处理的有效模块，然后就可以通过webpack的打包能力，对这些文件进行处理；loader的配置有两个选项：
test：一般都是正则表达式，用于匹配文件类型；
use：可以是key：value的形式也可以是数组，用来告诉webpack使用什么loader来加载文件
//引入node的path模块 const path = require(\'path\'); module.exports = { // webpack执行入口文件 entry: \'./src/app.js\', //出口 output: { // 把所有依赖的模块合并输出到一个 bundle.js 文件 filename: \'bundle.js\', // 输出文件都放到 dist 目录下 //__dirname是node环境中全局变量，表示当前目录 path: path.resolve(__dirname, \'./dist\'), } //模块关键字，加载器需要在这里进行配置 module:{ //rules为数组，保存每个加载器的配置 rules:[ { //test属性必须配置，值为正则表达式，用于匹配文件 test:/\.css$/, // 对同一个文件引入多个loader的方法 use:[ //loader为loader加载器的名称，必须配置，值为字符串 {loader:"style-loader"}, {loader:"css-loader"} ], //过滤，排除node_module目录下的文件 exclude:/node_module/, //指定匹配文件的范围 指定/demo/目录下的.css文件进行匹配 include:/demo/ } ] } };
webpack中规定，在webpack中定义loader时，需要定义在module.rules中，否则会报错；test和use两个属性分别指定了匹配文件的规则和用什么loader来处理，这两个属性都是必选的，exclude、include分别表示过滤（不处理）某个文件中的文件和指定（处理）某个文件夹中的文件，这两个属性都是可选项；
插件（plugins）：
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。要使用某个插件，你需要require（引入）插件，然后添加到plugins数组中，多数插件可以通过选项option来自定义
//引入node的path模块 const path = require(\'path\'); //引入extract-text-webpack-plugin插件 const ExtractTextPlugin = require(\'extract-text-webpack-plugin\'); module.exports = { // webpack执行入口文件 entry: \'./src/app.js\', //出口 output: { // 把所有依赖的模块合并输出到一个 bundle.js 文件 filename: \'bundle.js\', // 输出文件都放到 dist 目录下 //__dirname是node环境中全局变量，表示当前目录 path: path.resolve(__dirname, \'./dist\'), } //模块关键字，加载器需要在这里进行配置 module:{ //rules为数组，保存每个加载器的配置 rules:[ { //test属性必须配置，值为正则表达式，用于匹配文件 test:/\.css$/, // 对同一个文件引入多个loader的方法 use:[ //loader为loader加载器的名称，必须配置，值为字符串 {loader:"style-loader"}, {loader:"css-loader"} ], //过滤，排除node_module目录下的文件 exclude:/node_module/, //指定匹配文件的范围 指定/demo/目录下的.css文件进行匹配 include:/demo/ } ] } //配置插件 plugins: [ new ExtractTextPlugin({ //自定义配置插件选项 // 从 .js 文件中提取出来的 .css 文件的名称 filename: `[name]_[md5:contenthash:hex:8].css`, }), ] };
上面就是webpack的四大核心概念，下面我们来介绍一些常用的插件：
loader处理css和Sass：
默认情况下webpack是处理不了CSS的代码的，但是我们可以通过webpack的loader加载器来处理；
module.exports = { entry: \'./src/app.js\', output: { path: __dirname + \'/dist\', filename: \'app.bundle.js\' }, module: { rules: [ { test: /\.css$/, use: [ \'style-loader\', \'css-loader\' ] } ] } };
在日常开发中，我们只需要在webpack.config.js文件中写上上面的配置代码即可让webpack来处理CSS代码和Sass代码；
webpack-dev-server：
webpack-dev-server是webpack的一个常用插件，可以用来在本地上开启服务、启动浏览器并且可以实时监听文件修改；
module.exports = { entry: \'./src/app.js\', ... //进行webpack-dev-server插件配置 devServer: { //端口号，默认8080，可以自定义修改 port: 9000, //运行webpack-dev-server的时候自动打开浏览器 open: true }, ... };
source-map调试：
开发总是离不开调试，但是我们用webpack给项目打包了之后，我们是很不方便找到错误或者问题所在的，当然webpack也想到了这一点，因此webpack给我们提供了source-map来进行调试；
devtool选项
source-map
配置结果
在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；
devtool选项
cheap-module-source-map
配置结果
在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
devtool选项
eval-source-map
配置结果
使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；
devtool选项
cheap-module-eval-source-map
配置结果
这是在打包文件时最快的生成source map的方法，生成的Source Map会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；
综上所述，从上到下打包速度越来越快，不过同时带来的副作用也越多，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。在中小型项目中，eval-source-map是一个比较不错的选择；
cheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑时间成本时使用。
module.exports={ devtool:"eval-source-map", }
在webpack打包之后，如果报错我们是看不到源文件的，因为此时文件已经被webpack打包了，这很不方便我们的开发调试，source-map就是用来解决这个问题的，通过添加配置devtool:”eval-source-map”这一行简单的代码，我们即可在调试的时候看到我们的源文件进行调试；