- 主题:关于webpack的MiniCssExtractPlugin的问题
我按照文档配置了MiniCssExtractPlugin，如下所示：
const path=require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={
entry:"./main.js",
output:{
filename:"bundle.js",
path:path.resolve(__dirname,"./dist")
},
plugins:[
new MiniCssExtractPlugin()
],
module:{
rules:[
{
test:/\.css$/i,
use:[MiniCssExtractPlugin.loader,"css-loader"]
}
]
}
};
执行打包后，只是在dist目录下生成了一个main.css文件，而在运行时并没有动态在<head>中插入<link>标签。
我的MiniCssExtractPlugin插件的版本是1.2.0，Webpack的版本是5.2.0。
--
FROM 27.189.92.*
多看看，有个参数是配置link标签之类的，那部分。
【 在 CHNSTAR (北北) 的大作中提到: 】
: ......我就是照着这个配的啊
--
FROM 123.127.43.*
试过了，还是不行。只能在dist下生成css文件，不能在运行时动态插入link标签。
而且官方文档说不需要设置任何参数，这个是默认行为。
不知为啥，我这就是不行。
const path=require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={
mode:"development",
entry:"./main.js",
output:{
filename:"bundle.js",
path:path.resolve(__dirname,"./dist")
},
plugins:[
new MiniCssExtractPlugin({
filename:"bundle.css",
chunkFilename:"bundle[id].css",
linkType:"text/css"
})
],
module:{
rules:[
{
test:/\.css$/i,
use:[MiniCssExtractPlugin.loader,"css-loader"]
}
]
}
};
【 在 shaolin (我的大小宝贝儿...) 的大作中提到: 】
: 多看看，有个参数是配置link标签之类的，那部分。
--
FROM 27.189.92.*
中午说的是insert，中午一直公司web网打不开。
不过按说你把css文件import进去就行了啊。
【 在 CHNSTAR (北北) 的大作中提到: 】
: 试过了，还是不行。只能在dist下生成css文件，不能在运行时动态插入link标签。
: 而且官方文档说不需要设置任何参数，这个是默认行为。
: 不知为啥，我这就是不行。
: ...................
--
FROM 123.127.43.*
insert应该是可以自定义link标签的插入位置，可以是个字符串选择器也可以是自定义函数
默认是插入到head标签里。我放弃了，手工加link标签了。
【 在 shaolin (我的大小宝贝儿...) 的大作中提到: 】
: 中午说的是insert，中午一直公司web网打不开。
: 不过按说你把css文件import进去就行了啊。
--
FROM 27.189.92.*
得用html-webpack-plugin
--
FROM 124.126.163.*
我在stackoverflow上看到了这个解决方案，但是运行webpack后会在dist下生成一个新的html页面，而不是动态地在DOM中插入link标签。
【 在 cribaby (一笑置之) 的大作中提到: 】
: 得用html-webpack-plugin
--
FROM 27.189.92.*
你应该是对webpack有很大的误解
MiniCssExtractPlugin是在生产环境下推荐使用的
生产环境是没有动态插入html这种场景的，都是要利用hash做版本缓存的
insert功能只有css拆分进行异步加载时才用到，那是另外一个事
【 在 CHNSTAR 的大作中提到: 】
: 我在stackoverflow上看到了这个解决方案，但是运行webpack后会在dist下生成一个新的html页面，而不是动态地在DOM中插入link标签。
:
--
FROM 124.126.163.*