首页 文章

如何使用Webpack单独存储资源

提问于
浏览 次
1

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

我希望它编译 sass 并将结果输出到某些 application.css .

webpack

2 回答

  • 2

    这通常使用extract-text-webpack-plugin来完成 . 它"pulls out"任何字符串并将其放入单独的文件中 . CSS只是webpack包中的JavaScript字符串 .

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

    回复于
  • 1

    这是一个完整的配置，它将解析您可能拥有的任何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'
        }]
    }

};
    回复于

相关问题