javascript – Webpack：不同类型的多个入口点(JS,HTML,LESS,…)

2019年7月27日 233次阅读

我想使用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,我建议使用带有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.

点赞