Webpack2 jquery compiles freezes

Webpack2 no longer compiles with jQuery enabled. Here is my webpack configuration that is used to work.

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: '$' } ] } } 

Now, when compiling, the process freezes on

  26% building modules 139/155 modules 16 active ...jquery/external/sizzle/dist/sizzle.js 
+5
source share
3 answers

So this is what I use to download using jQuery and 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]', }, }, ], }, ], }, }; 

You can see the included loaders . Let me know if this works.

+1
source

You tried just to include it in plugins. So:

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

Together, the loader and the plugin will work with jQuery in your project

0
source

Source: https://habr.com/ru/post/1263972/


All Articles