弯道超车 · 前端工程化-阿南达文事网

弯道超车 · 前端工程化

在写前端项目的时候，大多数团队项目整体框架是由比较资深的开发工程师搭建的，对于平时写业务的同学接触的比较少，这就导致很难看到项目的整体流程。如果让你从 0 开始构建一个完整的项目，你能够做到吗？其实构建一个完整的前端项目并不是有多难，就看你有没有心思琢磨这方面的知识。

前端为啥需要打包？不打包可不可以？

在前端开发中，你会发现开发时的代码和线上运行的代码是完全不同的，这种差异的出现的原因，我觉得有两点：

1、提升开发体验，比如解决前端模块化问题，浏览器适配问题；

2、性能优化，比如压缩图片、压缩 JS 代码；

万事总归有个原因，也就是不管什么框架的出现，最初的想法都是为了解决某些开发痛点。为解决以上问题 webpack 就出现了，当然还有其它打包工具比如 fis、rollup、gulp 等等。当前最火的当然是 webpack，我来聊一聊 webpack。

目前一个项目中基本都能看到 webpack 的身影。下面我们简单体验一下 webpack。创建一个项目 suyan，最终结构如下：

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>素燕</title>
</head>
<body><h1>欢迎来到 Vue 虚拟实验室</h1><p>今天学习 webpack</p><script src="./src/index.js"></script>
</body>
</html>

src/index.js

import {add} from './utils';function addComponent() {console.log(add);let sum = add(20, 30);const element = document.createElement('div');element.innerHTML = sum;return element;
}
document.body.appendChild(addComponent());

src/utils.js

function add(a, b) {return a + b;
}module.exports = {add
}

当用浏览器打开项目的时候，会提示下面的错误信息：

这个错误的意思是在浏览器中不能使用 import，如果想让浏览器支持 import，在使用 script 标签的时候，需要加上 type="moudle"，但是并不是所有的浏览器都能支持，我们用 webpack 来解决这个问题。

1、安装 webpack

在项目 suyan 的根目录执行：

npm install webpack webpack-cli --save-dev

安装完 webpack 后，在项目的根目录会发现多了一个 package.json 文件：

{"name": "suyan","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","devDependencies": {"webpack": "^4.42.1","webpack-cli": "^3.3.11"},"dependencies": {}
}

在 devDependencies 中发现安装了 webpack 和 webpack-cli。

2、使用 webpack 进行打包

执行命令：npx webpack

你会发现在项目根目录生成一个 dist 文件夹，包含了一个 main.js 文件。如果你不熟悉 npx 的命令，可以查一查它的作用。

当然可以修改 package.json 文件中的 scripts 属性，增加一个 build 属性，可以直接执行 npm run bulid 来进行打包。

"scripts": {"build": "webpack"
},

3、修改 index.html ，直接使用 main.js 这个文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>素燕</title>
</head>
<body><h1>欢迎来到 Vue 虚拟实验室</h1><p>今天学习 webpack</p><script src="./dist/main.js"></script>
</body>
</html>

4、使用浏览器打开这个页面，结果如下：

到此一个普通的项目既可以使用 webpack 进行打包了，几乎是 0 配置，但是在大型项目中，需要一个配置文件来保存 webpack 打包时需要的内容。

5、添加配置文件

在项目的根目录下创建 webpack.config.js 文件，具体内容如下：

const path = require('path');module.exports = {mode: 'development',entry: './src/index.js', // 入口output: { // 出口filename: 'main.js',path: path.resolve(__dirname, 'dist')}
}

修改 package.json 文件中的 scripts 属性：

  "scripts": {"build": "webpack --config webpack.config.js"},

到此你已经认识了 webpack 的基础知识，还有很多内容需要我们去掌握，比如 loader、资源的处理，插件。最后给大家推荐关键前端工程化的知识，写的比较好：

参考

推荐阅读：

精心推荐一些浏览器工作原理的资料