Webpack的旧式JS捆绑和最小化

alg*_*hms 5 javascript jquery bundle bundling-and-minification webpack

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

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

bundle.js文件应仅包含所有已串联+缩小的.js文件，然后在全局上下文中执行。

到目前为止我尝试过的是：

脚本加载器（无缩小...）
exports-loader（上下文问题？）
暴露加载器（实际上并没有在包之外全局暴露函数，需要导出）

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

src / a.js

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

Run Code Online (Sandbox Code Playgroud)

src / b.js

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

Run Code Online (Sandbox Code Playgroud)

src / index.js

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

Run Code Online (Sandbox Code Playgroud)

index.html

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

Run Code Online (Sandbox Code Playgroud)

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 }),
  ]
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，8 月前
查看次数：	795 次
最近记录：	9 年，8 月前