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

Question

我的项目使用 webpack。我有 2 个入口点：第一个入口点用于 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 bootstrap 代码和 extract-text-webpack-plugin 如果您对两者使用相同的输出文件，则只会覆盖 CSS 文件。

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

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

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

Get one css file from webpack multiple entry points

webpack

extract-text-plugin