似乎你
不是唯一一个困惑的人, 有52条评论说明如何正确操作。
html-webpack-plugin中的publicPath问题相似且有所帮助。然而,最大的帮助来自于通过
npm run eject
退出
create-react-app并检查
webpack.config.js
文件。
简而言之:您需要在插件构造函数中指定保存路径。
new MiniCssExtractPlugin({
filename: "assets/css/[name].css",
}),
你可能需要重新思考模块输出逻辑。
避免在
module.output.path
中指定嵌套路径,例如
public/assets/js
,而是设置
root目录:
public
并为
filename
键设置嵌套:
assets/js/[name].js
。
然后,您可以在主
module.output
中指定
publicPath
,用于
子域或CDN等。
最终的完整配置对我有用:
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({
filename: "assets/css/[name].css",
}),
new HtmlWebpackPlugin({
inject: true,
}),
]
};
assets/css/
更改资源 URL? - Sisir