Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49410921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks
提问by Andrea Moraglia
I've the follow example configuration to use mini-css-extract-plugin with Webpack 4:
我有以下示例配置以将 mini-css-extract-plugin 与 Webpack 4 一起使用：
entry: {
a: ['./js/a.js', './scss/a.scss'],
b: ['./js/b.js', './scss/b.scss']
},
module: {
rules: [
[...],
{
test: /\.(css|sass|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')
],
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
js: {
test: /\.js$/,
name: "commons",
chunks: "all",
minChunks: 7,
},
css: {
test: /\.(css|sass|scss)$/,
name: "commons",
chunks: "all",
minChunks: 2,
}
}
}
},
plugins: [
new MiniCssExtractPlugin({
filename: "dist/[name].css",
}),
]
And the following sass files:
以及以下 sass 文件：
// a.scss
@import 'libA.scss';
@import 'libB.css';
[...]
// b.scss
@import 'libA.scss';
@import 'libB.css';
[...]
When I run webpack libB.cssis inserted in in commons.cssbundle while libA.scssnot.
当我运行 webpack 时，它libB.css被插入到commons.css包中，而libA.scss不是。
In general every import of .cssfile get processed by splitChunks option (only if extension cssis specified in the name) while sass import not.
通常，每个.css文件导入都由 splitChunks 选项处理（仅当css在名称中指定扩展名时），而 sass 导入则不然。
I have a project with multiple sass entry point and many @import of sass component and I'd like to create a common bundle with shared sass modules.
我有一个带有多个 sass 入口点和许多 sass 组件的 @import 的项目，我想创建一个具有共享 sass 模块的公共包。
回答by Jimi Pajala
im doing someting like this in my Webpack 4 configuration.
我在我的 Webpack 4 配置中做这样的事情。
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module: {
rules: [ {
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: true,
sourceMap: true,
importLoader: 2
}
},
"sass-loader"
]}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "style.css",
chunkFilename: "[name].css"
]
I also give "output.publicPath" -configuration object to point into my build dir, example ->
我还提供了“output.publicPath”-configuration 对象来指向我的构建目录，例如->
output: {
filename: "[name]-min.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/static/react/dist/"
},
editIf you are interested in code splitting, Webpack 4 can do this "out of the box" for you. This will split
.jsand as well.css-files for you in case you use dynamic imports.
编辑如果您对代码拆分感兴趣，Webpack 4 可以为您“开箱即用”。如果您使用动态导入，这将为您拆分
.js和 - 文件.css。
optimization: {
splitChunks: {
chunks: 'all'
}
}
If you other hand would like to merge only your .cssinto one file you could add as follow.
如果您只想将您的.css文件合并到一个文件中，您可以按如下方式添加。
optimization: {
splitChunks: {
chunks: 'all'
cacheGroups: {
styles: {
name: 'styles',
test: /\.s?css$/,
chunks: 'all',
minChunks: 1,
reuseExistingChunk: true,
enforce: true,
},
}
},
}
