webpack不同环境下使用CSS分离插件mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.(scss|css)$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
// ...
]
},
plugins: [
// ...
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
// ...
]
// ...
};
这段代码根据环境变量NODE_ENV
的值来决定是使用style-loader
还是MiniCssExtractPlugin.loader
。如果NODE_ENV
不是production
,意即开发环境,通常会使用style-loader
将样式以<style>
标签的形式直接注入到页面,便于开发调试。如果是生产环境,则使用MiniCssExtractPlugin.loader
将样式提取为独立的.css
文件。同时,在plugins
数组中加入了MiniCssExtractPlugin
实例,用于生产环境下的CSS文件提取。
评论已关闭