【webpack】webpack4從安裝到使用入過的那些坑

文章作者:立正小歪牙
原始鏈接:https://www.jianshu.com/p/c094e42b0bc2

官網中文教程：https://www.webpackjs.com/guides/installation/
npm文檔：https://docs.npmjs.com/

1、全局安裝

安裝 webpack 前要確保已經下載 node.js 最新版本（node.js官網地址）

目前使用命令行安裝的 webpack 默認爲最新版本（以下我使用了全局安裝。官網建議本地安裝，這可以使我們在引入破壞式變更(breaking change)的依賴時，更容易分別升級項目。）

npm i webpack -g

當我想確認是否安裝成功，輸入 webpack -v 後出現：

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 也需要裝在全局）。

webpack安裝過程截圖

2、初次打包

在舊版本 webpack 中，將 index.js 文件打包成 bundle.js 文件使用的是如下命令（webpack 入口文件 出口文件）：

webpack ./src/index.js ./dist/bundle.js

結果報錯如下：

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 的打包已經不能用 webpack 文件a 文件b 的方式（實際開發使用時也不推薦該方法）。

webpack初次打包報錯截圖

因此需要先建一個 package.json 文件，方法是先在根目錄下使用命令行創建一個項目：

webpack init

默認配置的話一路回車，就能在根目錄下看到 package.json 文件了。

webpack init過程截圖

然後在在 package.json 中 scripts 中加入以下兩行代碼：

"dev": "webpack --mode development",
"build": "webpack --mode production"

然後在命令行中執行

npm run build//(或dev)

就會在 dist 目錄下創建一個打包好的 main.js 文件（如果需要更改出口文件名，需要使用配置文件 webpack.config.js）。

3、css-loader

前提：打包 css 文件需要依賴 style-loader 和 css-loader（安裝和使用方式可查看官網）。

• 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');

webpack打包css報錯截圖

更多 css-loader 方法可以查看 https://github.com/webpack-contrib/css-loader

4、本地安裝

全局安裝並且配置過 json 文件後，想進行本地安裝，輸入命令行 npm i webpack --save-dev 後，出現以下錯誤：

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<span class=“hljs-number”>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

在此感謝那些參考過的文檔的作者

• webpack 4.x 使用遇到的問題以及開發配置
• webpack4.x深入與實踐
• webpack4.x入門配置
• webpack4.0版本中的js壓縮問題
• 使用webpack 4.X中Plugin遇到的問題

      </div>