磨刀不误砍柴工。
webpack在前端工程化中出场率极高。为了让自己的前端工作更顺利，有必要把webpack的配置仔细分析下。同时加深我们对webpack的设计理念的理解。
我们将配置项，逐个拿出来分析下。
mode
可选值 development production
打包时会将process.env.NODE_ENV修改为此值
mode: 'production',
entry
入口文件
entry: {
app: ['./src/index.js']
},
output
output: {
path: path.resolve(process.cwd(), './lib'), // 输出文件的目录,是个绝对路径
publicPath: '/dist/', // 所有静态资源都会加上这个前缀 比如 images/a.png -> /dist/images/a.png
filename: '[name].min.js', // 打完包的入口文件, 入口文件名.min.js
chunkFilename: '[id].js', // 非入口文件，按这种方式输出文件 0.js, 1.js ...
libraryTarget: 'umd', // 和 library配合使用，规定你的代码打包成的模块，可以用什么规范导入，这里可以用umd方式导入，即CommonJS, AMD 或者全局变量方式导入
libraryExport: 'default', // 哪些子模块需要被导出。libraryTarget 支持 commonjs才有意义，这里只导出default子模块。
library: 'ELEMENT', // 导出的模块名
umdNamedDefine: true, // 是否将模块名称作为 AMD 输出的命名空间
globalObject: 'typeof self !== \'undefined\' ? self : this' // 如果输出全局对象的话，绑定到这个对象上比如 self.ELEMENT 或者 this.ELEMENT
},
resolve
resolve: {
extensions: ['.js', '.vue', '.json'], // 导入文件时，不带扩展名，会依次按这几个扩展名找
alias: config.alias // 创建 import 或 require 的别名，来确保模块引入变得更简单， 比如import 'element-ui' 就相当于 import 'element-ui在项目下的路径'
},
externals
如果我们想引用一个库，但是又不想让webpack一起打包，就用externals
externals: {
"lodash": {
commonjs: "lodash",//如果我们的库运行在Node.js环境中，import _ from 'lodash'等价于const _ = require('lodash') 转成异步加载
commonjs2: "lodash",//同上
amd: "lodash",//如果我们的库使用require.js等加载,等价于 define(["lodash"], factory);
root: "_"//如果我们的库在浏览器中使用，需要提供一个全局的变量‘_’，等价于 var _ = (window._) or (_);
}
}
optimization
代码优化，减少体积等
optimization: {
minimizer: [ // 定制压缩选项
new TerserPlugin({
terserOptions: {
output: {
comments: false // 去掉注释
}
}
})
]
},
performance
打包时性能提示的相关配置
performance: {
hints: false // 不提示 可选值 false | "error" | "warning", 如果开启，一个资源大于 250kb 就会有提示
},
stats
打包过程中，控制台输出信息的配置。参数比较多，官方文档定义也比较清楚，有需要可查阅
stats: {
children: false // 不显示子信息，这个子信息是什么，还不清楚，可以分别打开，关闭测试下
},
module
module.rules创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
module: {
rules: [
{
test: /\.(jsx?|babel|es6)$/, // resource 条件1
include: process.cwd(), // resource 条件2
exclude: config.jsexclude, // resource 条件3
loader: 'babel-loader' // 匹配成功的结果
},
{
test: /\.vue$/, resource 条件1
loader: 'vue-loader', // 匹配成功的结果， 应用vue-loader
options: {
compilerOptions: {
preserveWhitespace: false // 忽略模版中HTML标签间的空格
}
}
}
]
},
plugins
plugins: [
new webpack.DefinePlugin({ // 允许你创建可在编译时配置的全局常量。这对需要在开发环境构建和生产环境构建之间产生不同行为来说非常有用。
// Definitions...
}),
new ProgressBarPlugin(), // 打包编译时，显示进度条
new VueLoaderPlugin() // 为vue-loader服务
]
总结
以上大部分配置都来源于饿了么的开源框架element-ui, 没有深入展开其他的配置。后面再补充其他需要记录的配置。
网友评论