There is a personal public account at the bottom of the article: Xiao Zheng who loves technology. Mainly to share development knowledge, those who are interested can pay attention to first-hand.
foreword
The project can start normally, but the browser does not load the page. Check the console and console for errors. I have installed jquery and introduced it in main.js. The reason for the problem is that it also needs to be configured in the configuration file . The following process
page doesn't load
error message
He said: jQuery is not defined, I have installed jquery, and introduced jquery in main.js and the page to be used. Derived according to common sense, it should also need to modify some configuration files to make it effective
Solution
webpack.base.conf.jsModify configuration in
Add the following two lines of code to the file, pay attention to the added position. Add the location as shown in the figure below. Then re-run the project npm run startagain , otherwise the modified configuration may not take effect
var webpack = require('webpack')
plugins: [new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({
jQuery: "jquery", $: "jquery" })],
problem statement
How to use the plugin:
- 1. Usually when we need to integrate a certain plugin, we will first install it locally through npm
- 2. Then import it at the head of the configuration file (webpack.config.js), use the new keyword in the plugins column to generate an instance of the plugin and inject it into webpack.
successfully resolved
Just re-run the project, and the console will not report jauery undefined errors. Rerun the project and the modified configuration file will be loaded.
Data reference
BootStrap relies on jquery and needs to configure jquery.
Information reference: 1. Detailed tutorial on the installation and use of BootStrap in Vue
Information reference: 2. Briefly explain the webpack plugin