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文件？

Answer 1

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

至于捆绑 LESS/CSS，我建议使用 CSS 和 LESS 加载器以及extract text 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.