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
            })
}

你的较少的加载器应该保持不变，只需指向所有较少文件的src / styles，并且在你的javascript文件（xx.js，yy.js，zz.js）中你应该需要相应的较少文件< / p> 在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文件......）

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

1 个答案: