官網(wǎng)中文教程：https://www.webpackjs.com/guides/installation/
npm文檔：https://docs.npmjs.com/
1、全局安裝
安裝 webpack 前要確保已經(jīng)下載 node.js 最新版本（node.js官網(wǎng)地址）
目前使用命令行安裝的 webpack 默認為最新版本（以下我使用了全局安裝生百。官網(wǎng)建議本地安裝仗扬，這可以使我們在引入破壞式變更(breaking change)的依賴時艺配，更容易分別升級項目籍滴。）
npm i webpack -g
當我想確認是否安裝成功执庐，輸入 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):
提示我們必須安裝一個 CLI胁附，有兩個版本酒繁，Windows 安裝 webpack-cli ，Mac 安裝 webpack-command控妻，輸入以下命令：
npm i webpack-cli -g//當前安裝時的版本為3.0.8
然后再輸入 webpack -v 確認是否安裝成功：
webpack -v
4.16.0
至此州袒，webpack4 才算安裝完成（注意：如果 webpack 安裝在全局，那么 CLI 也需要裝在全局）弓候。
2郎哭、初次打包
在舊版本 webpack 中，將 index.js 文件打包成 bundle.js 文件使用的是如下命令（webpack 入口文件 出口文件）：
webpack ./src/index.js ./dist/bundle.js
結(jié)果報錯如下：
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夸研，不指定默認為 production。
同時還有一個報錯依鸥，沒有找到模塊亥至，不能被解析（resolve）。
原因是，webpack4 的打包已經(jīng)不能用 webpack 文件a 文件b 的方式（實際開發(fā)使用時也不推薦該方法）姐扮。
因此需要先建一個 package.json 文件絮供，方法是先在根目錄下使用命令行創(chuàng)建一個項目：
webpack init
默認配置的話一路回車，就能在根目錄下看到 package.json 文件了茶敏。
然后在在 package.json 中 scripts 中加入以下兩行代碼：
"dev": "webpack --mode development",
"build": "webpack --mode production"
然后在命令行中執(zhí)行
npm run build//(或dev)
就會在 dist 目錄下創(chuàng)建一個打包好的 main.js 文件（如果需要更改出口文件名壤靶，需要使用配置文件 webpack.config.js）。
3惊搏、css-loader
前提：打包 css 文件需要依賴 style-loader 和 css-loader（安裝和使用方式可查看官網(wǎng)）贮乳。
- css-loader：使 webpack 可以處理 css 文件。
- style-loader：新建一個 style 標簽胀屿，把 css-loader 處理過的文件放進去塘揣，然后插入到 HTML 標簽中。
在入口文件 index.js 中引入 css 文件
require('../css/style.css');
使用 webpack 命令后報了以下錯誤：
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 文件后亲铡，想進行本地安裝，輸入命令行 npm i webpack --save-dev 后葡兑，出現(xiàn)以下錯誤：
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
上述錯誤表明目錄下有一個同名 "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 報錯如下：
Error: Cannot find module 'html-webpack-plugin'
原因是項目安裝的是全局的 webpack-dev-server 洲守，而 webpack 安裝在項目本地疑务，需要在本地安裝 webpack-dev-server，同時需要安裝插件 html-webpack-plugin
npm i html-webpack-plugin --save-dev
6梗醇、webpack.optimize.UglifyJsPlugin
引入 webpack.optimize.UglifyJsPlugin 插件時報錯如下：
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 后報錯如下：
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
