webpack2 jqueryコンパイルがハングアップする

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

でハングコンパイルします。以下のようなので：だからここ

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

Answer 2

は、私はあなたがloadersが含ま見ることができる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]', 
      }, 
     }, ], 
     }, 
    ], 
    }, 
}; 

をロードするために使用していますものです。それが動作するかどうか私に教えてください。

Answer 3

ローダーとプラグインプロジェクトでのjQueryを動作します一緒に

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