前言
webpack 4.0以前，我们通过extract-text-webpack-plugin插件，把css样式从js文件中提取到单独的css文件中。extract-text-webpack-plugin插件的优缺点：
image.png
更多介绍请看移步：https://webpack.docschina.org/plugins/extract-text-webpack-plugin/
webpack 4.0以后，官方推荐使用extract-text-webpack-plugin插件来打包css文件。
使用方法
把所有配置文件放到项目的根目录下，运行package.json中的命令即可。当然，webpack的入口、出口等基础配置还需自行参照官网文档完成配置。
为了更贴近实际应用场景，本次采用三个配置文件，分别讲解它们的配置以及注意事项。
webpack.common.js (公共配置文件)
- 开发环境和生产环境共用的配置，借助
webpack-merge插件，可以merge到开发或生产环境，从而减少重复配置。 - 引入了Node环境变量
process.env.NODE_ENV，可以根据传入的环境参数，动态更改配置，具体请看代码。
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/, // 可以打包后缀为sass/scss/css的文件
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// 这里可以指定一个 publicPath
// 默认使用 webpackOptions.output中的publicPath
// publicPath的配置，和plugins中设置的filename和chunkFilename的名字有关
// 如果打包后，background属性中的图片显示不出来，请检查publicPath的配置是否有误
publicPath: './',
// publicPath: devMode ? './' : '../', // 根据不同环境指定不同的publicPath
hmr: devMode, // 仅dev环境启用HMR功能
},
},
'css-loader',
'sass-loader'
],
},
]
},
plugins: [
new MiniCssExtractPlugin({
// 这里的配置和webpackOptions.output中的配置相似
// 即可以通过在名字前加路径，来决定打包后的文件存在的路径
filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
})
]
}
webpack.dev.js（dev环境的配置文件）
- dev环境的配置，记得把
mode设置为development模式，否则webpack4会默认为production模式。
const merge = require('webpack-merge')
const common = require('./webpack.common')
const webpack = require('webpack')
module.exports = merge(common, {
mode: 'development'
})
webpack.prod.js（生产环境的配置文件）
- 生产环境的配置，默认开启tree-shaking和js代码压缩；
- 通过
optimize-css-assets-webpack-plugin插件可以对css进行压缩，与此同时，必须指定js压缩插件（例子中使用terser-webpack-plugin插件），否则webpack不再对js文件进行压缩； - 设置
optimization.splitChunks.cacheGroups，可以将css代码块提取到单独的文件中。
const path = require('path')
const merge = require('webpack-merge')
const common = require('./webpack.common')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
},
}
},
}
})
package.json配置文件
-
sideEffects： 生产环境打包的时候，会默认开启tree-shaking，如果不设置
sideEffects，某些通过import方式引入的css文件可能不会被打包，因为tree-shaking会甩掉引入后未使用的代码。通常，css文件一般都是引入就好，很少使用里面的方法或变量，所以很容易被webpack认为是没有用的代码，从而不会被打包。所以，不希望被tree-shaking的文件，请在sideEffects中配置与之匹配的正则表达式。 -
NODE_ENV： 由于项目中用到了Node的环境变量，所以打包时需通过
NODE_ENV传入环境变量。这里的配置在macOS操作是没有问题的，Windows系统的小伙伴，可以安装一个叫cross-env的npm包，使用方法略。
{
"sideEffects": [
"*.css",
"*.scss",
"*.sass"
],
"scripts": {
"build": "NODE_ENV=production webpack --config webpack.prod.js --progress", // 生产环境打包
"dev": "NODE_ENV=development webpack --config webpack.dev.js --progress", // dev环境打包
},
}
总结
- 不同环境下的打包，如果出现图片显示不了时（特别是css中的图片），请检查
publicPath的配置。 -
mode: 'production'会开启tree-shaking和js代码压缩，但配置optimization. minimizer会使默认的压缩功能失效。所以，指定css压缩插件的同时，务必指定js的压缩插件。 -
mini-css-extract-plugin插件，结合optimization.splitChunks.cacheGroups配置，可以把css代码打包到单独的css文件，且可以设置存放路径（通过设置插件的filename和chunkFilename）。
官方文档: https://webpack.js.org/plugins/mini-css-extract-plugin/
如有错误，欢迎在评论区指正或私聊我，谢谢！
