9.1 基本介绍

1. 什么是webpack?

官网解释

webpack is a static module bundler for modern JavaScript applications
webpack是一个静态的模块化打包工具, 用于现代的JavaScript应用程序

名词拆解

• 静态的: 通过webpack我们最终可以将前端项目打包成一系列的静态文件, 从而部署到静态服务器上
• 模块化: webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等
• 现代的: webpack正是为了解决现代前端所出现的各种问题而诞生的


2. 怎么安装使用?

环境要求

webpack的运行依赖于Node环境

安装

需使用npm安装webpack和webpack-cli(一个用于命令行运行webpack的工具)

npm install webpack webpack-cli -g

二者的关系为:

• 执行webpack命令，会执行node_modules下的.bin目录下的webpack;
• webpack在执行时是依赖webpack-cli的，如果没有安装就会报错;
• 而webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程；

初步使用

1. 首先, 我们应先有如下的案例:

新建一个项目文件夹, 在该文件夹下面创建src目录, 新建index.js, 在src文件夹下创建js目录, 新建math.js和format.js文件, 分别采用ES6和CommonJS的模块语法来导出, 并在index.js中引用它们
在项目文件夹下新建文件index.html, 在该文件中引用index.js, 最终的项目结构如下:
format.js代码:

const priceFormat = function () {
  return '$9.9'
}
// CommonJS的模块化写法
module.exports = {
  priceFormat
}

math.js代码:

// es6的模块化写法
export function sum(num1, num2) {
  return num1 + num2
}

index.js代码:

const { priceFormat} = require('./js/format')
import {sum} from './js/math'

console.log(priceFormat())
console.log(sum(1,2))

index.html部分代码:

<script src="./dist/main.js"></script>

此时如果通过VSCode中的Live Server插件打开index.html, 则会发现如下的报错信息:

Uncaught SyntaxError: Cannot use import statement outside a module

其原因在于浏览器无法识别ES6和CommonJS的模块语法, 因此我们需要使用webpack这个工具对其进行打包转换成浏览器可以识别的代码

2. 使用webpack解决上述问题:

打开终端, 切换到本项目下面, 输入

webpack

此时会在项目根目录下面生成一个dist文件夹, 并有一个main.js的文件
我们再将index.html中的src的路径改为main.js的路径:

<script src="./dist/main.js"></script>

此时在通过Live Server打开index.html, 可以在浏览器的检查中看到, 引入的js代码已被成功执行了.

3. 思考

问: 在上面的使用中, 我们并没有指定对哪些文件进行打包, 那么webpack是如何得知要打包哪些文件的呢?
答: webpack默认的入口为当前执行webpack的路径下src/index.js文件, 因此假如没有该文件那么就会报错