从 webpack 多个入口点获取一个 css 文件

Question

我的项目使用 webpack。我有两个入口点：第一个用于带有 CSS 模块的 CSS 文件，第二个用于全局 css 文件。Main.css 不是从项目中的任何文件导入的，所以我为它创建了一个特殊的入口点。

const extractStylesCss = new ExtractTextPlugin('styles.css');  

entry: {
    'main': ["./src/index.tsx"],
    'styles': "./src/main.css"
},
module: {
    loaders: [ 
        {
            test: /^.*\.css$/,
            exclude: [
                path.join(__dirname, 'src/main.css')
            ],

            loader: extractStylesCss.extract(
                "style",
                `css?modules&importLoaders=2&localIdentName=[local]___[hash:base64:5]___${pjson.version}!typed-css-modules!postcss?pack=pure&sourceMap=inline`
            )
        },
        {
            test: /main\.css$/,
            loader: extractStylesCss.extract('style', 'css!postcss?pack=pure&sourceMap=inline')
        },
    ]
},
plugins: [
    extractStylesCss
],
output: {
    path: path.join(__dirname, "/docs"),
    filename: "[name].js"
}

我只需要一个输出文件——styles.css。我知道 ExtractTextPlugin 为每个入口点生成一个包，但是否有可能获得一个文件？

Answer 1

您将它添加到条目中是正确的想法，不幸的是您创建了另一个包。entry对象的每个属性都会创建一个单独的包，这就是为什么style.js即使它只有 webpack 引导程序代码也会得到一个，并且extract-text-webpack-plugin如果您对两者使用相同的输出文件，它只会覆盖 CSS 文件。

您真正想要的是将 加入main.css到主包中（从概念上讲，它应该是主包的一部分，而不是单独的包）。这些条目还接受具有多个入口点的数组。使用以下内容entry，CSS 将自动组合：

entry: {
    main: ['./src/index.tsx', './src/main.css']
},