应用错误收集

Legacy JS捆绑＆amp;用Webpack缩小

时间：2016-04-16 07:31:33

标签： javascript jquery bundle webpack bundling-and-minification

我的项目有多个JS-Files，它们包含没有任何导出的函数声明，并使用jquery，jquery-ui和其他需要全局访问的库。函数通常由html元素中的内联JavaScript 调用（<button onclick="doStuff()">...）

我的目标是将应用程序文件捆绑到bundle.js，将供应商文件捆绑到vendor.js中。我设法完成了第二项任务，但第一项任务并没有像我希望的那样正常工作。

bundle.js文件应该只包含连接+缩小的所有.js文件，然后在全局上下文中执行。

到目前为止我尝试了什么：

scripts-loader （没有缩小......）
exports-loader （上下文问题？）
expose-loader （不会在捆绑包之外全局公开函数并需要导出）

为了便于讨论，我给出了一个简化的方案：

的src / a.js

function doStuffA() {
    alert("A");
}

的src / b.js

function doStuffB() {
    alert("B");
}

的src / index.js

require("script!./a");
require("script!./b");

的index.html

<body>
    <button onclick="doStuffA()">A</button>
    <button onclick="doStuffB()">B</button>
    <script src="bundle.js"></script>
    <script src="vendor.js"></script>
</body>

webpack.config.js

var webpack = require("webpack");

module.exports = {
  entry: {
    app: "./src/index.js",
    vendor: [
      "jquery",
      "jquery-ui"
    ]
  },
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {test: /\.json$/, loader: "json"},
      {test: /\.css$/, loader: "style!css"}
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      "jQuery": "jquery",
      "window.jQuery": "jquery"
    }),
    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity }),
  ]
}

0 个答案:

没有答案