Webpack 2-文本提取后的冗余捆绑文件

下面是我的Webpack配置的一个公开要点，它本质上是从Angular CLI弹出的一个稍微修改过的Webpack配置：

此网页包版本正在生成styles.bundle.css和styles.bundle.js，但styles.bundle.js包含以下注释行：

// removed by extract-text-webpack-plugin

styles.bundle.js文件是完全冗余的，因为提取插件删除了它的所有内容，并按预期将其转储到styles.bundle.css中

如何避免加载styles.bundle.js，因为styles.bundle.css文件是从生成的index.html内的链接加载的。

在webpack.config.js中有以下两个实例：

styles.bundle.js中有一个样式入口点：

然后是一些生成splash.css和styles.bundle.css的规则

提取插件的两个实例已添加到插件对象：

plugins: [
    extractMainCSS,
    extractSplashCSS,

---

Webpack为每个入口点创建一个包。如果您不想创建一个bundle，那么必须在另一个入口点中包含CSS文件

extract text webpack plugin

无论如何都会删除所有CSS，但如果您仔细考虑，CSS应该是您使用它的包的一部分，在您的情况下，它可能是

main

您可以删除

style

条目，并将

.scss

文件添加到

main

条目：

main: [
    "./src/main.ts",
    "./src/styles/styles.scss",
    "./src/styles/vendor.scss"
]

要为样式（

styles.bundle.css

）获得相同的名称，还需要更改

extractMainCSS

const extractMainCSS = new ExtractTextPlugin('styles.bundle.css');

---

我最终做的是将样式包还原为一个普通的网页包包，这意味着没有.css文件

我更改了规则的加载程序部分：

loaders: ExtractTextPlugin.extract({
    use: [
        "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
        "postcss-loader",
        "sass-loader"
    ],
    /...
})

对下列事项：

loaders: [
        "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
        "postcss-loader",
        "sass-loader"
    ],
    /...
})

这里不需要提取文本。对我来说重要的是，我成功地获得了splash.css的提取，并最终使其内联正常工作

我仍然希望看到多个实例以及每个实例上设置为不同值的disabled属性会发生什么情况

const extractMainCSS = new ExtractTextPlugin('styles.bundle.css');

loaders: ExtractTextPlugin.extract({
    use: [
        "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
        "postcss-loader",
        "sass-loader"
    ],
    /...
})

loaders: [
        "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
        "postcss-loader",
        "sass-loader"
    ],
    /...
})