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

你不想在 webpack 包中包含你的 HTML 文件，它们会自己存在。

至于捆绑 LESS/CSS，我建议使用带有 extract text webpack plugin 的 CSS 和 LESS 加载器。这可用于自动捆绑您在 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。