【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>