Question

我希望用Webpack替换Grunt和Gulp。我喜欢它如何转化所有内容，但我无法弄清楚如何将css与bundle.js分开？它只是把所有东西压在一起。

我想要它编译sass并将结果输出到某些application.css。

Answer 1

通常使用extract-text-webpack-plugin来完成。它“拉出”任何字符串并将其放入单独的文件中。 CSS只是webpack包中的JavaScript字符串。

请注意，您将失去SourceMaps支持和HotCodeReplacement，因为目前尚未解决问题。

Answer 2

这是一个完整的配置，可以解析任何scss需要你可能拥有并将它们放在自己的css包中。它还会转换jsx和url对图像进行编码。神奇的是在提取文本加载器'css!sass'之前运行的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'
        }]
    }

};

如何使用Webpack单独存储资源

2 个答案: