webpack5学习 --- 邂逅webpack

coderklaus
351 阅读3分钟

webpack是什么

随着前端的发展和前端项目的复杂性越来越多，我们在日常开发中需要解决各种问题：

  1. 开发过程中，使用模块化进行开发，但是模块化方式有很多，且老版本浏览器并不支持模块化

  2. 我们会使用一些高级好用的特性来提升我们的开发效率和代码安全性，例如ES6+，TS，LESS,SASS等,但这些新特性并不能被浏览器所直接识别，需要我们通过对应特性提供的工具进行编译，使这些新特性转换为浏览器可以直接识别的语法。这也就导致了配置工具繁多，且每次编写完都需要手动调试就变得十分繁琐

  3. 希望实时的监听文件的变化来并且反映到浏览器上，提高开发的效率

  4. 开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化;

正是因为这些问题的出现，所以出现了一系列的构建工具，如rollup，vite，webpack等

通过预先自定义配置的方式，来简化我们的编译工作，提升开发效率

即让我们使用任何我们所喜欢的开发方式去开发项目代码，而不用去考虑代码的兼容性和支持度，因为这些构建工具会帮助我们处理好

webpack是一个为现代的JavaScript应用程序而生静态的模块化打包工具

  1. 打包bundler： 这是webpack的核心，将分开来的模块以一定的方式组合在一起，形成一个或多个大的文件
  2. 静态的static：最终打包出的代码都是静态资源(部署到静态服务器)
  3. 模块化module: webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等

初体验

  1. webpack是运行在node环境下的，所以需要先安装node

    # 查看是否安装成功
$ node --version
$ npm --version

  2. 安装webpack的依赖webpack和webpack-cli

    # 全局安装 --- webpack成为全局命令
$ npm i webpack webpack-cli -g

# 局部安装 --- 项目级别的webpack，将webpack的版本记入package.json 
# 1. 保证整个开发团队所使用的webpack是同一个版本号
# 2. 保证同一个主机上，不同的项目所使用的webpack版本都是独立的，不会相互冲突
$ npm i webpack webpack-cli -d

# webpack --- npm包 本质上导出的是一个函数
# webpack-cli --- webpack4开始单独抽离出来的npm包 
# webpack官方提供的工具，帮助我们解析命令行传入的参数和解析配置文件，并将解析后的内容传递给webpack
# 所以webpack-cli并不是必须的
# 例如vue-cli中使用的就是vue-cli-service来替换webpack-cli
# 而react脚手架中使用的就是react-scripts

  3. 使用

math.js --- ESM模块

export const sum = (num1, num2) => num1 + num2

format.js --- CJS模块

module.exports.getFullName = (firstname, lastname) => firstname + ' - ' + lastname

index.js --- 主模块

// 使用webpack打包后, 浏览器可以直接运行打包后的代码

// webpack同时支持 CJS 和 ESM
import { sum } from './js/math'

// 在webpack中引入js文件是可以省略后缀名的
// 因为webpack默认将js后缀配置如了`resolve.extensions`这个数组中
// 所以webpack在解析引入的模块资源的时候，可以自动匹配并加上js后缀
import { getFullName } from './js/format'

console.log(sum(20, 30))
console.log(getFullName('Klaus', 'Wang'))

编译 打包

编译的时候，可以在命令行中传入一些参数，可以参考官网

方式1

# 1. 此时使用的是全局webpack进行编译
# 2. 默认入口文件为 src/index.js
# 3. 默认输出文件为 dist/main.js
$ webpack

方式2

# 直接在命令行输入webpack命令进行打包，使用的是全局打包
# 如果使用npx webpack 会先去使用局部的webpack来进行打包
# 如果局部不存在webpack，那么会去临时文件夹中下载一个webpack
# 使用完毕以后，会在合适的时机自动移除临时文件夹
$ npx webpack

方式3

// package.json
"scripts": {
  // 构建项目的时候 指令一般起名为 build 
  // 运行服务的时候 指令一般起名为 serve
  
  // package.json中配置的命令会优先使用局部的webpack，没有再使用全局的webpack
  "build": "webpack" 
}

# 使用
$ npm run build

tips:

  1. 局部的webpack 是对应着node_modules/.bin/webpack

  2. 默认情况下，进行打包的时候，webpack只会对模块化相关语法进行转换，不会对ES6+等其它特性进行转换

    如果需要使用webpack提供的其它功能，则需要对webpack的配置文件及相应的工具进行配置

    例如需要需要将ES6+转换为ES5，则需要手动配置babel和webpack

avatar
文章
阅读
粉丝