在 Webpack 中，如何使用单个条目 main.js（在文件中有多个 css 文件）获得多个输出？

Question

我的目录结构应该是这样的。

|-src/
|   |-styles/ (less)
|   |   |-xx.less(input inside main.js)
|   |   |-yy.less(input inside main.js)
|   |   |-zz.less(input inside main.js)
|
|-dist/  
    |-assets/
    |   |-xx.css(output should be like this)
    |   |-yy.css(output should be like this)
    |   |-zz.css(output should be like this)

我的 main.js 文件包含，

require('./styles/xx.less');
require('./styles/yy.less');
require('./styles/zz.less');

我的切入点是

entry: {
    app: './main.js'
  },

1。如何获得块输出（xx.css，yy.css，zz.css）？ 2. 在那里尝试了 extractTextPlugin 我能够以 app.css 的名称获得输出，但不是我想要的。 我可以尝试使用哪个插件提取与 main.js 文件中相同名称和输入数量的输出？

Answer 1

您可以将您的 css 要求分离到文件和它们的入口点中。 例如：

xx.less.js

require('./styles/xx.less');

在 webpack 条目中：

app: [path.join(__dirname, 'path/to/xx.less.js')]

并使用节点脚本或其他东西多次调用webpack

更详细的答案：

webpack 配置中的每个条目都代表将要创建的捆绑文件，起点 js 文件的入口点，每个 css 文件都将根据该 js 文件中 css 的引用创建。

因此，如果您想要多个 css 文件，您需要在 webpack 配置中添加多个条目，并且条目中的每个 js 都需要较少的文件，这样您将获得 3 个 js 文件和 3 个 css 文件，因此您的配置应该看起来像这个：

{
        entry: {
            xx: [ path.resolve(__dirname, 'path/to/js/xx.js')],
            yy: [ path.resolve(__dirname, 'path/to/js/yy.js')],
            zz: [ path.resolve(__dirname, 'path/to/js/zz.js')]
        },

        output: {
            path: path.resolve(__dirname, 'dist/assets'),
            filename: '[name].js' //the placeholder name will be replace by the entry name (xx,yy,zz)
        }

        ...

        plugins: [
            new ExtractTextPlugin({
                filename: '[name].css' //this is the name of the css according to the entry in the js file
            })
}

你的less加载器应该保持不变，只指向所有less文件所在的src/styles，在你的javascript文件（xx.js，yy.js，zz.js）中，你应该需要相应的less文件

在 xx.js 中你调用 xx.less:require('./styles/xx.less');

在 yy.js 中你调用 yy.less：require('./styles/yy.less');

在 zz.js 中调用 zz.less：require('./styles/zz.less');

当你运行 webpack 时，他会生成 3 个 css 文件（和 3 个 js 文件......）