好像你的不是唯一一个感到困惑的人 https://github.com/webpack-contrib/mini-css-extract-plugin/issues/44#issuecomment-379059788, 52 条评论关于如何做到这一点。的问题html-webpack-plugin 中的 publicPath https://github.com/jantimon/html-webpack-plugin/issues/234是相似的并且有帮助。然而,最大的帮助来自于npm run eject
ing 出创建反应应用程序 https://github.com/facebook/create-react-app并检查webpack.config.js
files.
TL;DR:您需要在插件构造函数中指定保存路径。
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
filename: "assets/css/[name].css",
}),
您可能需要重新考虑模块输出逻辑。
避免在中指定嵌套路径module.output.path
e.g. public/assets/js
,而是设置root目录:public
并设置嵌套filename
key: assets/js/[name].js
.
然后您可以指定一个publicPath
主要在module.output
你会用的子域或 CDN https://github.com/webpack/docs/wiki/configuration#outputpublicpath etc.
最终的完整配置对我有用:
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const publicPath = '/';
module.exports = {
entry: './_src/_js/index.js',
output: {
filename: 'assets/js/[name].js',
path: path.resolve(__dirname, 'dist'),
publicPath: publicPath,
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'assets/images/[name].[ext]',
},
},
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader','eslint-loader']
},
],
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "assets/css/[name].css",
}),
new HtmlWebpackPlugin({
inject: true,
}),
]
};