捆绑JS文件(Web包)

取决于您是否使用 babel-loader 或者不是。

如果您不想使用ECMA6+/JSX语法编写,那么使用较旧的CommonJS/node是浏览器安全的。js公司 require('jquery'); 语法。

如果您想支持更新的语法,如ECMA6、ECMAscript-2015、ECMA7、JSX等,您可能需要使用 巴别塔装载机 和ECMA6 import syntax . 小心导入 default vs named vs alias vs wildcard 但导入时,可能需要使用语法:

import {jQuery as $} from 'jquery';

或

import $ from 'jquery';

有关导入jquery方法的详细信息 here .

如果您不想从模块中导入任何特定名称(例如,如果您导入 jQuery 让它加入全球 window.jQuery = window.$ ),你可以说 import 'jquery'; .

要启用 巴别塔装载机 在webpack中,使用如下配置:

webpack.config.js

  {
    entry: 'app.js',
    output: {
      path: path.join(__dirname, 'dist'),
      publicPath: publicPath,
      filename: outputFilename
    },
    resolve: {
      modules: [path.join(__dirname, 'src'), path.join(__dirname, 'node_modules')]
    },
    plugins: [
      new webpack.ProvidePlugin({ 
        $: 'jquery', 
        jQuery: 'jquery'
      })
    ],
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            presets: ['es2015', 'react'],
            plugins: ['transform-es2015-destructuring', 'transform-object-rest-spread']
          }
        },
        ...
      ]
    ...
   }
 }

还请注意,您可以使用 webpack ProvidePlugin ,正如我在这个配置中所做的那样,为期望jQuery作为全局变量可用的模块填充jQuery。