Question

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

addButtonTapped(sender: AnyObject) { if (itemName.text != "" && itemDescription.text != "") { let newItem = Item() newItem.name = itemName.text! newItem.descrpiton = itemDescription.text newItem.gotten = false newItem.rejected = false newItem.sender = PFUser.currentUser()!.username! let query = PFQuery(className: "Group") query.whereKey("objectId2", equalTo: PFUser.currentUser()!.objectId!) query.findObjectsInBackgroundWithBlock { (objects, error) -> Void in if error == nil && objects != nil{ let obj = (objects as! [PFObject]).first! var items : [Item] = obj.objectForKey("itemList") as! [Item] newItem.group = obj.objectId! items.append(newItem) obj.setObject(items, forKey: "itemList") obj.save() } } itemName.resignFirstResponder() itemDescription.resignFirstResponder() bottomConstraint.constant = -140 itemName.text = "" itemDescription.text = "" }else{ } }，
background.js，
popup.js，

以及一些HTML和CSS文件，

content.js，
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

这不是这种情况，因为output: { path: './build/', filename: '[name].js', },是硬编码的。

是否有任何方法可以将JS，HTML和CSS入口点分别作为JS，HTML和CSS文件输出？

Answer 1

您不希望将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。

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

1 个答案: