context
- 该配置会影响 入口 和 loaders 的解析；
- 入口 和 loaders 的相对路径会以 context 的配置作为基准路径，这样配置会独立于 CWD（current working directory 当前执行路径）
context: path.resolve(__dirname, "app")
output
library
这样一来，打包后的结果中，会将自执行函数的执行结果暴露给 abc 这个变量
有一些插件需要这种方式暴露出去，赋值给 abc 这个变量
library: "abc"
libraryTarget
该配置可以更加精细的控制如何暴露入口包的导出结果
其他可用的值有：
- var：默认值，暴露给一个普通变量
- window：暴露给 window 对象的一个属性
- this：暴露给 this 的一个属性
- global：暴露给 global 的一个属性
- commonjs：暴露给 exports 的一个属性
- 其他
libraryTarget: "var"
target
设置打包结果最终要运行的环境，常用值有
- web: 打包后的代码运行在 web 环境中
- node：打包后的代码运行在 node 环境中
- 其他
target: "web" //默认值
module.noParse
不解析正则表达式匹配的模块，通常用它来 忽略那些大型的单模块库 ，以提高 构建性能
noParse: /jquery/
resolve
resolve 的相关配置主要用于控制 模块解析 过程
modules
当解析模块时，如果遇到导入语句
require("test")，webpack 会从下面的位置寻找依赖的模块当前目录下的
node_modules目录上级目录下的
node_modules目录…
modules: ["node_modules"] // 默认值
extensions
当解析模块时，遇到无具体后缀的导入语句， webpack 会自动补全后缀名
extensions: [".js", ".json"] // 默认值
alias
有了 alias（别名）后，导入语句中可以加入配置的键名，例如
require("@/abc.js")webpack 会将其看作是require(src的绝对路径+"/abc.js")；在大型系统中，源码结构往往比较深和复杂，别名配置可以更加方便的导入依赖；
alias: {
"@": path.resolve(__dirname, 'src'),
"_": __dirname
}
externals
-
从最终的 bundle 中排除掉配置的 配置的源码，例如，入口模块是
//index.js require("jquery") require("lodash") -
生成的 bundle 是：
(function(){ ... })({ "./src/index.js": function(module, exports, __webpack_require__){ __webpack_require__("jquery") __webpack_require__("lodash") }, "jquery": function(module, exports){ // jquery的大量源码 }, "lodash": function(module, exports){ // lodash的大量源码 }, }) -
但有了上面的配置后，则变成了
(function(){ ... })({ "./src/index.js": function(module, exports, __webpack_require__){ __webpack_require__("jquery") __webpack_require__("lodash") }, "jquery": function(module, exports){ module.exports = $; }, "lodash": function(module, exports){ module.exports = _; }, }) -
这比较适用于一些第三方库来自于外部 CDN 的情况，这样一来，即可以在页面中使用 CDN ，又让 bundle 的体积变得更小，还不影响源码的编写；
stats
stats 控制的是构建过程中控制台的输出内容
打赏作者
您的打赏是我前进的动力
微信
支付宝
webpack 核心功能👉 全局变量
上一篇
评论
