Webpack 是一个现代化的前端打包工具，它可以将多个 JavaScript 文件、CSS 文件、图片等资源打包成一个或多个 bundle，以提高页面的加载速度和性能。在使用 Webpack 过程中，有一些小技巧可以帮助我们更好地使用它，本文将介绍一些常用的 Webpack 小技巧。
1. 使用 webpack-merge
在实际项目中，我们通常需要根据不同的环境来配置 Webpack，比如开发环境和生产环境的配置是不同的。为了避免重复编写相同的配置代码，我们可以使用 webpack-merge 这个工具来合并不同环境的配置。
首先，我们需要将公共配置提取出来，放到一个单独的文件中，比如 webpack.common.js：
// www.javascriptcn.com code example
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};然后，我们可以分别编写开发环境和生产环境的配置文件，并使用 webpack-merge 工具来合并公共配置和特定环境的配置。比如，我们可以编写一个 webpack.dev.js 文件：
// www.javascriptcn.com code example
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common');
module.exports = merge(commonConfig, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
}
});以及一个 webpack.prod.js 文件：
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common');
module.exports = merge(commonConfig, {
mode: 'production',
devtool: 'source-map'
});这样，我们就可以在不同的环境中使用不同的 Webpack 配置了。
2. 使用 webpack-bundle-analyzer
当我们的项目变得越来越复杂时，我们可能会遇到打包后文件体积过大的问题。为了找出哪些模块导致了体积过大的问题，我们可以使用 webpack-bundle-analyzer 这个工具来分析打包后的文件。
首先，我们需要安装 webpack-bundle-analyzer：
npm install --save-dev webpack-bundle-analyzer
然后，在 Webpack 配置文件中加入以下代码：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
// ...
plugins: [
new BundleAnalyzerPlugin()
]
};这样，我们就可以在 Webpack 打包完成后，通过浏览器访问 http://localhost:8888 来查看打包文件的体积分布情况了。
3. 使用 DllPlugin 和 DllReferencePlugin
在开发过程中，我们通常会使用一些第三方库，比如 React、Vue、lodash 等。由于这些库的代码通常不会经常变动，我们可以使用 DllPlugin 和 DllReferencePlugin 这两个插件来提高打包速度。
首先，我们需要将这些第三方库打包成一个或多个 dll 文件。我们可以使用一个单独的 Webpack 配置文件来打包这些库，比如 webpack.dll.js：
// www.javascriptcn.com code example
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'production',
entry: {
react: ['react', 'react-dom'],
vue: ['vue', 'vue-router']
},
output: {
filename: '[name].dll.js',
path: path.resolve(__dirname, 'dll'),
library: '[name]'
},
plugins: [
new webpack.DllPlugin({
name: '[name]',
path: path.resolve(__dirname, 'dll/[name].manifest.json')
})
]
};然后，在我们的项目中，我们可以使用 DllReferencePlugin 来引用这些 dll 文件。比如，我们可以在 Webpack 配置文件中加入以下代码：
// www.javascriptcn.com code example
const path = require('path');
const webpack = require('webpack');
module.exports = {
// ...
plugins: [
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, 'dll/react.manifest.json')
}),
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, 'dll/vue.manifest.json')
})
]
};这样，当我们打包项目时，Webpack 就会先检查 dll 文件是否存在，如果存在，则直接使用 dll 文件中的代码，避免重复打包第三方库的代码，从而提高打包速度。
4. 使用 MiniCssExtractPlugin
在 Webpack 中，我们可以使用 css-loader 和 style-loader 来加载和解析 CSS 文件，但是这种方式会将 CSS 文件以内联的方式打包到 JavaScript 文件中，会导致 JavaScript 文件变得很大。
为了避免这个问题，我们可以使用 MiniCssExtractPlugin 这个插件来将 CSS 文件单独打包成一个文件。比如，我们可以在 Webpack 配置文件中加入以下代码：
// www.javascriptcn.com code example
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
})
]
};这样，我们就可以将 CSS 文件单独打包成一个文件，从而避免 JavaScript 文件变得过大。
结语
本文介绍了一些常用的 Webpack 小技巧，包括使用 webpack-merge 来合并不同环境的配置、使用 webpack-bundle-analyzer 来分析打包后的文件体积、使用 DllPlugin 和 DllReferencePlugin 来提高打包速度、以及使用 MiniCssExtractPlugin 来将 CSS 文件单独打包成一个文件。希望这些小技巧能够帮助你更好地使用 Webpack。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d8eea5a941bf7134050cab