前端工程化与webpack-CFANZ编程社区

一、什么是前端工程化？

模块化：js、css、资源的模块化
组件化：复用现有的UI结构、样式和行为
规范化：目录结构的划分、编码/接口/文档的规范化、GIt分支管理
自动化：自动构建、部署、测试

前端工程化是指：在企业级的项目开发中，把前端开发所需要的工具、技术、流程、经验等进行规范化、标准化。

前端工程化的解决方案例如：gulp、webpack、grunt、parcel

二、webpack的基本使用

1、什么是webpack？

概念：webpack是前端项目工程化的具体解决方案

功能：提供前端模块化开发的支持，以及代码压缩混淆、处理浏览器js的兼容性、性能优化等功能

2、webpack的安装

cnpm install webpack -g

或者指定webpack版本

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

3、webpack的配置

① 在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化一下配置；

//使用node的语法，向外导出一个webpack配置对象
module.exports = {
  //webpack的运行模式，可选值development和production
  //developemnt开发模式打包速度快，production上线模式包体积小
  mode:'development'
}

② 在package.json的scripts节点下，新增dev脚本如下：

"scripts":{
  //运行时就可以，用npm run dev 来启动
  "dev":"webpack"
}

③ 在终端运行命令 npm run dev ,启用webpack进行项目打包构建

4、指定打包文件和输出路径

webpack4和5默认打包src下的index,js文件，默认输出在dist文件夹下main.js。

若要指定打包文件和输出路径，则可以在webpack.config.js中配置

const path = require('path')

module.exports = {
   mode:'development',
   //指定处理哪个文件
   entry: path.join(__dirname,'./src/index1.js'),
   //指定输出位置和文件名称
   output: {
       path: path.join(__dirname,'dist'),
       filename:'bundle.js'
   }
}

三、wbepack中的插件

1、安装配置webpack-dev-server

目的：监听源代码，自动打包和构建

安装命令：

npm install webpack-dev-server@3.11.2 -D

配置：

"scripts":{
  //在之前的基础上，加上serve
  "dev":"webpack serve"
}

再npm run dev即可，此时程序员修改时，webpack就能及时的自动打包了。

此时生成的打包文件在内存里，而没有放到物理磁盘

2、安装html-webpack-plugin

目的：解决打开loaclhost一开始没有加载到index页面，因此可以复制一份index..html到根目录

命令：

npm install html-webpack-plugin@5.3.2 -D

//1、导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

//2、创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
   template:'./src/index.html',    //指定要复制的原文件的路径
   filename:'./index.html'         //指定生成的文件的存放路径
})

module.exports = {
  mode:'development',
  //3.插件的数组，webpack运行时，会调用这些插件
  plugin:[htmlPlugin]
}

3、devServer节点

module.exports = {
  mode:'development',
  devServer:{
    open:true, //初次打包后，自动打开浏览器
    host:'127.0.0.1' //实时打包所使用的主机地址
    port:80 //打包的端口号，打开页面时端口号为80时自动省略
  }
}

四、webpack中的loader加载器

目的：由于webpack默认只能处理.js文件，其他文件打包则会报错，所以需要loader加载器才可以正常打包！

loader的作用：协助webpack打包处理特定的文件模块

css-loader：.css相关文件
less-loader: .less相关文件
babel-loader：webapck无法处理的高级JS语法

1、打包处理css文件

① 安装命令：

npm i style-loader@3.0.0 css-loader@5.2.6 -D

② 配置

在webpack.config.js中添加loader规则如下：

module: {//所有第三方文件模块的匹配规则
    rules: [//文件后缀名的匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
}

test表示匹配的文件类型，use表示对应的loader

loader的加载，是从后往前加载的，例如上面是先加载css，再加载style

2、打包处理less文件

① 安装命令：

npm i less-loader@10.0.1 less@4.1.1 -D

② 配置

也是在webpack.config.js中添加loader规则如下：

module: {//所有第三方文件模块的匹配规则
    rules: [//文件后缀名的匹配规则
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
    ]
}

3、打包处理样式表中的url路径相关文件

小案例：base64图片加载问题

用base64代替文件路径的好处，就是可以减少发起的请求，提高性能。

安装命令：

npm i url-loader@4.1.1 file-loader@6.2.0 -D

配置：

module: {//所有第三方文件模块的匹配规则
    rules: [//文件后缀名的匹配规则
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229' }
    ]
}

limit用来指定图片的大小，单位是字节

只有小于等于limit的图片，才会被转化为base64格式

4、babel-loader转化处理高级的js语法

例如装饰器的使用就属于高级js语法。

① 安装

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

② 配置

也是在webpack.config.js中添加loader规则如下：

module: {//所有第三方文件模块的匹配规则
    rules: [//文件后缀名的匹配规则
      //注意：必须使用exclude排除项，因为node_modules目录下的第三方不需要打包
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
}

在根目录下，新建一个配置文件babel.config.js,内容如下：

module.exports = {
   //声明babel插件
   plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}

五、打包发布

1、打包

在package.json中：

"scripts":{
  "dev":"webpack serve" //开发环境中，运行dev命令
  "build": "webpack --mode production" //项目发布时，运行build命令
}

再npm run build 即可，生成的文件在dist中

2、优化js和图片的存放路径

上面生成的文件是随意放在dist中，没有分类。

添加js文件夹，可在output中filename加个js

module.exports = {
   output: {
       path: path.join(__dirname,'dist'),
       filename:'js/bundle.js'
   }
}

添加images文件夹，加上&outputPath=images

module: {//所有第三方文件模块的匹配规则
    rules: [//文件后缀名的匹配规则
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images' }
    ]
}

3、自动清理dist目录下的旧文件

为了每次打包发布时自动清理掉dist目录中的旧文件，安装并配置clean-webpack-plugin插件：

webpack很多配置都可以在官网查看代码 npmjs

npm install clean-webpack-plugin@3.0.0 -D

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    plugins: [
        htmlPlugin,
        new CleanWebpackPlugin(),
    ],
};

六、Source Map

1、什么是source map？

它是一个信息文件，存储着位置信息。

代码出错后，直接显示原始代码，而不是转换后的代码，方便调试。

只需要在webpack.config.js中，加上 devtool: 'eval-source-map'

module.exports = {
    mode: 'development',
    //此选项生成的source map能够保证 "运行时报错的行数" 和 "源代码的行数" 一致
    devtool: 'eval-source-map'
};

但是在打包时为了安全性还是把此语句注释掉，只在调试的时候用下。

但是实际开发中会用cli工具一键生成webpack，不需要我们自己配置。

本文借鉴b站课程而记录黑马程序员vue前端基础