弯道超车 · 前端工程化

最新推荐文章于 2023-12-13 08:40:21 发布

lefex

最新推荐文章于 2023-12-13 08:40:21 发布

阅读量181

点赞数

本文链接：https://blog.csdn.net/lefex/article/details/105672305

版权

在写前端项目的时候，大多数团队项目整体框架是由比较资深的开发工程师搭建的，对于平时写业务的同学接触的比较少，这就导致很难看到项目的整体流程。如果让你从 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、资源的处理，插件。最后给大家推荐关键前端工程化的知识，写的比较好：

https://github.com/fouber/blog

参考

https://webpack.js.org/guides/getting-started/

推荐阅读：

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