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’],
}