Webpack 2 - 文本提取后的冗余包文件答案

【问题标题】：Webpack 2 - redundant bundle file after text extractWebpack 2 - 文本提取后的冗余包文件
【发布时间】：2017-09-08 11:08:51
【问题描述】：

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

https://gist.github.com/sparkbuzz/3cd017671751083e2af8c10a1ad37747

此 Webpack 构建正在生成 styles.bundle.css AND 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 中有两个 extract-text-webpack-plugin 实例：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractMainCSS = new ExtractTextPlugin('[name].bundle.css');
const extractSplashCSS = new ExtractTextPlugin('splash.css');

样式有一个入口点，这就是拥有 styles.bundle.js 的原因：

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

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

{
    include: [
        path.join(process.cwd(), "src/styles/splash.scss")
    ],
    exclude: [
        path.join(process.cwd(), "src/styles/styles.scss"),
        path.join(process.cwd(), "src/styles/vendor.scss")
    ],
    test: /.scss$/,
    loaders: extractSplashCSS.extract({
        use: [
            'css-loader',
            'postcss-loader',
            'sass-loader'
        ]
    })
},
{
    exclude: [
        path.join(process.cwd(), "src/styles/styles.scss"),
        path.join(process.cwd(), "src/styles/vendor.scss"),
        path.join(process.cwd(), "src/styles/splash.scss")
    ],
    test: /\.scss$/,
    loaders: [
        "exports-loader?module.exports.toString()",
        "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
        "postcss-loader",
        "sass-loader"
    ]
},
{
    exclude: [
        path.join(process.cwd(), "src/styles/splash.scss"),
    ],
    include: [
        path.join(process.cwd(), "src/styles/styles.scss"),
        path.join(process.cwd(), "src/styles/vendor.scss")
    ],
    test: /\.scss$/,
    loaders: extractMainCSS.extract({
        use: [
            "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
            "postcss-loader",
            "sass-loader"
        ]
    })
},

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

plugins: [
    extractMainCSS,
    extractSplashCSS,

【问题讨论】：

标签： webpack webpack-2 extract-text-plugin

【解决方案1】：

我最终做的是将样式包还原为自己的普通 Webpack 包，这意味着没有 .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 属性设置为不同的值。

【讨论】：

【解决方案2】：

Webpack 为每个入口点创建一个包。如果您不想创建包，则必须将 CSS 文件包含在另一个入口点中。 extract-text-webpack-plugin 无论如何都会删除所有 CSS，但如果您考虑一下，CSS 应该是您使用它的捆绑包的一部分，在您的情况下可能是 main。

您可以删除styles 条目并将.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');

【讨论】：