Webpack：不同类型（JS、HTML、LESS等）的多个入口点

Question

我想使用webpack打包Chrome扩展程序。为此，我需要组合一堆JS文件，

• background.js,
• popup.js,
• content.js,

以及几个HTML和CSS文件，

• popup.html,
• popup.css,
• content.css.

我认为我需要使用多个入口文件，即，

module.exports = {
  entry: {
    background: './src/scripts/background.js',
    content: './src/scripts/content.js',
    popup: './src/scripts/popup.js',
    html: './src/popup.html',
    ccss: './src/styles/content.less',
    pcss: './src/styles/popup.less',
  },
  // ...
}

使用指定的加载器，例如：

module: {
  loaders: [
    { test: /\.html$/, loader: 'file-loader' },
    { test: /\.less$/, loader: 'style!css!less' },
    // ...
    ],
}

然而，我在output规范方面遇到了困难。JS文件可以正常打包，但我希望HTML文件也能以HTML格式结束。使用标准工具时，

output: {
  path: './build/',
  filename: '[name].js',
},

由于.js是硬编码的，所以这种情况不会发生。

是否有办法将JS、HTML和CSS入口点分别输出为JS、HTML和CSS文件？

- Nico Schlömer

Answer 1

你不想将HTML文件包含在Webpack捆绑包中，它们将独立存在。

至于打包LESS/CSS，我建议使用CSS和LESS加载器与提取文本webpack插件。这可以用于自动捆绑你在JavaScript模块中导入的LESS/CSS模块，然后将该CSS捆绑包输出到您选择的位置。

因此，你的webpack.config将如下所示：

var ExtractTextPlugin = require('extract-text-webpack-plugin');    

module.exports = {
  entry: {
    background: './src/scripts/background.js',
    content: './src/scripts/content.js',
    popup: './src/scripts/popup.js'
  },
  output: {
    path: './build/',
    filename: '[name].js',
  },
  loaders: [
    { test: /\.less$/, loader: 'style!css!less' },
    // ...
  ],
  plugins: [
    new ExtractTextPlugin('[name].css')
  ]
}

然后在您的入口JS中，需要您的LESS文件：

require('./path/to/style.less');

您的所有样式将被捆绑到./build/styles.css中。

- Jim Skerritt

---

谢谢你的提示！ExtractTextPlugin是否也可以为不同的输入Less文件生成不同的CSS文件？ - Nico Schlömer

如果你用new ExtractTextPlugin('[name].css')替换style.css，插件将为每个JS文件条目提供一个CSS捆绑包。我会在我的回答中更新这个。 - Jim Skerritt