为什么需要构建工具？
- 转换
ES6语法（浏览器对ES6的语法支持的不是很好） jsx转换（浏览器对框架性的语法糖支持的不好）CSS前缀补全/ 预处理器（less，scss）- 压缩混淆
- 图片压缩
前端构建的历程
grunt ：本质为Task render，将事件划分成一个个任务。在打包过程可以划分为：解析HTML，解析CSS，解析js等等，将输入的内容存储到本地磁盘的temp目录下，因为存在磁盘的写入的IO操作，导致打包的速度相对较慢。
glup：为了解决grunt打包慢的问题。出现了这种打包工具 glup，glup中有了一个文件流的概念，放在了内存中，下一个步骤可以直接使用上一个步骤的内存，加快了打包的速度（该阶段 百度推出fis3工具，管理力度较小，而且官方团队不再维护了，现阶段使用人也较少）
为什么选择webpack
- 从社区的活跃度
- 社区生态比较丰富（官方维护的插件也比较丰富）
- 配置比较灵活
- 官方更新迭代速度快
初识
webpack的配置文件 系统默认配置文件：webpack.config.js
可以通过 webpack --config 指定配置文件
module.export={
entry:'./src/index.js', // 打包的入口文件
output:'./dist/main.js', // 打包的输出
mode:'production', // 环境
module:{
rules:[ // Loader的配置
{test:/\.txt$/,use,'raw-loader'}
]
},
plugins:[ // 插件的配置
new HtmlwebpackPlugin({
template:'./src/index.html'
})
]
}
0配置的webpack：包含entry，output
module.export={
entry:'./src/index.js', // 默认
output:'./dist/main.js', // 默认
}
安装webpack
环境搭建：安装Node.js和NPM
- 安装nvm
curl -o- raw.githubusercontent.com/creationix/… | bash（curl安装）
wget -qO- raw.githubusercontent.com/creationix/… | bash（wget安装）
- 安装webpack 和 webpack-cli（4.0版本对二者进行分离，需要分别安装）
创建一个项目，并安装webpack和 webpack-cli
mkdir my-project
cd my-project
npm init -y
npm install webpack webpack-cli --save-dev
cd my-project./node_modules/.bin/webpack -v // 查看webpack的版本
文件内容 webpack.config.js
"use strict";
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "dist"),
filename: "bundle.js",
},
mode: "production",
};
文件内容 helloWord.js
export function helloWord() {
return "Hello webpack";
}
文件内容 index.js
import { helloWord } from "./helloword";
document.write(helloWord());
执行打包的脚本
./node_modules/.bin/webpack
结果生成了dist目录,想要查看效果，在dist的目录下创建一个index.html文件。文件的内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
<title>Document</title>
<script src="bundle.js"></script>
</head>
<body></body>
</html>
在浏览器中查看效果，可以看到网站的样式：
我们可以在package的里面配置script的方式来简化命令：
