详细的 webpack4 多入口配置

本文主要是多入口配置，希望能在无框架开发网页时提高开发效率，对代码进行打包优化。本文有什么需要改善的地方，还望各位多多指教。

本文关键词：

1. babel7
2. 多入口
3. sass
4. 图片处理
5. 音视频处理
6. 字体处理
7. gzip

github 源码

模块总览

目录结构大概如下：

|-build|-create.js|-utils.js|-webpack.base.js|-webpack.dev.js|-webpack.prod.js
|-dist
|-src
|-.babelrc
|-.eslintrc.js
|-package.json

// webpack.base.js
const webpack = require('webpack')
const PurgecssPlugin = require('purgecss-webpack-plugin')const rules = require('./webpack.rules.js')
const utils = require('./utils.js')module.exports = {entry: {},resolve: {},module: {},externals: {},plugins: []
}// webpack.prod.js
const webpack = require('webpack')
const merge = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CompressionPlugin = require('compression-webpack-plugin')const configBase = require('./webpack.base.js')
const utils = require('./utils.js')const configProd = {mode: 'production',devtool: 'none',output: {},optimization: {},plugins: []
}
module.exports = merge(configBase, configProd)// webpack.dev.js
const webpack = require('webpack')
const merge = require('webpack-merge')const utils = require('./utils.js')
const configBase = require('./webpack.base.js')const configDev = {mode: 'development'output: {},devServer: {},plugins: [],module: {}
}
module.exports = merge(configBase, configDev)// webpack.rules.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'
const rules = []
module.exports = rules

后文省略 module.exports 等代码，不再赘述。

配置入口 entry

入口告诉 webapck 从哪个模块开始，根据依赖关系打包

1. 单入口

entry: './src/index.js'

2. 多入口

entry: {index: './src/index/index.js'
}

对于多入口配置，可以用 glob 库来动态获取入口文件，如下：

// utils.js
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const glob = require('glob') // 遍历目录
const devMode = process.env.NODE_ENV !== 'production'/*** 返回文件的绝对路径* @param {string} dir 文件路径* __dirname 获得当前执行文件所在目录的完整目录名（这里指的是 build 目录）*/
function resolve(dir) {return path.resolve(__dirname, dir)
}//动态添加入口
function getEntry(globPath) {var dirname, namereturn glob.sync(globPath).reduce((acc, entry) => {// name  ./src/pages/index/index.js// dirname  ./src/pages/index// basename  index.jsdirname = path.dirname(entry)name = dirname.slice(dirname.lastIndexOf('/') + 1)acc[name] = entryreturn acc}, {})
}function htmlPlugins() {}module.exports = {resolve,getEntry,htmlPlugins
}// webpack.base.js
entry: utils.getEntry('./src/pages/*/index.js'),

配置 clean-webpack-plugin

在配置 output 之前配置这个插件是为，每次打包前可以删除 dist 目录，保证没有冗余文件。

// webpack.prod.js
const cleanWebpackPlugin = require('clean-webpack-plugin')plugins: [// 删除 dist 目录new CleanWebpackPlugin({// verbose Write logs to console.verbose: false, //开启在控制台输出信息// dry Use boolean "true" to test/emulate delete. (will not remove files).// Default: false - remove filesdry: false}),
]

配置出口 output

自定义输出文件的位置和名称

// webpack.dev.js
output: {path: utils.resolve('../dist'),// 包名称filename: 'js/[name].js'
},// webpack.prod.js
output: {path: utils.resolve('../dist'),// 包名称filename: 'js/[name].[chunkhash:8].js',// 块名，公共块名（非入口）chunkFilename: 'js/[name].[chunkhash:8].js',// 打包生成的 index.html 文件里面引用资源的前缀// 也为发布到线上资源的 URL 前缀// 使用的是相对路径，默认为 ''publicPath: '.'
},

hash

文件名加入 hash，是为了更好的利用浏览器对静态文件的缓存。

1. hash

即使文件内容没有改变，每次构建都产生一个新的哈希值，这显然不是我们想看到的。可以用在开发环境，但不建议用于生产环境。

2. chunkhash

每个入口都有对应的哈希值，当入口依赖关系中有文件内容发生变化，该入口的哈希值才会发生变化。适用于生产环境。

3. contenthash

根据包内容计算出哈希值，只要包内容不变，哈希值不变。适用于生产环境。

关于这三者的区别，网上也有相关文章，例如我查到的一篇 《webpack 中的 hash、chunkhash、contenthash 区别》 可以参考。

配置模式 mode

none、development、production，默认为 production

// webpack.prod.js
mode: 'production'// webpack.dev.js
mode: 'development'

webpack4 针对不同模式，调用内置的优化策略，可以减少很多配置。参考 webpack 模式

配置解析策略 resolve

// webpack.base.js
resolve: {// import 导入时别名，减少耗时的递归解析操作alias: {'@': resolve('../src'),'assets': utils.resolve('../src/assets')},extensions: ['.js','.json']
}

配置解析和转换文件的规则 module

给项目中不同的文件类型，配置相应的规则

// webpack.base.js
module: {// 忽略大型的 library 可以提高构建性能noParse: /jquery|lodash/,rules: []
}

1. js 解析规则

// webpack.rules.js
rules: [{test: /\.js$/,use: ['babel-loader'],// 不检查 node_modules 下的 js 文件exclude: '/node_modules/'}
]// .babelrc
{"presets": [["@babel/preset-env",{"useBuiltIns": "usage","corejs": 3,"modules": false}]]
}// pages/index/index.js
import 'core-js/stable'
import 'regenerator-runtime/runtime'

根据官网 Usage Guide 配置如上，这里采用的是 core-js@3 来实现 polyfill。因为 babel7 已经废弃 @babel/polyfill 和 core-js@2，不再更新。新的特性只会添加到 core-js@3，为了避免后续再改动，直接用 3。只是打出来的包大了点，这个自己平衡，如果觉得不爽，就还是用 @babel/polyfill。

关于这个 core-js@3 有篇文章 讲的挺清晰，可以参考。

2. sass 解析规则

// webpack.rules.js
rules: [{test: /\.s[ac]ss$/i,use: [devMode? 'style-loader': {loader: MiniCssExtractPlugin.loader,options: {// you can specify a publicPath here// by default it use publicPath in webpackOptions.outputpublicPath: '../'}},'css-loader','postcss-loader','sass-loader']}
]// webpack.prod.js
plugins: [new MiniCssExtractPlugin({filename: 'css/[name].[contenthash:8].css',chunkFilename: 'css/[name].[contenthash:8].css'}),
]

3. html

// webpack.base.js
plugins: [...utils.htmlPlugins('./src/pages/*/index.html')]// utils.js
function htmlPlugins(globPath) {var dirname, namereturn glob.sync(globPath).reduce((acc, entry) => {dirname = path.dirname(entry)name = dirname.slice(dirname.lastIndexOf('/') + 1)acc.push(new htmlWebpackPlugin(htmlConfig(name, name)))return acc}, [])
}function htmlConfig(name, chunks) {return {template: `./src/pages/${name}/index.html`,filename: `${name}.html`,// favicon: './favicon.ico',// title: title,inject: true,chunks: [chunks],minify: devMode? false: {removeComments: true,collapseWhitespace: true}}
}

4. 图片

// webpack.rules.js
rules: [{test: /\.(png|jpe?g|gif)(\?.*)?$/,use: [{loader: 'url-loader',options: {esModule: false,limit: 4 * 1024,name: 'img/[name].[hash:8].[ext]'}},{loader: 'img-loader',options: {plugins: [require('imagemin-pngquant')({speed: 2 // 1-11}),require('imagemin-mozjpeg')({quality: 80 // 1-100}),require('imagemin-gifsicle')({optimizationLevel: 1 // 1,2,3})]}}]},{test: /\.(svg)(\?.*)?$/,use: [{loader: 'url-loader',options: {name: 'img/[name].[hash:8].[ext]'}}]},
]

用法：

background: url(~assets/index/icons/ic-star-16px.png);

import wukong from 'assets/index/wukong.jpg'

<img src="~assets/index/wukong.jpg" alt="wukong" />

这里有有几个点要注意：

• url-loader 和 file-loader
  如果配置了 limit，那么小于这个 limit 值的图片会被 url-loader 转换成 base64，超过的图片直接用 file-loader 处理。所以虽然规则里没出现 file-loader，但还是要安装。
• html-loader
  用于处理 html 文件，这里主要是处理 html 文件里的图片。图片会通过 url-loader 处理，处理完再给图片 src 设置正确的路径或 base64。而 html 中要使用 webpack 的 alias 配置，需要在前面加上 ~，然后 url-loader 要配置 esModule: false 才不会出错。

5. 音视频和字体

// webpack.rules.js
rules: [{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,loader: 'url-loader',options: {limit: 4 * 1024,name: '[name].[hash:8].[ext]',outputPath: 'media'}},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {limit: 4 * 1024,name: '[name].[hash:8].[ext]',outputPath: 'font'}}
]

devserver

// webpack.dev.js
devServer: {contentBase: utils.resolve('../src'), // 告诉服务器从哪个目录中提供内容publicPath: '/', // 此路径下的打包文件可在浏览器中访问port: '8090',overlay: true, // 浏览器页面上显示错误open: true, // 自动打开浏览器// stats: "errors-only", //stats: "errors-only"表示只打印错误：historyApiFallback: false, // 404 会被替代为 index.htmlinline: true, // 内联模式，实时刷新hot: true, // 开启热更新proxy: {'/api': {target: 'https://example.com/',changeOrigin: true,pathRewrite: {}}}
},
plugins: [//热更新new webpack.HotModuleReplacementPlugin()
],

1. 打包后文件的内存路径 = devServer.contentBase + output.publicPath + output.filename，只能通过浏览器来访问这个路由来访问内存中的 bundle
2. 对于 publicPath，有两个用处：

• 像以上的被 webpack-dev-server 作为在内存中的输出目录。
• 被其他的 loader 插件所读取，修改 url 地址等。

devtool

// webpack.dev.js
devtool: 'cheap-eval-source-map',// webpack.prod.js
devtool: 'none',

此选项控制是否生成，以及如何生成 source map。不同选项之间，官网 有更详细解释和对比。

optimization

// webpack.prod.js
optimization: {runtimeChunk: {name: 'manifest'},splitChunks: {cacheGroups: {vendors: {name: 'vendors',test: /[\\\/]node_modules[\\\/]/,priority: -10,chunks: 'initial' // 只对入口文件处理},vendors: {name: 'chunk-common',minChunks: 2,priority: -20,chunks: 'initial',reuseExistingChunk: true}}}
},

runtimeChunk 和 splitChunks 主要优化的点在于浏览器缓存，如果不考虑，也可以不加这个配置。

externals

// webpack.base.js
externals: {'jquery': 'window.jquery'
},

作用：防止将某些 import 的包 (package) 打包到 bundle 中，而是在运行时 (runtime) 再去从外部获取这些扩展依赖。
没加 externals 配置，jq 通过 cdn 加载，直接在本地使用 $('#id') 打包没什么问题。但是，如果你在本地使用了模块化的 jq 插件，就加上面这个 externals 配置了。原因如下：

;(function(window, factory) {if (typeof exports === 'object') {module.exports = factory(require('jQuery'))} else if (typeof define === 'function' && define.amd) {define(['jQuery'], factory)} else {factory()}
})(window, function($) {$.fn.green = function() {$(this).each(function() {$(this).css('color', 'green')})}
})

上面的代码是一个简单 jq 插件，采用了 UMD 模块化方案。if (typeof exports === 'object') 这行代码会被 webpack 解析为 if (true)，也就是说，webpack 编译后的代码，会执行 require('jquery')，而本地并没有安装 jq，所以会报错，无法打包成功。

ProvidePlugin

plugins: [// 自动加载模块，无需 import 或 requirenew webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery','window.jQuery': 'jquery'}),
]