Question

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

Answer 1

所以这就是我用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]',
          },
        }, ],
      },
    ],
  },
};

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

Answer 2

您是否尝试将其包含在插件中？像这样：

plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
        }),
    ]

Answer 3

module: {
  loaders: [
     {
      test: require.resolve("jquery"), 
      loader: "expose-loader?$!expose-loader?jQuery"
     },
  ],
  plugin: [
     new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery'
     }),
  ]

Together loader和plugin将在你的项目中运行jQuery

webpack2 jquery编译挂起

3 个答案: