webpack提取css出现了一点问题？
本文介绍了webpack提取css出现了一点问题？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
为什么extractLib提取的css正确地提取到了独立的css文件，但是extractStyle提取的css并没有提取到独立的css文件，而是被以<style></style>的方式放在了<head></head>头部里面？
webpack版本：
"webpack": "^3.2.0",webpack配置：
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// 创建多个实例
const extractLib = new ExtractTextPlugin({
filename: "css/[name]-lib.css",
});
const extractStyle = new ExtractTextPlugin({
filename: "css/[name]-style.css",
});
module.exports = {
output: {
path: path.join(__dirname, "dist"),
filename: "js/[name].js",
},
resolve: {
extensions: [".js", ".jsx"],
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
include: __dirname,
},
{
test: /\.css$/,
include: /node_modules/,
use: extractLib.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
},
],
}),
},
{
test: /\.less$/,
exclude: /node_modules/,
use: extractStyle.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]__[local]___[hash:base64:5]",
},
},
{
loader: "postcss-loader",
},
{
loader: "less-loader",
},
],
}),
},
],
},
plugins: [
extractLib,
extractStyle,
],
};
解决方案
.css那个loader里你include了/node_modules/？看代码应该没问题，我本地试了一下可以正常导出到两个文件中，你检查一下插件版本是不是适合webpack3
我这边的版本是
"extract-text-webpack-plugin": "^2.1.0",
"webpack": "^2.5.1",
========= 补充回答 @楼主 ============
楼主你这边实现多css文件导出的方法和链接里的不一样，你这边是多个插件实例，链接里是多个entry
allchunks这个属性必须要配合CommonsChunkPlugin这个插件使用，
它的作用是，对于多entry里的css文件，如下图，每个入口里的css文件代码大多相同，这部分代码标记为a，只有部分不相同分别标记为b,c,d，
那么其值为true，会输出4个文件，包含代码分别为a,b,c,d
如果其值为false，则会输出3个文件，包含代码分别为ab,ac,ad
如果不配合CommonsChunkPlugin，值为true也是没效果的
配合CommonsChunkPlugin，提取公共部分代码
这篇关于webpack提取css出现了一点问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
