【问题标题】:How to remove css from js bundle?如何从 js 包中删除 css?
【发布时间】:2018-03-04 13:10:59
【问题描述】:

我想创建将 js 和 css 保存在同一个文件夹中的 React 组件(对于每个组件):

  • 对话框
    • Container.jsx
    • Presentation.jsx
    • styles.less

这是我的 webpack 配置的一部分:

module: {
    loaders: [
        {
            test: /\.(js|jsx)$/,
            loader: 'babel',
            exclude: /(node_modules)/,
            query: {
                presets: [
                    ['react'],
                    ['es2015'],
                    ['stage-0']
                ],
                plugins: [
                    ['transform-decorators-legacy'],
                    ['transform-runtime'],
                    ['transform-react-remove-prop-types'],
                    ['transform-react-constant-elements'],
                    ['transform-react-inline-elements']
                ]
            }
        },
        {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract(['css-loader', 'less-loader']),
        }
    ],
},
plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"production"'
    }),
    new webpack.ProvidePlugin({
        'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
    }),
    new webpack.optimize.UglifyJsPlugin({
        beautify: false,
        comments: false,
        sourceMap: true,
        compress: {
            sequences: true,
            booleans: true,
            loops: true,
            unused: true,
            warnings: false,
            drop_console: true,
            unsafe: true
        }
    }),
    new ExtractTextPlugin({
        filename: 'bundle.css',
        allChunks: true
    }),
    new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessor: require('cssnano'),
        cssProcessorOptions: {
            discardComments: {
                removeAll: true
            }
        },
        canPrint: true
    })
],

Webpack 创建 bundle.js + bundle.css 文件。我会说它按预期工作,除了片刻。我发现bundle.js 包含来自bundle.css 的css。

比如bundle.css的大小是50KB,那么bundle.js=自己的大小+50KB。

我的 js 包中不需要重复的 CSS 代码。那么如何解决呢?

【问题讨论】:

    标签: css reactjs webpack less extracttextwebpackplugin


    【解决方案1】:

    当我从 laravel-elixir-webpack-official 切换到本机 webpack (webpack-stream) 时已修复

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-04-06
      • 2010-12-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-07-06
      • 2021-10-26
      • 2012-02-22
      相关资源
      最近更新 更多