MiniCssExtractPlugin 公共路径不起作用 [英] MiniCssExtractPlugin public path not working
问题描述
我正在使用 MiniCssExtractPlugin 在我的 React 应用程序中延迟加载 css 文件.
I am using MiniCssExtractPlugin to lazyload css files in my react application.
我已经为 MiniCssExtractPlugin 提供了 publicPath 选项,但它没有采用此选项值,而是采用 output.publicPath 选项.
i have given publicPath option for MiniCssExtractPlugin but it is not taking this option value, it is taking output.publicPath option.
config:
{
test: /\.(css)?$/,
use: [{
loader : MiniCssExtractPlugin.loader,
options : {
publicPath : '../'
}
},
'css-loader'
],
}
有什么帮助吗???
推荐答案
好像你的 不是唯一一个困惑,52 条评论关于如何做到这一点.html-webpack-plugin 中的publicPath 的问题类似并且有所帮助.然而,最大的帮助来自 npm run eject
来自 create-react-app 并检查 webpack.config.js
文件.
Seems as though your not the only one confused, 52 comments on how to get this right. The issue of publicPath in html-webpack-plugin was similar and helped. However, the biggest help was from npm run eject
ing out of the create-react-app and inspecting the webpack.config.js
files.
TL;DR:您需要在插件构造函数中指定保存路径.
TL;DR: You need to specify the save path in the plugin constructor.
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
filename: "assets/css/[name].css",
}),
您可能需要重新考虑模块输出逻辑.避免在 module.output.path
中指定嵌套路径,例如public/assets/js
,而是设置 root 目录:public
并为 filename
键设置嵌套:assets/js/[name].js
.
You might need to re-think the module output logic.
Avoid specifying a nested path in module.output.path
e.g. public/assets/js
, instead set the root directory: public
and set the nesting for the filename
key: assets/js/[name].js
.
然后您可以在主要的 module.output
中指定一个 publicPath
,用于 子域或 CDN 等
You can then specify a publicPath
in the main module.output
that you would use for subdomains or CDN's etc.
最终的完整配置对我有用:
The final complete config worked for me:
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,
}),
]
};
这篇关于MiniCssExtractPlugin 公共路径不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!