配置 Webpack 的方式有两种：
通过一个 JavaScript 文件描述配置，例如使用 webpack.config.js 文件里的配置；
执行 Webpack 可执行文件时通过命令行参数传入，例如 webpack --devtool source-map
context
Webpack 在寻找相对路径的文件时会以 context 为根目录，context 默认为执行启动 Webpack 时所在的当前工作目录。 如果想改变 context 的默认配置，则可以在配置文件里这样设置它：
module.exports = {
context: path.resolve(__dirname, 'app')
}
Entry
入口文件配置
Entry 类型可以是以下三种中的一种或者相互组合：
|类型|例子|含义|
|string'|./app/entry'|入口模块的文件路径，可以是相对路径。|
|array|['./app/entry1', './app/entry2']|入口模块的文件路径，可以是相对路径。|
|object|{ a: './app/entry-a', b: ['./app/entry-b1', './app/entry-b2']}|配置多个入口，|
每个入口生成一个 Chunk
如果是 array 类型，则搭配 output.library 配置项使用时，只有数组里的最后一个入口文件的模块会被导出。
Chunk 名称
Webpack 会为每个生成的 Chunk 取一个名称，Chunk 的名称和 Entry 的配置有关：
如果 entry 是一个 string 或 array，就只会生成一个 Chunk，这时 Chunk 的名称是 main；
如果 entry 是一个 object，就可能会出现多个 Chunk，这时 Chunk 的名称是 object 键值对里键的名称。
可以动态配置入口
entry: 同步函数/异步函数
output
配置如何输出最终想要的代码
filename
配置输出文件的名称，为string 类型
chunkFilename
配置无入口的 Chunk 在输出时的文件名称。
chunkFilename 和上面的 filename 非常类似，但 chunkFilename 只用于指定在运行过程中生成的 Chunk 在输出时的文件名称。
常见的会在运行时生成 Chunk 场景有在使用 CommonChunkPlugin、使用 import('path/to/module') 动态加载等时。 chunkFilename 支持和 filename 一致的内置变量。
path
配置输出文件存放在本地的目录，必须是 string 类型的绝对路径。
publicPath
配置发布到线上资源的 URL 前缀，为string 类型。 默认值是空字符串 ''，即使用相对路径。
举个例子，需要把构建出的资源文件上传到 CDN 服务上，以利于加快页面的打开速度
Module
rules 配置模块的读取和解析规则，通常用来配置 Loader。其类型是一个数组，数组里每一项都描述了如何去处理部分文件。 配置一项 rules 时大致通过以下方式：
条件匹配：通过 test 、 include 、 exclude 三个配置项来命中 Loader 要应用规则的文件。
应用规则：对选中后的文件通过 use 配置项来应用 Loader，可以只应用一个 Loader 或者按照从后往前的顺序应用一组 Loader，同时还可以分别给 Loader 传入
参数。重置顺序：一组 Loader 的执行顺序默认是从右到左执行，通过 enforce 选项可以让其中一个 Loader 的执行顺序放到最前或者最后。
在 Loader 需要传入很多参数时，你还可以通过一个 Object 来描述
use: [
{
loader:'babel-loader',
options:{
cacheDirectory:true,
}
]
test include exclude 这三个命中文件的配置项，除了传入了一个字符串或正则，还都支持数组类型
{
test:[
/\.jsx?$/,
/\.tsx?$/
],
include:[
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'tests'),
],
exclude:[
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'bower_modules'),
]
}
noParse
noParse 配置项可以让 Webpack 忽略对部分没采用模块化的文件的递归解析和处理，这样做的好处是能提高构建性能。 原因是一些库例如 jQuery 、ChartJS 它们庞大又没有采用模块化标准，让 Webpack 去解析这些文件耗时又没有意义。
// 使用正则表达式
noParse: /jquery|chartjs/
// 使用函数，从 Webpack 3.0.0 开始支持
noParse: (content)=> {
// content 代表一个模块的文件路径
// 返回 true or false
return /jquery|chartjs/.test(content);
}
Resolve
alias
配置项通过别名来把原导入路径映射成一个新的导入路径
extensions
在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。
modules
配置 Webpack 去哪些目录下寻找第三方模块，默认是只会去 node_modules 目录下寻找。
有时你的项目里会有一些模块会大量被其它模块依赖和导入，由于其它模块的位置分布不定，针对不同的文件都要去计算被导入模块文件的相对路径， 这个路径有时候会很长，就像这样import '../../../components/button'这时你可以利用 modules 配置项优化，假如那些被大量导入的模块都在./src/components目录下，把modules配置成modules:['./src/components','node_modules']后，你可以简单通过import 'button'导入。
Plugin
plugins 配置项接受一个数组，数组里每一项都是一个要使用的 Plugin 的实例，Plugin 需要的参数通过构造函数传入
devtool
设置开发时源代码映射工具
开发时，cheap-module-eval-source-map，
生成这种 Source Map 的速度最快，能加速构建。
不会做代码压缩，Source Map 中即使没有列信息也不会影响断点调试生产时，hidden-source-map，
生成最详细的 Source Map，但不会把 Source Map 暴露出去。
由于在生产环境下会做代码压缩，一个 JavaScript 文件只有一行，所以需要列信息。
externals
将某些模块单独提取出来，不捆绑打包到代码块里
内容参考: 深入浅出webpack
网友评论