Appearance
什么是 webpack
webpack 可以看做一个模块打包机，它做的事情是，分析你的项目架构，找到 JavaScript 模块以及其他的一些浏览器不能直接运行的拓展语言 (scss、typeScript 等），并将其打包为合适的格式以供浏览器使用。
可以做的事情
代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布
需要提前掌握的内容
- 需要 node 基础、以及 npm 的使用
- 掌握 es6 语法
为什么需要构建工具
转换 es6 语法
转换 jsx
css 前缀补全 / 预处理器
压缩混淆
图片压缩
前端构建的演变之路
ant + YUI Tool -> grunt -> fis3/glup -> rollup/webapck/parcel
webpack 安装
安装本地的 webpack
webpack webpack-cli -D
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --D
mkdir src
1
2
3
4
2
3
4
实践后发现首次打包必须新建 src 目录
查看 webpack 版本
./node_modules/.bin/webpack -V
1
webpack 可以进行 0 配置
1 打包工具 -> 输出后的结果 (js 模块）
这时候的目录结构是这样的
webpack-demo
|- package.json
+ |- /src
+ |- index.js
1
2
3
4
2
3
4
这时候我们在 index.js 中写一个
console.log("打印日志")
1
输入指令
npx webpack
1
npx 的作用如下：
默认情况下，首先检查路径中是否存在要执行的包（即在项目中）
如果存在，它将执行；
若不存在，意味着尚未安装该软件包，npx 将安装其最新版本，然后执行它；
目录发生了变化
webpack-demo
|- package.json
+ |- /dist
+ |- main.js
|- /src
|- index.js
1
2
3
4
5
6
2
3
4
5
6
我们就可以打包后的文件出现在了 dist 目录下
打包（支持我们的 js 的模块化）
为了方便工程化的 js
使用 module.exposts 抛出
module.exports = {
a: 1
}
1
2
3
2
3
使用 require 的方式接受参数
let str = require('./a.js')
1
手工配置 webpack
默认配置文件名字 webpack.config.js
初始 webpack 配置文件名称
webpack 配置文件 webpack.config.js
可以通过 webpack --config 指定配置文件
新建一个 webpack.config.js
// webpack 是node写出来的 node的写法来运行
let path = require('path');
module.exports={
mode: 'development', // 模式(环境) 默认两种 production development
entry:'./src/index.js', // 入口 指定默认的entry为 './src/index.js'
output:{
filename:'bundle.js', // 打包后的文件名
path: path.resolve(_dirname,'dist'), //路径必须是一个绝对路径
}, // 导出默认 './dist/main.js'
modlue:{
rules:[ // loader配置
{text:/.txt$/,use:'raw-loader'}
],
plugins:[ // 插件配置
new HtmlwebpackPlugin({
template:'./src/index.html'
})
]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
那么这样你就可以打包到 dist 下叫做 budle 的名称了
npx webpack
./node_modules/.bin/webpack
都可以打包出webpack
1
2
3
4
2
3
4
如果在 packjson 中加入 build，也可以进行打包
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16