Javascript 网页包：不同类型的多个入口点（JS、HTML、LESS等）

我想使用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' },
    // ...
    ],
}

然而，我正在为

输出

规范而挣扎。JS文件可以打包，但我希望HTML文件也以HTML结束。符合标准

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

但情况并非如此，因为

.js

是硬编码的

---

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

您不想将HTML文件包含在webpack包中，这些文件将独立存在

至于绑定LESS/CSS，我建议将CSS和LESS加载程序与。这可以用来自动绑定在JavaScript模块中导入的较少的/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中，需要更少的文件：

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

---

您的所有样式都将绑定到

/build/styles.css

谢谢您的提示！

ExtractTextPlugin

也可以为不同的无输入文件输出不同的CSS文件吗？如果您将

style.CSS

替换为

[name].CSS

：

新的ExtractTextPlugin（'[name].CSS'）

，我会用这个更新我的答案