配置
webpack 开箱即用，可以无需使用任何配置文件。然而，webpack 会假定项目的入口起点为 src/index，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。
通常，你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个 webpack.config.js 文件，webpack 会自动使用它。
下面指定了所有可用的配置选项。
选项
webpack.config.js
const path = require('path');
module.exports = {
mode: "production", // "production" | "development" | "none" // Chosen mode tells webpack to use its built-in optimizations accordingly.
entry: "./app/entry", // string | object | array // 默认为 './src'
entry: ["./app/entry1", "./app/entry2"],
entry: {
a: "./app/entry-a",
b: ["./app/entry-b1", "./app/entry-b2"]
},
//如果是array 类型。则搭配output.librarry 配置使用时，只有数组的最后一个入口文件的模块会被导出。
// 这里应用程序开始执行
// webpack 开始打包
output: {
// webpack 如何输出结果的相关选项
path: path.resolve(__dirname, "dist"), // string
// 所有输出文件的目标路径
// 必须是绝对路径（使用 Node.js 的 path 模块）
filename: "bundle.js", // string // 「入口分块(entry chunk)」的文件名模板
filename: "[name].js", // 用于多个入口点(entry point)（出口点？）
filename: "[chunkhash].js", // 用于长效缓存
publicPath: "/assets/", // string // 输出解析文件的目录，url 相对于 HTML 页面
library: "MyLibrary", // string,
// 导出库(exported library)的名称
libraryTarget: "umd", // 通用模块定义 // 导出库(exported library)的类型
/* 高级输出配置（点击显示） */ },
module: {
// 关于模块配置
rules: [
// 模块规则（配置 loader、解析器等选项）
{
test: /\.jsx?$/,
include: [
path.resolve(__dirname, "app")
],
exclude: [
path.resolve(__dirname, "app/demo-files")
],
// 这里是匹配条件，每个选项都接收一个正则表达式或字符串
// test 和 include 具有相同的作用，都是必须匹配选项
// exclude 是必不匹配选项（优先于 test 和 include）
// 最佳实践：
// - 只在 test 和 文件名匹配 中使用正则表达式
// - 在 include 和 exclude 中使用绝对路径数组
// - 尽量避免 exclude，更倾向于使用 include
issuer: { test, include, exclude },
// issuer 条件（导入源）
enforce: "pre", //执行顺序放到最前面
enforce: "post", //执行顺序放到最后
// 标识应用这些规则，即使规则覆盖（高级选项）
loader: "babel-loader",
// 应该应用的 loader，它相对上下文解析
// 为了更清晰，`-loader` 后缀在 webpack 2 中不再是可选的 不建议省略
options: {
presets: ["es2015"]
},
// loader 的可选项
},
{
test: /\.html$/,
use: [
// 应用多个 loader 和选项
"htmllint-loader",
{
loader: "html-loader",
options: {
/* ... */
}
}
]
},
{ oneOf: [ /* rules */ ] },
// 只使用这些嵌套规则之一
{ rules: [ /* rules */ ] },
// 使用所有这些嵌套规则（合并可用条件）
{ resource: { and: [ /* 条件 */ ] } },
// 仅当所有条件都匹配时才匹配
{ resource: { or: [ /* 条件 */ ] } },
{ resource: [ /* 条件 */ ] },
// 任意条件匹配时匹配（默认为数组）
{ resource: { not: /* 条件 */ } }
// 条件不匹配时匹配
],
resolve: {
// 解析模块请求的选项
// （不适用于对 loader 解析）
modules: [
"node_modules",
path.resolve(__dirname, "app")
],
// 用于查找模块的目录
extensions: [".js", ".json", ".jsx", ".css"],
// 使用的扩展名
alias: {
// 模块别名列表
"module": "new-module",
// 起别名："module" -> "new-module" 和 "module/path/file" -> "new-module/path/file"
"only-module$": "new-module",
// 起别名 "only-module" -> "new-module"，但不匹配 "only-module/path/file" -> "new-module/path/file"
"module": path.resolve(__dirname, "app/third/module.js"),
// 起别名 "module" -> "./app/third/module.js" 和 "module/file" 会导致错误
// 模块别名相对于当前上下文导入
},
performance: {
hints: "warning", // 枚举 maxAssetSize: 200000, // 整数类型（以字节为单位）
maxEntrypointSize: 400000, // 整数类型（以字节为单位）
assetFilter: function(assetFilename) {
// 提供资源文件名的断言函数
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
devtool: "source-map", // enum // 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试
// 牺牲了构建速度的 `source-map`是最详细的。
context: __dirname, // string（绝对路径！）
// webpack 的主目录
// entry 和 module.rules.loader 选项
// 相对于此目录解析
target: "web", // 枚举 // bundle 应该运行的环境
// 更改 块加载行为(chunk loading behavior) 和 可用模块(available module)
externals: ["react", /^@angular\//], // 不要遵循/打包这些模块，而是在运行时从环境中请求他们
serve: { //object
port: 1337,
content: './dist',
// ...
},
// 为 webpack-serve 提供选项
stats: "errors-only", // 精确控制要显示的 bundle 信息
devServer: {
proxy: { // proxy URLs to backend development server
'/api': 'http://localhost:3000'
},
contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
compress: true, // enable gzip compression
historyApiFallback: true, // true for index.html upon 404, object for multiple paths
hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
https: false, // true for self-signed, object for cert authority
noInfo: true, // only errors & warns on hot reload
// ...
},
plugins: [
// ...
],
// 附加插件列表
/* 高级配置（点击展示） */}
