Как хранить активы отдельно с помощью Webpack

Question

Я ищу, чтобы заменить Grunt и Gulp на Webpack. Мне нравится, как это преобразует все, но я не могу понять, как сохранить css от bundle.js? Он просто сжимает все вместе.

Что я хочу, чтобы он составил sass и вывел результаты на некоторые application.css.

Answer 1

Обычно это делается с помощью extract-text-webpack-plugin. Он «вытаскивает» любую строку и помещает ее в отдельный файл. И CSS - это всего лишь строка JavaScript в пакете webpack.

Обратите внимание, что вы потеряете поддержку SourceMaps и HotCodeReplacement, так как в настоящее время не решены проблемы.

Answer 2

Вот полная конфигурация, которая будет анализировать любые запросы scss, которые могут возникнуть у вас, и поместить их в свой собственный комплект css. Он также транслирует jsx и url кодирует изображения. Магия находится в загрузчике sass, который запускается перед загрузчиком текстового экстракт 'css!sass' Если вы не используете sass, просто измените его на css, чтобы использовать загрузчик css. например.

//your entry file.js 
var stylesheet = require('../scss/yourstyle'); 
... 

//webpack.config.js 
//main webpack config 
var webpack = require('webpack'); 
var path = require('path'); 
var fs = require('fs'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    name: 'browser', 
    target: 'web', 
    entry: { 
     main: './app/yourapp' 
    }, 
    context: __dirname, 
    devtool: 'cheap-module-eval-source-map', 
    resolve: { 
     root: path.join(__dirname), 
     modulesDirectories: ['app', 'images', 'node_modules'], 
     extensions: ['', '.json', '.js', '.jsx', '.scss', '.png', '.jpg', '.jpeg', 'gif'] 
    }, 
    node: { 
     __dirname: true, 
     fs: 'empty', 
     tls: 'empty', 
     net: 'empty', 
     console: true 
    }, 
    output: { 
     path: 'public/dist', 
     publicPath: '/dist/', 
     filename: '[name].bundle.[hash].js', 
     chunkFilename: '[id].chunk.[chunkhash].js' 
    }, 
    plugins: [ 
     new ExtractTextPlugin('style.[name].[chunkhash].css', { 
      disable: false, 
      allChunks: true // extract all css from async chunks as well 
     }), 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.OccurrenceOrderPlugin(), 
     new webpack.optimize.CommonsChunkPlugin({ 
      children: true, // extract common js from children 
      async: true, // and aysnc chunks 
      minChunks: 3 // where there are 3 or more and put commons into main.js 
     }) 
    ], 
    module: { 
     loaders: [{ 
      test: /\.scss$/, 
      loader: ExtractTextPlugin.extract('style-loader', 'css!sass') 
     }, { 
      test: /\.(jpe?g|png|gif|svg)$/i, 
      loader: 'url?limit=100000&hash=sha512&digest=hex&name=[hash].[ext]' 
     }, { 
      include: /\.json$/, 
      loader: 'json' 
     }, { 
      include: /\.jsx$/, 
      loader: 'babel' 
     }] 
    } 

};