Vue3: WebPack的基本使用

1、创建列表隔行变色项目

• 创建项目

2、在项目中配置 webpack

• 项目配置

2.1 mode值

• mode可选值

3、webpack.config.js 文件的作用

• webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
• webpack 中的默认约定

4、自定义打包的入口与出口

• 自定义打包的入口与出口

5、webpack 中的插件

• webpack-dev-server
  • webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。
  • npm install [email protected] -D
  • 配置 webpack-dev-server
• html-webpack-plugin
  • html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份！
  • npm install [email protected] -D
  • 在webpack.config.js文件配置

6、解惑 html-webpack-plugin

• 解惑 html-webpack-plugin

7、devServer 节点

• 在webpack.config.js文件中的module.exports = {}配置