webpack的基本使用

说到vue工程化，首要想到的就是webpack，其可以根据我们的js文件间的依赖关系进行静态分析，然后将这些模块按指定规则生成静态资源，他的主要作用就是：1.打包：将js代码打包生成为一个文件，减少服务器下载拉取的负担；2.转换：将预编译语言转换为浏览器能够识别的语言；3.优化：对项目进行性能优化。下面用一个简单的案例进行webpack的使用：

使用webpack完成代码隔行变色的效果

1.首先创建项目根目录命名为webpack_test

注意这里我们不能将文件夹名称直接命名为webpack，这样会导致webpack在执行过程中报错

2.初始化包管理配置文件package.json

命令行执行 npm init -y
// 这里代码的意思是初始化包管理配置文件，-y的作用是跳过选项，默认全选y，生成默认配置包文件

3.创建src路径，创建我们需要打包的js文件

// 在webpack中，默认的入口文件夹的路径为根目录下的src路径，默认的入口文件为src下的index.js文件

4.在src路径下创建index.html文件，并初始化我们的页面基本结构，该文件为项目的根html文件，需要导入我们打包后的bundle文件，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>隔行变色</li>
      <li>隔行变色</li>
      <li>隔行变色</li>
      <li>隔行变色</li>
      <li>隔行变色</li>
      <li>隔行变色</li>
      <li>隔行变色</li>
      <li>隔行变色</li>
      <li>隔行变色</li>
    </ul>
  </body>
</html>

5.安装jquery文件，在index.js中写入脚本

// 控制台 npm i jquery -S
// 在index.js中写入实现隔行变色的脚本
import $ from "jquery"
$(function () {
  $("li:odd").css("backgroundColor", "red")
  $("li:even").css("backgroundColor", "blue")
})

如果我们现在在index.html中导入index.js文件，理论上是能够实现隔行变色的效果的，但是由于浏览器不支持es6的模块化导入语法，所以会导致报错，如果我们使用webpack，就可以将该语法转换为浏览器支持的语法格式

6.安装配置webpack

// 控制台安装webpack
npm i webpack@4 webpack-cli@3 -D
// 创建webpack配置文件webpack.config.js,并初始化配置
const path = require("path")
module.exports = {
  // 编译模式
  mode: "development",
  entry: path.join(__dirname, "./src/index.js"), //入口文件
  output: {
    path: path.join(__dirname, "./dist"), //指定输出的文件路径
    filename: "bundle.js", //配置输出文件的名称
  }, // 出口文件配置项
}

mode用于指定构建模式，我们在开发中使用development开发模式，如果项目上线，需要改为production模式，两者的区别就是开发模式不会压缩文件，在转换速度上会占到优势

entry用于指定入口文件，该文件包含了我们需要打包的文件关系

path模块提供了一些用于处理文件路径的小工具，dirpath表示我们根目录，文档地址：www.runoob.com/nodejs/node…

output指定我们的打包后输出文件的地址（path）和文件名称（filename）

在项目管理文件中配置webpack的运行项

// 在scipts下面加入
  "dev": "webpack"

在控制台输入npm run dev，即可生成打包后的文件，然后别忘了在index.html中引入该文件最终展示结果：

QQ截图20220117234011.png

项目中遇到的问题：

在编译过程中遇到报错

QQ截图20220117234209.png 运行npm run dev后，出现该错误，经过百度后有两种情况，一种是webpack版本不兼容，另一种就是我们配置的路径或者语法出现问题导致报错