webpack5快速搭建HTML项目

基础环境搭建

1. 快速初始化项目，并生成一个package.json文件：yarn init -y

2. 安装webpack依赖：yarn add webpack webpack-cli --dev

   如果报错certificate has expired，通过yarn config list 查看yarn配置清单里的strict-ssl，关掉strict-ssl即可：yarn config set strict-ssl false

3. 插件安装：

   • 本地开发服务插件webpack-dev-server： yarn add webpack-dev-server -D。插件默认的静态资源访问目录为path.join(process.cwd(), "public")，也可以自定义静态资源访问目录：path.join(process.cwd(), 'demo')。
   • html文件处理插件html-webpack-plugin：yarn add html-webpack-plugin -D 。webpack更专注于处理模块之间的依赖关系和资源打包，不会自动创建HTML文件。通过此插件可以自动生成HTML文件并自动引入打包后的资源。

4. 创建文件目录：

   • src文件夹：里面新建入口文件index.js

webpack 配置（区分开发和生产）

1. 新建build文件夹，里面新增4个文件：

   • utils.js：公共方法库
   • webpack.base.conf.js：公共配置信息
   • webpack.dev.conf.js：开发配置信息，需要安装本地开发插件 yarn add webpack-dev-server -D。由于插件默认的静态资源访问目录为path.join(process.cwd(), "public")，所以需要并新建public文件夹和index.html模板文件。也可以自定义静态资源访问目录：path.join(process.cwd(), 'src')。
   • webpack.prod.conf.js：生产配置信息

2. 具体配置：

   // utils.js
   const path = require('path')
   exports.getFilePath