【Vue】1-1、webpack的基本使用

一、什么是 Webpack

概念：

webpack 是前端项目工程化的具体解决方案。

主要功能：

它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能化等强大的功能。

好处：

让程序员把工作重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

注意：

目前 Vue、React 等前端项目基本上都是基于 webpack 进行工程化开发的。

 

二、Demo

步骤：

1）新建项目空目录，并运行 npm init -y 命令，初始化包管理配置文件 package.json

2）新建 src 源代码目录

3）新建 src -> index.html 首页和 src -> index.js 脚本文件

4）初始化首页基本结构

5）运行 npm install jquery -S 命令，安装 jquery

6）通过 ES6 模块化的方式导入 jquery，实现列表隔行变色效果

执行完 npm install jquery -S 命令后会下载 jquery，并自动把 jquery 加载到 package.json 文件中

{
  "name": "change-rows-color",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  }
}
<!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>隔行变色</title>
    <script src="./index.js"></script>
</head>
<body>
    <ul>
        <li>这是第 1 个li</li>
        <li>这是第 2 个li</li>
        <li>这是第 3 个li</li>
        <li>这是第 4 个li</li>
        <li>这是第 5 个li</li>
        <li>这是第 6 个li</li>
        <li>这是第 7 个li</li>
        <li>这是第 8 个li</li>
        <li>这是第 9 个li</li>
    </ul>
</body>
</html>
// 使用 ES6 导入 jquery
import $ from 'jquery'

// 定义 jquery 的入口函数
$(function(){
    // 实现功能
    $('li:odd').css('background-color','cyan');
    $('li:even').css('background-color','pink');
})

由于使用 ES6 语法导入 jquery，因浏览器兼容问题出现下列报错，可以使用 webpack ，解决浏览器兼容问题。

使用 npm install webpack@5.42.1 webpack-cli@4.9.0 -D 命令安装 webpack，并记录到 package.json 文件中  

{
  "name": "change-rows-color",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "webpack": "^5.42.1",
    "webpack-cli": "^4.9.0"
  }
}
/**
 * 开发阶段以及部署运行阶段都需要用到的包需要在命令行末尾添加“-S”或“--save”添加到“dependencies”的分支中
 * 只在开发阶段会使用到的包就需要在命令行末尾添加“-D”或“--save-dev”添加到“devDependencies”的分支中
 **/

 

三、配置 Webpack 

步骤：

1）在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置

module.exports = {
	mode:'development'	// mode 用来指定构建模式，可选择 development 和 production
}

2）在 package.json 的 scripts 节点下，新增 dev 脚本如下：

"scripts":{
	"dev":"webpack" // scripts 节点下的脚本，可以通过 npm run 执行，例如：npm run dev
}

3）在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

最终效果：

 

四、mode 的可选值 

mode 节点的可选值有两个，分别是：

1）development

  • 开发环境

  • 不会对打包生成的文件进行代码压缩和性能优化

  • 打包速度快，适合在开发阶段使用

2）prodution

  • 生产环境

  • 会对打包生成的文件进行代码压缩和性能优化

  • 打包速度很慢，仅适合在项目发布阶段使用

 

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

webpack.config.js 是 webpack 的配置文件。

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

由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。

六 、webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：

  • 默认的打包入口文件为：src -> index.js

  • 默认的输出文件路径为：dist -> main.js

可以在 webpack.config.js 文件中修改打包的默认约定

在 webpack.config.js 配置文件中

  • 通过 entry 节点指定打包的入口

  • 通过 output 节点指定打包的出口

示例代码：  

// 导入 node.js 中专门操作路径的模块
const path = require('path')

modeule.exports = {
	entry: path.join(__dirname,'./src/index.js'),	// 打包入口文件的路径
	output:{
		path:path.join(__dirname,'./dist'),			// 输出文件的存放路径
		filename:'bundle.js'						// 输出文件的名称
	}
}

一  叶  知  秋，奥  妙  玄  心