Webpack：将 css 提取到自己的包中

Webpack: extract css to its own bundle

我正在一个项目中使用 webpack。我使用样式加载器，所以我可以 import”my.css”.

css 与 javascript 捆绑在一起，并在组件挂载时呈现在 <style> 标记中，ok。

但是，我想保留该导入语法并让 webpack 为每个入口点构建一个 css 包。

所以 webpack 的输出应该是 [name].bundle.js AND [name].bundle.css。
这是我能做到的吗？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

var config = {
entry: {
‘admin’: APP_DIR + ‘/admin.entry.jsx’,
‘public’: APP_DIR + ‘/public.entry.jsx’
},
output: {
path: BUILD_DIR,
filename: ‘[name].bundle.js’
},
resolve: {
extensions: [‘.js’, ‘.jsx’, ‘.json’]
},
plugins: [],
devtool: ‘cheap-source-map’,
module: {
loaders: [{
test: /(///index)?//.jsx?/,
include: APP_DIR,
loader: ‘babel-loader’
},
{
test: ///.scss$/,
loaders: [
‘style-loader’,
‘css-loader’,
‘sass-loader’,
{
loader: ‘sass-resources-loader’,
options: {
resources: [‘./src/styles/constants.scss’]
},
}
]
}
],
}
};

连同这个 babel.rc:

1
2
3
4

{
"presets" : ["es2015","react"],
"plugins": ["transform-decorators-legacy","babel-plugin-root-import"]
}

是的，您需要使用 extract-text-webpack-plugin。您可能只想在您的生产配置上执行此操作。配置如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

const ExtractTextPlugin = require(‘extract-text-webpack-plugin’);

module.exports = {
module: {
rules: [
{
test: ///.scss$/,
use: ExtractTextPlugin.extract({
fallback: ‘style-loader’,
//resolve-url-loader may be chained before sass-loader if necessary
use: [‘css-loader’, ‘sass-loader’]
})
}
]
},
plugins: [
new ExtractTextPlugin(‘style.css’)
//if you want to pass in options, you can do so:
//new ExtractTextPlugin({
// filename: ‘style.css’
//})
]
}

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/269241.html

Webpack：将 css 提取到自己的包中

Webpack: extract css to its own bundle

相关推荐

发表回复