webpack 4.x 配置理解
webpack是一个现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，会在内部构建一个依赖图，此依赖图会映射项目所需要的每个模块，并且生成一个或者多个bundle。
一、入口(entry)
入口起点是构建其内部 依赖图的开始，进入后webpack 会找出项目所依赖的块和库，默认起点./src/index.js。
webpack.config.js
1、简单规则：每个HTML页面都有一个入口起点。单页面应用（SPA）：一个入口起点，；多页面应用（MPA）：多个入口起点
2、命名：如果传入一个字符串或者字符串数组，chunk会被命名为main。如果传入一个对象，则每个键是chunk的名称，该值描述了chunk的入口起点。
二、输出(output)
输出属性是告诉webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件，主要输出文件默认输出位置：./dist/main.js，其他文件默认放置在 ./dist 文件夹中。
webpack.config.js
1、注：filename不会影响那些「按需加载 chunk」的输出文件。对于这些文件，请使用 output.chunkFilename 选项来控制输出。
2、[hash] 和 [chunkhash] 的长度可以使用 [hash:16]（默认为20）来指定。可通过指定output.hashDigestLength 在全局配置长度。
3、output.pathinfo在 development 模式时的默认值是 true，而在 production 模式时的默认值是 false。在生产环境(production)下，不应该使用
4、output.path 中的 URL 以 HTML 页面为基准
5、js/[name].[contenthash].js：路劲加文件名
三、loader
webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
注意，loader 能够 import 导入任何类型的模块（例如 .css 文件），可以使开发人员创建出更准确的依赖关系图。
在更高层面，在 webpack 的配置中 loader 有两个属性：
1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. use 属性，表示进行转换时，应该使用哪个 loader。
webpack.config.js
1、mini-css-extract-plugin是将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap；通过配合html-webpack-plugin插件的使用，生成的html就会自动引入css文件啦。只能用在webpack4中，对比另一个插件 extract-text-webpack-plugin有点:
①. 异步加载 ②. 不重复编译，性能更好 ③. 更容易使用
2、以上的配置中，对一个对象定义了rules属性，里面包含了两个属性，意味着告诉webpack编译器如下信息：“当碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先 使用 raw-loader 转换一下
3、在 webpack 配置中定义 rules 时，要定义在 module.rules
4、使用正则表达式匹配文件时，你不要为它添加引号。也就是说，/\.txt$/ 与 '/\.txt$/'/ "/\.txt$/" 不一样。
四、插件(plugin)
loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
想要使用一个插件，你只需要 require() 它，然后把它添加到plugins 数组中。
由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例
webpack.config.js
一、4.1 常用插件
①用途：用于编译 Webpack 项目中的 html 类型的文件，为应用程序生成 HTML 一个文件。
②用法：
new HtmlWebpackPlugin({
filename:'index.html',
template:resolvePath('../app/src/index.html'),
inject:true
})
③当未定义此插件的入口时，默认只为 index.html,输出同样是 index.html。
④可以为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
⑤单页面可以生成一个html文件入口；配置N个html-webpack-plugin可以生成N个页面入口
⑥重构入口html，动态添加< link>和< script>，在以hash命名的文件上非常有用，因为每次编译都会改变
⑦配置项
title：生成的html文档的标。并不会替换指定模板文件中的title元素的内容，除非html模板文件中使用了模板引擎语法来获取该配置项值，题
filename：输出文件的文件名称，默认为index.html。还可以为输出文件指定目录位（例如'html/index.html'）置
template: 本地模板文件的位置[为template指定的模板文件没有指定任何loader的话，默认使用ejs-loader。如template: './index.html'，若没有为.html指定任何loader就使用ejs-loader
templateContent：可以指定模板的内容，不能与template共存。
inject：向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同( 1. true或者body：所有JavaScript资源插入到body元素的底部 2. head: 所有JavaScript资源插入到head元素中 3. false： 所有静态资源css和JavaScript都不会注入到模板文件中)
favicon: 添加特定favicon路径到输出的html文档中
hash: true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值
chunks: 允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中
excludeChunks: none | auto| function，默认auto； 允许指定的thunk在插入到html文档前进行排序。> function值可以指定具体排序规则；auto基于thunk的id进行排序； none就是不排序
xhtml: true|fasle, 默认false；是否渲染link为自闭合的标签，true则为自闭合标签
cache: true|fasle, 默认true； 如果为true表示在对应的thunk文件修改后就会emit文件
showErrors: true|false，默认true；是否将错误信息输出到html页面中。这个很有用，在生成html文件的过程中有错误信息，输出到页面就能看到错误相关信息便于调试。
2、ProvidePlugin：
①用途：$出现，就会自动加载模块；$默认为'jquery'的exports。
②用法：new webpack.ProvidePlugin({ $: 'jquery', })
3、webpack.IgnorePlugin：
①用途：定义全局常量
②用法：
new webpack.DefinePlugin({
'process.env': {
NODE_ENV:JSON.stringify(process.env.NODE_ENV)
},
PRODUCTION: JSON.stringify(PRODUCTION),
APP_CONFIG: JSON.stringify(appConfig[process.env.NODE_ENV]),
}),
4、IgnorePlugin：
①用途：忽略regExp匹配的模块,排除部分不需要编译的文件
②用法：new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/,/node_modules$/)
①用途：分离css文件
②用法：
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash:6].css',
})
①Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
五、模式(mode)
通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
module.exports = { mode: 'production'};
六、浏览器兼容性(browser compatibility)
webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要 提前加载 polyfill
七、解析(resolve)
模块解析(module resolution) : resolver 是一个库(library)，用于帮助找到模块的绝对路径。resolver 帮助 webpack 从每个如 require/import 语句中，找到需要引入到 bundle 中的模块代码。 当打包模块时，webpack 使用 enhanced-resolve 来解析文件路径。
解析:该属性的作用是设置模块如何被解析
webpack.config.js
一、常用配置项
1、esolve.alias：设置别名, 在vue中都是 @代表src目录。 也可以在key尾部添加$,精确匹配某一文件
module.exports = {
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'src/utilities/'),
Templates: path.resolve(__dirname, 'src/templates/')
}
}
//替换「在导入时使用相对路径」这种方式，就像这样：
import Utility from '../../utilities/utility';
//可以这样使用别名:
import Utility from 'Utilities/utility';
}
2、resolve.extensions：自动解析确认的扩展,默认值为:extensions: [.wasm', '.mjs','.js', '.json'] .能够使用户在引入模块时不带扩展：
import File from '../path/to/file';
3、resolve.mainFiles：解析目录时要使用的文件名。 当你引入路径只精确到一个文件夹时, 引入文件夹中的哪个.js文件, 默认为: index
module.exports = {
resolve: {
mainFiles: ['index']
}
};
4、resolve.modules：告诉 webpack 解析模块时应该搜索的目录。绝对路径和相对路径都能使用，但是之间有一点差异。
①使用绝对路径，将只在给定目录中搜索。
module.exports = {
resolve: {
modules: ['node_modules']
}
};
②如果你想要添加一个目录到模块搜索目录，此目录优先于 node_modules/ 搜索：
module.exports = {
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules']
}
};
5、resolve.enforceExtension: 引入的模块文件后面要不要带扩展名, true:一定要带, 默认为 false
import foo from './foo' // ./foo.js 中的.js可以省略
6、resolve.enforceModuleExtension：对模块是否需要使用的扩展（例如 loader）。boolean: false默认
八、优化(optimization)
从 webpack 4 开始，会根据你选择的 mode 来执行不同的优化，不过所有的优化还是可以手动配置和重写。
webpack.config.js
一、常用配置项
1、optimization.minimize：boolean，production 模式下，这里默认是 true。
告知 webpack 使用 TerserPlugin 压缩 bundle。
module.exports = { optimization: { minimize: false } };
2、optimization.minimizer： [<plugin>] and or [function (compiler)]
允许你通过提供一个或多个定制过的 TerserPlugin 实例，覆盖默认压缩工具(minimizer)
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({ // 压缩js
cache: true,
parallel: true, // 开启多进程，提升压缩速度
sourceMap: true, // 生成map文件
}),
new OptimizeCSSAssetsPlugin({}), // 压缩css
],
}
};
3、optimization.splitChunks：object
对于动态导入模块，默认使用 webpack v4+ 提供的全新的通用分块策略
九、性能(performance)
可以控制 webpack 如何通知「资源(asset)和入口起点超过指定文件限制」。配置如何展示性能提示。例如，如果一个资源超过 250kb，webpack 会对此输出一个警告来通知你。
一、常用配置项
1、performance.hints：false | "error" | "warning"，此属性默认设置为 "warning"。
①给定一个创建后超过 250kb 的资源：hints: false
②不展示警告或错误提示。：hints: 'warning'
③将展示一条警告，通知你这是体积大的资源。在开发环境，我们推荐这样。：hints: 'error'
2、performance.maxEntrypointSize：int
①此选项根据入口起点的最大体积，控制 webpack 何时生成性能提示。默认值是：250000 (bytes)。
module.exports = {
performance: {
maxEntrypointSize: 400000
}
};
十、devtool
选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。切勿同时使用 devtool 选项和SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件devtool 选项在内部添加过这些插件，所以你最终将应用两次插件。
