我是那个webpack的新手,并且有一些教程可以学习基础知识。
我想在开发过程中使用style-loader
注入样式表(启用HMR),并希望使用MiniCssExtractPlugin
进行生产构建。但是当我使用MiniCssExtractPlugin插件时,我放弃了样式加载器的注入功能。
请参阅我的webpack配置:
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
module.exports = {
entry: ['./src/index.js'],
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(sass|scss)$/,
use: [
"style-loader",
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development'
}
},
"css-loader",
"sass-loader"
]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
hot: true,
port: 3000
}
};
MiniCssExtractPlugin says实际上你不能这样做:
此插件应仅用于生成版本,而不在加载链中使用样式加载器,特别是如果您希望在开发中使用HMR。