Webpack:将 css 提取到自己的包中
Webpack: extract css to its own bundle
我正在一个项目中使用 webpack。我使用样式加载器,所以我可以
css 与 javascript 捆绑在一起,并在组件挂载时呈现在
但是,我想保留该导入语法并让 webpack 为每个入口点构建一个 css 包。
所以 webpack 的输出应该是
这是我能做到的吗?
|
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:
|
{
"presets" : ["es2015","react"], "plugins": ["transform-decorators-legacy","babel-plugin-root-import"] } |
相关讨论
- 这可能会对您有所帮助。
是的,您需要使用 extract-text-webpack-plugin。您可能只想在您的生产配置上执行此操作。配置如下所示:
|
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = { |
相关讨论
- 为什么我只想在 prod config 上使用它?