webpack常见配置信息
SelinaChan 2019-12-15
1. devtool代码调试
1. 生产模式下
source-map: 生成一个map文件，直接定位到源码的行列
?可以使用该模式，用于测试服务器
cheap-source-map: 只能定位到行，且只能定位到babel转码后的代码
cheap-module-source-map: 只能定位到行，但是可以定位到源码
2. 开发模式下
eval: 定位到编译后的代码
cheap-eval-source-map: 定位到babel转码后的行
cheap-module-eval-source-map: 定位到源码的行
eval-source-map: 定位到源码的行列
?推荐使用该方法
line-*模式慢，不考虑
2. 第三方库的应用
1. webpack.ProvidePlugin
对于类似lodash的各模块频繁使用的情况, 为了避免每次都手动引入，可以使用该插件实现全部模块的自动引入该文件。只是优化了重复引入的问题，打包体积和直接引入相同。
new webpack.ProvidePlugin({
_: ‘lodash‘
}),相当于在每个模块都默认执行了引入，用户可以直接使用。
import _ from ‘lodash‘;
?该方法不是全局变量
2. expose-loader
该方法可以避免重复引入高频使用的库。而且可以将其作为全局变量。对于debugging很方便。 在控制台就可以直接使用。
在入口文件使用：
// 必须是require require(‘expose-loader?_!lodash‘); // !前是全局变量名称；!后是库名
然后可以直接使用window._访问。
3. externals
当已经从CDN等外部引入第三方库时，如果代码中又手动引入了同样的库，该配置可以让webpack不打包配置中的第三方库。
externals: {
lodash: ‘_‘ // :前的key是库的名称；后面是全局变量的名称
}想要起作用，必须要在html中引入CDN
<script src="https://cdn.jsdelivr.net/npm//lodash.min.js"></script>
如上，即使在模块中手动引入，webpack也不会将其打入包内
import _ from ‘lodash‘; //会忽略引入的lodash库 const a = _.join([‘a‘, ‘b‘], ‘~‘);
4. html-webpack-externals-plugin
3中，需要在html文件中引入CDN文件。如果不想手动引入，直接配置生成,可以使用该插件。
??该插件必须在html-webpack-plugin插件实例化之后再进行实例化
new HtmlWebpackPlugin({
}),
new HtmlWebpackExternalsPlugin({
externals: [
{
module: ‘lodash‘,
global: ‘_‘,
entry: ‘https://cdn.jsdelivr.net/npm//lodash.min.js‘
}
]
}),3. 打包后的代码添加注释说明
new webpack.BannerPlugin(‘Lyra‘),
4. 拷贝静态文件（txt/doc等）
new CopyWebpackPlugin([{
from: path.join(__dirname, ‘./src/assets‘),
to: path.join(__dirname, ‘./dist/assets‘)
}]),5. devServer实现proxy代理，和模拟服务器
devServer: {
contentBase: path.join(__dirname, ‘dist‘),
port: 8080, host: ‘localhost‘, compress: true, // 启用gzip压缩
before(app) { // devServer本身是一个express服务器，app是其对应的app;before指的是在app.listen之前执行
app.get(‘/api/user‘, (req, res) => {
res.json([{ a: ‘lyra‘ }]);
});
},
proxy: {
‘/api‘: {
target: ‘http://localhost3000‘, // 代理本地服务到目标服务器；相当于nginx，不存在跨域问题
pathRewrite: {
‘^/api‘: ‘‘ // 重写路径；如：/api/user -> /user
}
}
}
},6. webpack-dev-middleware模拟实现webpack-dev-server
const express = require(‘express‘);
const WebpackDevMiddleware = require(‘webpack-dev-middleware‘);
const webpack = require(‘webpack‘);
const webpackConfig = require(‘./webpack.config.js‘);
const app = express();
// 返回一个编译对象
const compiler = webpack(webpackConfig);
// 1.使用webpack-dev-middleware插件启动编译
// 2.使用该插件响应客户端请求的打包文件
app.use(WebpackDevMiddleware(compiler, {}));
app.get(‘/api/user‘, (req, res) => {
res.json([{ a: ‘name‘ }]);
});
app.listen(5000);通过命令启动
"scripts": {
"node": "node devServer.js",
"build": "webpack",
"dev": "webpack-dev-server --open"
},7. 模块解析规则resolve
1. extensions
当引入文件不写扩展名时，根据extentsions设置的规则，进行文件查找。
module.exports = {
...
resolve: {
extensions: [‘.js‘, ‘.jsx‘, ‘.json‘]
}
}2. alias
给查找路径定义别名，加快文件查找速度。
对于引入npm安装的模块时，它会按照查找规则，依次查找。对于相对路径查找，也会按照相对路径的规则，依次查找。
通过定义alias可以直接按照alias指定的路径查找，避免路径解析消耗的时间。
module.exports = {
//...
resolve: {
alias: {
Utilities: path.resolve(__dirname, ‘src/utilities/‘),
Templates: path.resolve(__dirname, ‘src/templates/‘)
}
}
};引入alias之前：
import Utility from ‘../../utilities/utility‘;
引入之后
import Utility from ‘Utilities/utility‘;
另外，别名最后加上$表示，严格匹配，即使用时只能是别名，其他的都不匹配。
module.exports = {
//...
resolve: {
alias: {
xyz$: path.resolve(__dirname, ‘path/to/file.js‘)
}
}
};示例：
import Test1 from ‘xyz‘; // 严格匹配，按照别名解析 import Test2 from ‘xyz/file.js‘; // 不严格匹配，按照原来的解析规则解析
3. modules
指定查找的模块，也可以在默认规则上添加其他需要查找的模块
module.exports = {
//...
resolve: {
modules: [‘node_modules‘, ‘myloaders‘] //后者是自定义的模块
}
};4. mainFields
定义入口文件字段的查找顺序
module.exports = {
//...
resolve: { //定义了先查找package.json中的browser字段...
mainFields: [‘browser‘, ‘module‘, ‘main‘]
}
};5. mainFiles
当解析文件夹目录的时候，会按照该字段查找文件夹中的文件
module.exports = {
//...
resolve: {
mainFiles: [‘index‘] //也可以修改为main.js等
}
};8.resolveLoaders
属性和规则同resolve, 对应的是处理模块的loader的查找规则。
module.exports = {
//...
resolveLoader: {
modules: [‘node_modules‘],
extensions: [‘.js‘, ‘.json‘],
mainFields: [‘loader‘, ‘main‘]
}
};在module中按照rules使用loaders进行解析时，查找loader模块默认按照resolveLoader中的定义规则查找。
9. 自定义全局变量webpack.DefinePlugin
该插件中对应的字符串的内容，会被当作代码片段解析。变量对应的值如果是非字符串，要通过JSON.stringify()进行序列化。
new webpack.DefinePlugin({
"PRODUCTION": JSON.stringify(true),
"AUTHOR": {
"USER": JSON.stringify(‘lyra‘) // 字符串也需要序列化，否则按照表达式处理
}
}),10. 环境变量process.env.NODE_ENV
在代码中可以通过访问process.env.NODE_ENV来获取当前项目的mode值。
应用：
可以根据该值来封装函数，实现在不同环境下的不同表现。
const oldLog = console.log;
// 覆盖原来的日志函数
console.log = function newlog() {
if (process.env.NODE_ENV === ‘development‘) {
oldLog(‘开发环境打印日志‘);
}
};
//使用时，引入该文件
import ‘./console‘;
console.log("node_env", process.env.NODE_ENV);11. glob匹配多入口文件
glob是一个匹配文件的工具。
npm i glob
如果需要实现多个入口文件，使用多个html模版文件。我们可以将入口文件统一放入entries文件中；将模版文件统一放入templates文件夹中。且名称一一对应。
则不在需要一个个添加html-webpack-plugin插件。可以批量操作。
const glob = require(‘glob‘);
const files = glob.sync(‘./src/entries/*.js‘); //获取匹配的所有文件路径
const entries = {};
const templates = [];
files.forEach((file) => {
const fileName = path.basename(file, ‘.js‘); //获取文件的名称，不含扩展名
entries[fileName] = file;
templates.push(new HtmlWebpackPlugin({
template: `./src/templates/${fileName}.html`,
filename: `${fileName}.html`,
// hash: true,
chunks: [fileName], // 指定各自的chunk块，否则所有chunk将都引入
chunksSortMode: ‘manual‘
}));
});12. 日志优化stats
webpack编译时打印的日志多数是无效日志，我们通过设置stats的值自定义显示的代码。
stats默认是"normal"。
module.exports = {
//...
stats: ‘normal‘
};还可以是其他值，如
1. errors-only //只打印错误信息 2. errors-warnings // 错误和警告 3. verbose // 打印所有的信息 4. minimal // 只打印错误和新的编译 5. none // 不打印
如果想要更清晰，可以使用friendly-errors-webpack-plugin插件(作用不大)。
module.exports = {
// ...
plugins: [
new FriendlyErrorsWebpackPlugin(),
],
}13. 实现ES6等新API的兼容问题polyfill
一般会推荐使用babel-polyfill，用法
import ‘babel-polyfill‘;
但是该方法会增大打包文件的体积，而且对于不需要的浏览器也会打包。
为了解决这些问题，可以使用
<script src="https://polyfill.io/v3/polyfill.min.js/"></script>
该接口可以根据UserAgent返回需要的polyfills。如果是Chrome浏览器，将返回空内容，因为它不需要polyfills。
13. stats.json
npx webpack --profile --json > stats.json
通过名称生成stats.json文件，里面包含打包的所有信息。主要有几个属性：
1. chunks
代码块。生成代码的途径：
1. 入口文件会生成对应的chunk
output: {
filename: ‘[name].[contenthash].js‘ //hot：true下不能contenthash
}2. 动态导入模块会生成对应的chunk(import())
这类代码块的chunk命名规则如下 import(/* webpackChunkName: "example" */‘./example‘)
3. splitChunk会生成分割的代码chunk(代码块)
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
chunks: ‘initial‘, //必须有，默认是async（import()）；initial是同步,不设置该值不会生成代码块
name: ‘vendors‘, //设置代码块名称
test: /node_modules/, //指定要打包的模块
minSize: 50*1024, // 打包最小体积
priority: 1
},
commons: {
chunks: ‘initial‘,
name: ‘commons‘,
test: /src/,
minChunks: 2, // 至少被minChunks个module引用过
priority: 2
}
}
}
},2. modules
在webpack中一切皆模块。每个js,css,image等都是模块。
webpack本身只能识别js文件，对于任何非js文件都需要通过loader进行编译, 最终将其编译为js输出。
3. assets
最后打包生成的所有文件都是assets。
