webpack4前期准备

发表于 | 分类于


为什么使用webpack打包

最原始网页：面向过程编程

缺点：所有逻辑代码没有分离，阅读性很差，且不好维护

1
2
3
4
5
6
7
8
9
10
11
12
13
// index.html
<div id="wrap"></div>
<script src="index.js"></script>

// index.js
var dom = document.querySelector('#wrap')
var header = document.createElement('div')
header.innerText = 'header'
dom.append(header)

var content = document.createElement('div')
content.innerText = 'content'
dom.append(content)
改进后：面向对象编程

优点：代码进行了对象包装，具有维护性。
缺点：1、多引入了2个文件，加载速度变慢；2、从index.js里看不出文件之间的依赖关系；3、依赖文件顺序有关联，index.js必须要最后执行，不然会报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// index.html
<div id="wrap"></div>
<script src="header.js"></script>
<script src="content.js"></script>
<script src="index.js"></script>

// header.js
var Header = function () {
  var dom = document.querySelector('#wrap')
  var header = document.createElement('div')
  header.innerText = 'header'
  dom.append(header)
}

// content.js
var Content = function () {
  var dom = document.querySelector('#wrap')
  var content = document.createElement('div')
  content.innerText = 'content'
  dom.append(content)
}

// index.js
new Header()
new Content()
解决办法

优点：1、引入了1个js文件。2、index.js就能看出文件依赖关系。3、import会前置，所以没有顺序之说。
缺点：import模块引入方式不能被浏览器识别，这时候就需要webpack将js翻译成浏览器可以识别的代码

1
2
3
4
5
6
7
8
9
10
11
// index.html
<div id="wrap"></div>
<script src="index.js"></script>

// index.js
// ES module 模块引入方式
import Header from 'header.js'
import Content from 'content.js'

new Header()
new Content()

什么是webpack

webpack是模块打包工具

阅读英文官网

模块化概念
引入导出语法
常用配置
配置

webpack环境

webpack是基于node.js开发的环境打包工具，它本质是用node实现。所以要安装node.js
检查是否安装：npm -v; node -v
提高webpack的打包速度有2点：保持node.js版本最新和webpack版本最新。

webpack使用步骤

npm init -y

以node规范的形式创建一个项目

在项目里安装webpack

npm i -D webpack webpack-cli // webpack-cli 保证我们能再命令行里使用webpack命令
npx webpack -v // 查看webpack版本

翻译index.js
1
2
npx webpack index.js; // npx表示执行node-module的包，所以npx webpack表示执行node-module的webpack
// 这里默认引入webpack的打包配置，打包的是index.js文件