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

Question

这是我的 Webpack 配置的 public 要点，它本质上是从 Angular CLI 中弹出的略微修改的 Webpack 配置：

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

此 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.

中的 link 加载

在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,

Answer 1

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');

Answer 2

我最后做的是将样式包还原为一个普通的 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 的内联工作正常

我仍然想看看多个实例和禁用属性设置为每个不同值时会发生什么。

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

Webpack 2 - redundant bundle file after text extract

webpack

webpack-2

extract-text-plugin