在旧网站上 Gulp 到 Webpack 迁移 - 从非 npm 依赖项生成供应商

Question

我们想在一个相当大的老网站上从 gulp 迁移到 webpack。 Gulp 目前只是连接和缩小 JS 和 CSS 文件。我想迁移到 webpack，因为另一个前端开发人员在另一个文件夹中制作了一些由 browserify cmd 编译的 react 模块：

我们在 webapp/ 文件夹中工作，缩小的文件位于此处：

js/app.min.js
jslib/vendors.min.js
css/app.min.css

源文件是：

js/
  file1.js
  file2.js
  ...
jslib/
  jquery-1.11.2.min.js
  jquery.fancybox.js
  ...
  jquery.very-old-dependency-not-on-npm.min.js

css/
  style.css
  extra.css

我的目标是通过使用两个文件 app.js 和 vendors.js 来为 javascript 拆分此文件。理想情况下，这两个文件应该是导入其他文件的 ES6 文件。

实际上，我正在寻找一种方法来通过 2 个带有导入的 es6 文件对 JS 文件进行简单的连接/缩小。 Webpack 正在检查依赖项并克服“未定义 jquery”错误，我在 webpack.config 中添加了 webpack.providePlugin 和 resolve.alias 部分。但这会将 jquery 加载到我的 app.min.js 文件中，我不希望它用于性能目的。我知道所有库都应该在 es6 上下文中安装和需要/导入以优化 webpack 使用，但是在我想要的版本中，一些旧的 jquery 库在 npm 上不可用，所以我必须使用已经在项目。

vendors.js：

import "./jquery-1.11.2.min.js";
import "./jquery.fancybox.js"

app.js：

import "./file1.js"
import "./file2.js"

webpack.config.js

const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: {
    '/../../js/app': path.resolve(__dirname + '/../../js/app.js'),
    '/../../jslib/vendors': path.resolve(__dirname + '/../../jslib/vendors.js'),
  },
  output: {
    path: path.resolve(__dirname),
    filename: '[name].min.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
  ],
  resolve: {
    alias: {
      jquery: path.resolve(__dirname+'/../../jslib/jquery-1.11.2.min.js')
    },
  },
}

我所有的路径都可以（当前 gulp / 未来 webpack 的文件夹位置不在 assets 文件夹中）并且 webpack 成功运行，我只想找到一种干净的方法来执行简单的 concat / minify 而不包含 jquery我的应用程序文件，然后再进一步。

Answer 1

这是一个在 html 文件中使用 jquery 的示例external 至于app和vendor的名字，这部分你要改一下

entry: {
  '/../../js/app': path.resolve(__dirname + '/../../js/app.js'),
  '/../../jslib/vendors': path.resolve(__dirname + '/../../jslib/vendors.js'),
},

为此

entry: {
  app: path.resolve(__dirname + '/../../js/app.js'),
  vendors: path.resolve(__dirname + '/../../jslib/vendors.js'),
},

如果您希望从外部添加 jquery，请不要将其添加到导入中。从 vendor.js 中删除 jquery

希望我能帮上忙。