2

这是我的 Webpack 配置的公开要点，它本质上是从 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中的链接加载的。

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

2 回答 2

3

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');
于 2017-04-12T17:52:10.640 回答
0

我最终做的是将样式包恢复为自己的普通 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 属性设置为不同的值。

于 2017-04-13T07:48:10.250 回答