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 = { |
- 为什么我只想在 prod config 上使用它?
来源:https://www.codenong.com/47289978/