webpack4 完整单入口项目搭建过程

前言

本文主要是一次webpack4学习过程的总结，重点放在webpack4逐步与完整的配置过程说明上。不做完整的框架搭建，仅供参考！下文所有包的安装未指定安装的版本，但都会在【软件和包的说明】中标出版本信息，如果在安装或使用过程出现版本问题，请到【软件和包的说明】中对照版本。

阅读说明

1）阅读本文时最好先将git上的代码clone到本地，并先尝试运行。由于本文涉及到的配置较多，没有对所有的配置都在此详细列出，详细的配置都写在git上的项目。
2）本文记录的核心是配置过程出现的问题记录以及注意点！
项目地址：webpack4-single-page

软件和包说明

本次学习采用的是以下版本的软件和包：

• VSCode编辑器
• node【v12.13.1】
• npm 【v6.13.2】

"devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/core": "^7.11.4",
    "@babel/plugin-transform-runtime": "^7.11.0",
    "@babel/preset-env": "^7.11.0",
    "@babel/runtime-corejs3": "^7.11.2",
    "@commitlint/cli": "^9.1.2",
    "@commitlint/config-conventional": "^9.1.2",
    "add-asset-html-webpack-plugin": "^3.1.3",
    "art-template-loader": "^1.4.3",
    "autoprefixer": "^9.8.6",
    "babel-loader": "^8.1.0",
    "chokidar": "^3.4.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^4.2.2",
    "eslint": "^7.7.0",
    "eslint-loader": "^4.0.2",
    "file-loader": "^6.0.0",
    "glob-all": "^3.2.1",
    "happypack": "^5.0.1",
    "html-loader": "^1.3.0",
    "html-webpack-plugin": "^4.3.0",
    "husky": "^4.2.5",
    "mini-css-extract-plugin": "^0.10.0",
    "node-sass": "^4.14.1",
    "postcss-loader": "^3.0.0",
    "postcss-px-to-viewport": "^1.1.1",
    "postcss-pxtorem": "^5.1.1",
    "postcss-sprites": "^4.2.1",
    "purgecss-webpack-plugin": "^2.3.0",
    "sass-loader": "^10.0.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.44.1",
    "webpack-bundle-analyzer": "^3.8.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.1.3"
  },
  "dependencies": {
    "@popperjs/core": "^2.4.4",
    "art-template": "^4.13.2",
    "bootstrap": "^4.5.2",
    "jquery": "^3.5.1",
    "lib-flexible": "^0.3.2",
    "lodash": "^4.17.20",
    "moment": "^2.27.0"
  }

1. 搭建过程

1.1 创建一个新的项目

1） 新建一个文件夹并取名为【webpack4-single-page】，并使用VSCode打开该文件夹。
2）运行：

npm init

初始化项目，如无需特别配置，一路回车即可。

1.1.1 package.json

初始化项目后会生成一个package.json文件，这个文件里面有该项目的相关说明。后面我们也会在这个项目中进行配置，实现我们的需求。
【特别注意】：该文件不要写注释否则会报错。

详细的字段是说明请查看：
官方文档
package.json
文件 package.json 的说明文档

1.2 安装webpack

运行

npm install --save-dev webpack

因为是采用webpack4+的版本，因此还需要安装webpack的命令行工具：

npm install --save-dev webpack-cli

官方文档

1.2.1 package-lock.json

在安装的过程中，你会看到生成了【package-lock.json】这个文件，这个文件是做什么的呢？
官方文档
package-lock.json的作用

1.3 搭建项目目录

创建如下的项目

├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src			               # 源代码
│    │── assets                # 图片等静态资源
│    │	 │── icon.png          # 3k的小图片
│    │	 └── photo.jpg         # 大图片
│    │── css           		   # 样式文件
│    │── js 				   # 脚本文件
│    │── utils				   # 工具方法
│    │── view				   # 页面
│    │── main.js			   # 入口文件
├── postcss.config.js          # postcss配置文件
├── webpack.config.js          # webpack配置文件

1.4 配置相关文件

1.4.1 配置npm的镜像下载地址

// 使用淘宝镜像
npm config set registry https://registry.npm.taobao.org

// 查看是否设置成功
npm config get registry

1.4.2 配置webpack.config.js

可以先将以上的配置内容复制到webpack.config.js中。下面我们将一一了解配置的内容及配置所需安装的npm包。

这里有几个概念需要现说明下：