Question

在我的webpack配置中使用style-loader和css-loader，下面是我webpack.config.js的摘录

var wpconfig = {
    devtool: "source-map",
    entry : [
        './src/client/index.js'
    ]
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/assets/'
    },
    module:{
        loaders:[
            { test: /\.(jpg|gif)$/, loader: 'url-loader?limit=10000'},
            { test: /\.css$/, loader: 'style-loader!css-loader'   }

        ]
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

module.exports = wpconfig ;

当禁用JS时，我可以看到样式没有写入文档的<head>，因此页面呈现为纯文本。

我四处听说extract-text-webpack-plugin，稍微更改配置就可以将* .css文件捆绑到单个app.css并有效地加载它。

问题：

我是否正确地认为样式加载器或css-loader在禁用JS时无法将样式块写入头部？
使用extract-text-webpack-plugin是否适用于此方案？
在这种情况下还有其他方法可以加载CSS吗？

P.S：刚开始使用webpack，所以如果webpack.config.js出现任何明显问题，请点击。

Answer 1

使用ExtractTextPlugin进行生产确实是一种有效的解决方案，因此如果您不需要任何分块，那么它就可以了。还可以最大限度地缩小CSS。

我个人使用ExtractText进行生产，并在开发中使用原始样式加载器。

当javascript被禁用时使用加载程序为css - webpack

1 个答案: