Webpack5相关知识点（一）- 基础（1）- 介绍和基本使用

最新推荐文章于 2023-04-03 21:50:05 发布

JHY97

最新推荐文章于 2023-04-03 21:50:05 发布

阅读量179

点赞数 1

分类专栏：打包工具文章标签： webpack vue.js javascript

本文链接：https://blog.csdn.net/JHY97/article/details/124925969

版权

8 篇文章 0 订阅

订阅专栏

一、Webpack介绍

开发时，当使用了框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。

这些代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、CSS 等语法，才能在浏览器运行。

因此需要打包工具来将这些代码编译成浏览器能识别的语法。

除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

以ES6模块化语法简单举例说明

index.html 引入 main.js

  <body>
    <h1>Hello World</h1>
    <script src="../src/main.js"></script>
  </body>

将count.js 与 sum.js 模块化在 main.js 中引入使用

// main.js
import count from "./js/count";
import sum from "./js/sum";

console.log(count(5, 3));
console.log(sum(1, 2, 3, 4, 5, 6));

// count.js
export default function count(x, y) {
  return x - y;
}

// sum.js
export default function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

这时候直接打开index.html的话，控制台会直接提示报错

打开终端，在项目根目录下，运行以下指令：

npm init -y

// -y 的含义：yes的意思，在init的时候省去了敲回车的步骤，生成的默认的package.json

生成一个基础的 package.json 文件

// webpack5(目前默认版本)
npm i -D webpack webpack-cli -D
// webpack4 
npm i -D webpack@4 webpack-cli@3 -D

-S 即--save（保存）：包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在

-D 即--dev（生产）：包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D

安装完后即可在package.json文件内查看到

npx webpack ./src/main.js --mode=development

npx webpack ./src/main.js --mode=production

npx webpack: 是用来运行本地安装 Webpack 包的。
./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。
--mode=xxx：指定模式（环境）

打包成功，且会生成dist目录

在 index.html 中改为引入打包好的main.js（即dist中的main.js）

  <body>
    <h1>Hello World</h1>
    <script src="../dist/main.js"></script>
  </body>

可以看浏览器中的控制台不再报错，且正常打印输出

关注