npm: Nodejs下的包管理器。 webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
1. 安装npm,webpack
npm: 进入node.js官网下载node.js并安装,node.js自带npm,在命令行输入node -v 和
npm -v查看版本
webpack：
以全局的方式安装：
$ npm install webpack -g
然而，我并不喜欢这种方式，因为并不是所有的项目都需要webpack的。通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。
进入项目目录， 确定已经有 package.json，没有就通过 npm init -y创建，安装 webpack 依赖
$ npm install webpack --save-dev或者$ npm i -D webpack
webpack 4.0以上的，还需要安装个命令行工具webpack-cli
$ npm i -D webpack-cli
执行打包：npx webpack
若报webpack is not defined、
就在webpack.config.js里加let webpack = require(‘webpack’);
2. webpack引入jquery和bootstrap
安装jQuery
npm install jquery --save-dev
安装bootstrap
npm install bootstrap --save-dev
配置jQuery
由于 Bootstrap 依赖于 jQuery，所以在代码中 import jQuery from ‘jquery’ 是不够的，这只是解决了自己代码对 jQuery 的依赖，在此处使用了webpack.ProvidePlugin
解决方案：
在 webpack.base.config.js 头部添加
var webpack = require(‘webpack’)
在 entry 后边添加
plugins: [
new webpack.ProvidePlugin({
“$”: “jquery”,
“jQuery”: “jquery”,
“window.jQuery”: “jquery”
})
]
引入bootstrap
在 main.js 中，加入如下代码
import ‘bootstrap/dist/css/bootstrap.min.css’
import ‘bootstrap/dist/js/bootstrap.min.js’
使用webpack打包bootstrap4的时候，需要手动安装popper.js
npm install [email protected] -D
npm install popper.js -D
否则引入bootstrap后，webpack打包报错
Module not found: Error: Can't resolve 'popper.js' ....
若报：Uncaught Error: Bootstrap dropdown require Popper.js
解决 执行：npm install --save popper.js
在module.exports = {}中添加一下代码
plugins: [
new webpack.optimize.CommonsChunkPlugin(‘common’),
new webpack.ProvidePlugin({
jQuery: ‘jquery’,
$: ‘jquery’,
Popper: [‘popper.js’, ‘default’],
}