Geek Answers Handbook

Webpack - using the script loader in webpack.config.json

I'm just starting to dip my fingers into the world of webpack. I use awesome Vue.js with vueify, so my modules are ES6.

One of the difficulties I am facing is downloading some third-party jQuery plugins. I use ProvidePlugin to load jQuery - which works great.

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

Then I have a directory called plugins containing jQuery plugins. I understand that the script loader just loads them into the linked file as strings, and they are evaluated when the package loads. Then these scripts can be used as if they were loaded into a regular script tag (i.e. no import is required).

But I just can't get any of the plugins to work. Below is an array of my bootloaders. What am I doing wrong (or not doing)?

 loaders: [ // process *.vue files using vue-loader { test: /\.vue$/, loader: 'vue' }, // process *.js files using babel-loader // the exclude pattern is important so that we don't // apply babel transform to all the dependencies! { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, { test: /plugins\.js$/, loader: 'script-loader' #tried script too } ]
+5
source share
2 answers
 new webpack.ProvidePlugin({ 'React': path.resolve(__dirname, "node_modules/react/react"), 'ReactDOM': path.resolve(__dirname, "node_modules/react-dom/dist/react-dom"), "jQuery": path.resolve(__dirname, "node_modules/jquery/dist/jquery"), "$": path.resolve(__dirname, "node_modules/jquery/dist/jquery") })

allow you lib path

0
source

I can sympathize with the difficulty of connecting jQuery plugins to webpack. Although I do not have a solution for this specific configuration, I found it useful to use cdn to continue development until further troubleshooting is done. The following is an example.

In your .html template file:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

In index.js or whatever your main entry point is:

 import $ from 'jquery'

In the configuration of your web package:

 externals: { jquery: 'jQuery' }

Since this approach involves the direct use of script tags, it can work more reliably, temporarily sacrificing opportunities for optimization and grouping.

0
source

More articles:


All Articles