我是 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 …Run Code Online (Sandbox Code Playgroud)