Skip to main content
 首页 » 编程设计

jquery之webpack2 jquery 编译挂起

2026年07月28日9mfrbuaa

Webpack2 不再使用包含的 jQuery 进行编译。这是我的 Webpack 配置,可以使用。

const rules = { 
    componentStyles: { 
        test:  /\.(scss|sass)$/, 
        use: ExtractTextPlugin.extract({ 
            fallback: "style-loader", 
            use: ['css-loader', 'postcss-loader', 'sass-loader'] 
        }) 
    }, 
    fonts: { 
        test: /\.(ttf|eot|svg?)|(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 
        use: 'file-loader?name=fonts/[name].[ext]' 
    }, 
    images: { 
        test: /\.(png|jpe?g|gif)$/, 
        use:[ 
            { 
                loader: 'file-loader', 
                options: { 
                    name: '[path][name].[ext]' 
                } 
            } 
        ] 
    }, 
    autoprefixer: { 
        test: /\.docs\.css$/, 
        use: [{ 
          loader: "style-loader!css-loader?-autoprefixer!postcss-loader?pack=cleaner" 
        }] 
    }, 
    jquery: { 
        test: require.resolve('jquery'), 
        use: [ 
            { 
                loader: 'expose-loader', 
                query: 'jQuery' 
            }, 
            { 
                loader: 'expose-loader', 
                query: '$' 
            } 
        ] 
    } 
} 

现在编译过程挂起

 26% building modules 139/155 modules 16 active ...jquery/external/sizzle/dist/sizzle.js 

请您参考如下方法:

这就是我用来加载 jQuery 和 Webpack 2 的内容

const path = require('path'); 
const webpack = require('webpack'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
 
const config = { 
  context: path.resolve(__dirname, './src'), 
  entry: { 
    app: './app/bootstrap.js', //entry file 
  }, 
  output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: '[name].bundle.js', 
  }, 
  resolve: { 
    modules: [ 
      'node_modules', 
    ], 
  }, 
  devtool: 'cheap-source-map', 
  devServer: { 
    contentBase: path.resolve(__dirname, './src'), 
    port: 8700, 
    inline: true, 
    hot: true, 
    watchContentBase: true, 
    open: true, 
  }, 
  plugins: [ 
    new ExtractTextPlugin({ 
      filename: '[name].css', 
      disable: false, 
      allChunks: true, 
    }), 
    new HtmlWebpackPlugin({ 
      filename: 'index.html', 
      template: 'index.html', 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      minChunks: function(mod, count) { 
        // Don't include things under '/src' folder 
        return mod.resource && 
          mod.resource 
          .indexOf(path.resolve(__dirname, 'src')) === -1; 
      }, 
    }), 
    new webpack.ProvidePlugin({ 
      '$': 'jquery', 
      'jQuery': 'jquery', 
      'window.jQuery': 'jquery', 
    }), 
  ], 
  module: { 
    rules: [{ 
        test: /\.html$/, 
        loader: 'html-loader', 
      }, 
      { 
        test: /\.scss$/, 
        use: ExtractTextPlugin.extract({ 
          fallback: 'style-loader', 
          loader: [{ 
              loader: 'css-loader' 
            }, 
            { 
              loader: 'sass-loader', 
              options: { 
                modules: true 
              } 
            } 
          ], 
        }), 
      }, 
      { 
        test: /\.(jpg|png|gif|svg)$/, 
        use: [{ 
          loader: 'url-loader', 
          query: { 
            limit: 2000, 
            name: '[name].[ext]', 
          }, 
        }, ], 
      }, 
      { 
        test: /\.(ico|woff|eot|woff2|ttf)$/, 
        use: [{ 
          loader: 'url-loader', 
          query: { 
            limit: 1, 
            name: '[name].[ext]', 
          }, 
        }, ], 
      }, 
    ], 
  }, 
}; 

您可以看到包含的加载器。让我知道它是否有效。