共计 2320 个字符，预计需要花费 6 分钟才能阅读完成。
webpack 简述
webpack 简单来说就是一个模块打包器，也是目前最流行的前端构建工具之一，他将整个项目根据依赖关系通过各种 loader 与 plugin 的处理后进行打包；可以实现对代码的各种处理，比如 less、sass、stylus 的解析，ecmascript 版本的转换、代码的压缩分割等等
webpack 之 loader
loader 可以说是 webpack 最核心的部分，前面所说的各种功能大部分就是又他完成的;loader 简单来说就是一个导出为函数的 JavaScript 模块，webpack 会配置文件申明的倒序调用 loader，传入资源文件，经 loader 处理后传给下一 loader 或者 webpack 处理
常用 loader
1.sass-loader、less-loader、stylus-loader、style-loader、css-loader2.babel-loader3.file-loader、url-loader4.vue-loader5.string-loader
webpack 之 plugin
plugin 是 webpack 的重要组成部分，他能以各种钩子钩入每个编译 (compilation) 中触发的所有关键事件，插件都具备完全访问 compiler 对象的能力
常用 plugin
1.HtmlWebpackPlugin2.HotModuleReplacementPlugin3.DefinePlugin4.DllPlugin、DllReferencePlugin
以下是详细配置
{
mode: ‘development’, // production: 生产, 会压缩代码；development: 开发，不会压缩代码，便于 debug
devtool: ‘inline-source-map’,// 添加 source map; 便于 debug, 但会严重影响性能，千万不要在生产环境使用
// webpack 打包的入口
entry: {
app: ‘./src/index.js’, // 路径相对于 package.json
// app: [‘./vue.js’, ‘./src/index.js’]
},
// 文件输出
output: {
filename: ‘[name].js’,
path: path.resolve(__dirname, ‘../dist’) // 输出的目录，默认为 dist
},
optimization: {
runtimeChunk: true,// 将 webpack 打包后的主文件单独分离，默认是将主文件放在入口文件当中，当需要在入口文件之前引入打包的公共代码时需要用到，此项建议对 webpack 有一定了解后再理解，关于打包后的代码分析我会单独写一篇
// 抽离公共代码
splitChunks: {
cacheGroups: {
vendor: {// 抽离第三方插件
test: /node_modules/, // 指定是 node_modules 下的第三方包
chunks: ‘initial’, // initial 对于异步导入的文件不处理;async 异步 chunk，只对异步导入的文件处理;all 全部 chunk
name: ‘common/vendor’, // 打包后的文件名，任意命名, 会逆优化首屏加载的速度, 慎用，建议每个公共代码块都单独抽离或者手动配置
priority: 10 // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
},
utils: {// 抽离自定义公共代码
test: /\.js$/,
chunks: ‘initial’,
name: true, // 每个页面的包只包含需要的文件, 不会影响首屏加载的速度，good job
minSize: 0 // 只要超出 0 字节就生成一个新包, 默认 30000B
}
}
}
},
module: {
rules: [
// 打包 css 文件需要用到的 loader
// 注意：loader 的执行顺序是后面的先执行
// style-loader 必须在 css-loader 的前面
{
test: /\.css$/,
use: [
// 将 css 文件以 style 标签形式插入
{
loader: ‘style-loader’,
options: {
singleton: true // 设置为 true, 多个 css 文件会在同一个 style 标签内
}
},
‘css-loader’
],
include: path.resolve(__dirname, ‘../src’) // 只处理对应目录下的文件，构建性能提升
},
{
test: /\.js$/,
use: [
‘babel-loader’, // 配置 babel 转换代码
],
exclude: path.resolve(__dirname, ‘../node_modules’)
}
]
},
plugins: [
// 在每次打包前清理 dist 目录
// 注意配置删除 dist 目录下的所有文件，而不是 dist 目录，因为当 dist 目录其他程序打开时将无法删除
new CleanWebpackPlugin([‘dist/*’], {
root: path.resolve(__dirname, ‘../’)
}),
// 用于处理入口 html，如自动注入 entry 对应 js, 并拷贝至压缩目录等等
new HtmlWebpackPlugin({
template: ‘./src/index.html’,
// 压缩 html
minify: {
removeComments: true, // 删除注释
collapseWhitespace: true, // 删除空格
removeAttributeQuotes: true // 删除属性的引号
}
})
],
// 配置后 webpack 会跳过对应模块的打包，当使用 cdn 时需要用到，此项能提升构建性能与前端性能
externals: {
vue: ‘vue’
}
}
