官網(wǎng)中文教程：https://www.webpackjs.com/guides/installation/
npm文檔：https://docs.npmjs.com/
1、全局安裝
安裝 webpack 前要確保已經(jīng)下載 node.js 最新版本（node.js官網(wǎng)地址）
目前使用命令行安裝的 webpack 默認(rèn)為最新版本（以下我使用了全局安裝。官網(wǎng)建議本地安裝，這可以使我們?cè)谝肫茐氖阶兏?breaking change)的依賴時(shí)，更容易分別升級(jí)項(xiàng)目。）
npm i webpack -g
當(dāng)我想確認(rèn)是否安裝成功，輸入 webpack -v 后出現(xiàn)：
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages：
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
- webpack-command (https//github.com/webpack-contrib/webpack-command)
A lightweight, opinionated webpack CLI.
We will use "npm" to install the CLI via "npm install -D".
Which one do you like to install (webpack-cli/webpack-command):
提示我們必須安裝一個(gè) CLI，有兩個(gè)版本，Windows 安裝 webpack-cli ，Mac 安裝 webpack-command，輸入以下命令：
npm i webpack-cli -g//當(dāng)前安裝時(shí)的版本為3.0.8
然后再輸入 webpack -v 確認(rèn)是否安裝成功：
webpack -v
4.16.0
至此，webpack4 才算安裝完成（注意：如果 webpack 安裝在全局，那么 CLI 也需要裝在全局）。
2、初次打包
在舊版本 webpack 中，將 index.js 文件打包成 bundle.js 文件使用的是如下命令（webpack 入口文件 出口文件）：
webpack ./src/index.js ./dist/bundle.js
結(jié)果報(bào)錯(cuò)如下：
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ERROR in multi ./src/index.js ./dist/bundle.js
Module not found: Error: Can't resolve './dist/bundle.js' in 'E:\文檔\webproject\homework\webpack'
@ multi ./src/index.js ./dist/bundle.js main[1]
上面警告說 mode 沒有指定，可以指定值為 production 或 development，不指定默認(rèn)為 production。
同時(shí)還有一個(gè)報(bào)錯(cuò)，沒有找到模塊，不能被解析（resolve）。
原因是，webpack4 的打包已經(jīng)不能用 webpack 文件a 文件b 的方式（實(shí)際開發(fā)使用時(shí)也不推薦該方法）。
因此需要先建一個(gè) package.json 文件，方法是先在根目錄下使用命令行創(chuàng)建一個(gè)項(xiàng)目：
webpack init
默認(rèn)配置的話一路回車，就能在根目錄下看到 package.json 文件了。
然后在在 package.json 中 scripts 中加入以下兩行代碼：
"dev": "webpack --mode development",
"build": "webpack --mode production"
然后在命令行中執(zhí)行
npm run build//(或dev)
就會(huì)在 dist 目錄下創(chuàng)建一個(gè)打包好的 main.js 文件（如果需要更改出口文件名，需要使用配置文件 webpack.config.js）。
3、css-loader
前提：打包 css 文件需要依賴 style-loader 和 css-loader（安裝和使用方式可查看官網(wǎng)）。
- css-loader：使 webpack 可以處理 css 文件。
- style-loader：新建一個(gè) style 標(biāo)簽，把 css-loader 處理過的文件放進(jìn)去，然后插入到 HTML 標(biāo)簽中。
在入口文件 index.js 中引入 css 文件
require('../css/style.css');
使用 webpack 命令后報(bào)了以下錯(cuò)誤：
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ERROR in ./src/css/style.css 1:3
Module parse failed: Unexpected token (1:3)
You may need an appropriate loader to handle this file type.
> h1 {
| background-color: #00ffff;
| color: #fff;
@ ./src/js/index.js 2:0-27
原因是需要在路徑前加 style-loader!css-loader! ：
require('style-loader!css-loader!../css/style.css');
更多 css-loader 方法可以查看 https://github.com/webpack-contrib/css-loader
4、本地安裝
全局安裝并且配置過 json 文件后，想進(jìn)行本地安裝，輸入命令行 npm i webpack --save-dev 后，出現(xiàn)以下錯(cuò)誤：
npm ERR! Refusing to install package with name "webpack" under a package
npm ERR! also called "webpack". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR!
npm ERR! For more information, see:
npm ERR! <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\helen\AppData\Roaming\npm-cache\_logs\2018-07-16T14_34_05_927Z-debug.log
上述錯(cuò)誤表明目錄下有一個(gè)同名 "webpack" 文件，于是找到目錄下 package.json 文件，將文件中 "name": "webpack" 改為其他名字即可。
5、webpack-dev-server
通過命令行 npm i webpack-dev-server -g 全局安裝了 webpack-dev-server，也在 config.js 中加了
var HtmlWebpackPlugin = require('html-webpack-plugin');
之后命令行輸入 webpack --open 報(bào)錯(cuò)如下：
Error: Cannot find module 'html-webpack-plugin'
原因是項(xiàng)目安裝的是全局的 webpack-dev-server ，而 webpack 安裝在項(xiàng)目本地，需要在本地安裝 webpack-dev-server，同時(shí)需要安裝插件 html-webpack-plugin
npm i html-webpack-plugin --save-dev
6、webpack.optimize.UglifyJsPlugin
引入 webpack.optimize.UglifyJsPlugin 插件時(shí)報(bào)錯(cuò)如下：
Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
原因是在 webpack4 之后移除了該方法，需要安裝 uglify-js 插件，然后在 webpack.config.js 中改為：
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
...
//壓縮js
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: false
}
})
]
},
};
7、extract-text-webpack-plugin
使用 extract-text-webpack-plugin 后報(bào)錯(cuò)如下：
DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
由于 webpack4 中 extract-text-webpack-plugin 插件不再使用，換成 mini-css-extract-plugin，文檔：https://www.npmjs.com/package/mini-css-extract-plugin
