在禁用 javascript 时使用 loader 进行 css - webpack答案

【问题标题】：using loader for css when javascript is disabled - webpack在禁用 javascript 时使用 loader 进行 css - webpack
【发布时间】：2016-09-13 11:34:50
【问题描述】：

在我的 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 并有效地加载它。

问题：

我是否可以假设在禁用 JS 时 style-loader 或 css-loader 无法将样式块写入 head？
对于这种情况，使用 extract-text-webpack-plugin 是一个有效的解决方案吗？
在这种情况下，还有其他加载 CSS 的方法吗？

P.S : 刚刚从 webpack 开始，所以如果 webpack.config.js 中有任何明显的问题，请指出。

【问题讨论】：

标签： webpack webpack-style-loader

【解决方案1】：

使用 ExtractTextPlugin 进行生产确实是一个有效的解决方案，所以如果您不需要任何分块，那么它就可以了。还可以实现 CSS 的最佳缩小。

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

【讨论】：

谢谢。但是第一个比特呢？为什么禁用js时样式加载器不起作用？。
您的假设是正确的，style-loader 使用 js 来注入样式标签 - 他们怎么会到达那里？ ;)
是的。只需要确认一下:)
我也想知道禁用 JS 时会发生什么。这回答了我的问题。