- 主题:关于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.*
试过了，还是不行。只能在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应该是可以自定义link标签的插入位置，可以是个字符串选择器也可以是自定义函数
默认是插入到head标签里。我放弃了，手工加link标签了。
【 在 shaolin (我的大小宝贝儿...) 的大作中提到: 】
: 中午说的是insert，中午一直公司web网打不开。
: 不过按说你把css文件import进去就行了啊。
--
FROM 27.189.92.*
我在stackoverflow上看到了这个解决方案，但是运行webpack后会在dist下生成一个新的html页面，而不是动态地在DOM中插入link标签。
【 在 cribaby (一笑置之) 的大作中提到: 】
: 得用html-webpack-plugin
--
FROM 27.189.92.*
嗯，我是初学者
那么webpack的官方文档写错了吗？
【 在 cribaby (一笑置之) 的大作中提到: 】
: 你应该是对webpack有很大的误解
: MiniCssExtractPlugin是在生产环境下推荐使用的
: 生产环境是没有动态插入html这种场景的，都是要利用hash做版本缓存的
: ...................
--
修改:CHNSTAR FROM 27.189.92.*
FROM 27.189.92.*
OK，Thanks
【 在 cribaby (一笑置之) 的大作中提到: 】
: 没写错啊
: mini-css-extract-plugin is more often used in production mode to get separate css files. For development mode (including webpack-dev-server) you can use style-loader, because it injects CSS into the DOM using multiple 。。。and works faster.
: 你要是本地环境就用webpack-dev-server 配合style-loader，生产环境用html-webpack-plugin，mini-css-extract-plugin。
: ...................
--
FROM 27.189.92.*