所以我有一个React应用程序,我在这里使用sass-loader导入css-modules。但是我也想包括一些不需要作为对象导入到每个组件中的css,并将其直接导入到我的index.ejs模板文件中。但是我似乎无法让MiniCssExtractPlugin加载程序正常工作。我没有任何构建错误,但也没有创建我需要的css文件。
我的webpack.config.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyEsPlugin = require('uglify-es-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OUTPUT_DIR = path.resolve(__dirname, 'dist');
const SOURCE_DIR = path.resolve(__dirname, 'src');
const TARGET = process.env.npm_lifecycle_event;
console.log(`Environment event is... ${TARGET}`); // eslint-disable-line no-console
console.log(`Current directory is... ${__dirname}`); // eslint-disable-line no-console
console.log(`Output directory is... ${OUTPUT_DIR}`); // eslint-disable-line no-console
console.log(`Source directory is... ${SOURCE_DIR}`); // eslint-disable-line no-console
const commonConfig = {
entry: `${SOURCE_DIR}/index.jsx`,
output: {
path: OUTPUT_DIR,
filename: 'bundle.js',
publicPath: '/',
},
resolve: {
extensions: ['.jsx', '.js'],
alias: {
components: path.resolve(__dirname, 'src/components'),
constants: path.resolve(__dirname, 'src/constants'),
data: path.resolve(__dirname, 'src/data'),
images: path.resolve(__dirname, 'src/images'),
services: path.resolve(__dirname, 'src/services'),
store: path.resolve(__dirname, 'src/store'),
styles: path.resolve(__dirname, 'src/styles'),
},
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
include: SOURCE_DIR,
loader: 'babel-loader',
},
{
test: /\.(png|jpg|jpeg)$/,
use: {
loader: 'url-loader',
options: {
limit: 25000,
},
},
},
{
test: /\.svg$/,
use: {
loader: 'file-loader',
options: {
name: '[hash].[ext]',
publicPath: '/',
limit: 8192,
},
},
},
{
test: /\.(s*)css$/,
use: [
'style-loader?sourceMap',
'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
'sass-loader',
'postcss-loader',
],
exclude: [
path.resolve(__dirname, 'styles/bootstrap/'),
],
},
{
test: /`.(s*)css$/,
use: [
MiniCssExtractPlugin.loader,
'style-loader?sourceMap',
'css-loader',
'sass-loader',
],
include: [
path.resolve(__dirname, 'styles/bootstrap/bootstrap.scss'),
],
},
],
},
plugins: [
new CopyWebpackPlugin([
{
from: 'src/robots.txt',
to: 'robots.txt',
},
]),
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
},
},
},
},
};
if (TARGET === 'local') {
module.exports = merge.smart(commonConfig, {
devServer: {
historyApiFallback: true,
port: 3000,
},
mode: 'development',
plugins: [
new webpack.DefinePlugin({
'process.env': {
...
},
}),
new HtmlWebpackPlugin({
template: `${SOURCE_DIR}/templates/index.ejs`,
templateParameters: {
...
},
}),
new HtmlWebpackPlugin({
template: `${SOURCE_DIR}/templates/index.ejs`,
templateParameters: {
...
},
}),
],
});
}