Как исключить css код из js bundle?

325
27 сентября 2017, 10:05

Мне нужно создать набор React компонентов. Каждый компонент содержит свой js и css код, расположенный в отдельной папке. Например:

  • Dialog
    • Container.jsx
    • Presentation.jsx
    • styles.less

На выходе необходимо собрать два отдельных файла: js и css bundles. Вот часть моего 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 содержит в себе css код из bundle.css.

К примеру, если размер файла bundle.css = 50KB, то размер bundle.js = собственный размер + 50KB.

Мне нужно исключить дублирующийся ненужный css из js bundle.

Если подключить плагин babel-plugin-transform-require-ignore и настроить его на игнорирование css/less, то extract-text-webpack-plugin перестаёт создавать bundle.css.

Answer 1

Ошибка исчезла с переходом от laravel-elixir-webpack-official к нативному webpack (webpack-stream)

READ ALSO
Вставка новых значений в столбец в зависимости от значений другого столбца

Вставка новых значений в столбец в зависимости от значений другого столбца

Всем здравствуйте! Есть таблица, в которой описаны адреса городаНедавно было переименование улиц

438
Массив вместо значения SQL

Массив вместо значения SQL

есть запрос к БД

321
Как эффективней писать ПО

Как эффективней писать ПО

Пишу средний проект на javaСроки довольно сжатые

265