前端--阶段笔记（五）前端工程化

关注

原创最新推荐文章于 2026-06-11 13:01:05 发布 649 阅读 AI 写同款· GEO 优化 ›

前端工程化详解——理解与实践前端工程化 前端工程化一直是一个老生常谈的问题，不管是面试还是我们在公司做基建都会经常提到前端工程化，那么为什么经常会说到前端工程化，并没有听过后端工程化、Java工程化或者Python工程化呢？我们理解的前端工程化是不是一直都是Webpack的性能调优，或者是一个cli工具呢？今天我们带着问题来一起寻找一下答案吧！阅读详情

前端工程化

webpack

如果手动开发前端，需要一个一个凑各种文件。

实际的前端开发：

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

前端工程化，就是要实现以上四个现代化。

文件依赖关系复杂，静态资源请求效率低，模块化知识

webpack是前端项目构建工具（打包工具），提供了模块化支持，代码压缩混淆，处理js兼容问题，性能优化等。程序员集中在具体功能实现上。

webpack.config.js是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

使用：

1 .运行npm install webpack webpack-cli -D命令安装webpaclk相关包

2 .项目根目录中创建名为webpack.config.js的webpack配置文件。

3 .在webpack的配置文件初始化一下配置：

module.exports = {
mode:'development'//mode用来指定构建模式，
  //开发中使用dev模式，上线使用 production
}

4 .在package.json 配置文件中的scripts节点下，新增dev脚本：

npm run dev.即可执行这个脚本。webpack是本体不能改，dev是名字可以随便改。

"scripts":{
  "dev":"webpack"//script节点下的脚本可通过npm run执行。
}

5 .终端中运行 npm run dev命令来启动webpack打包项目。

修改打包出入口

const path = require('path')

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

常用插件

常用的有两个：1 webpack-dev-server ，用于自动打包，2 html-webpack-plugin ，html插件，可用于定制index,html页面内容。

1 webpack-dev-server 只要修改了源码就自动打包和构建。文件生成到内存中。
webpack-dev-server的使用步骤：

1 安装：npm install webpack-dev-server -D
2 配置：将dev命令改为"dev":"webpack serve"
3 查看：http://localhost:8080

注意：实时打包生成的文件存放在内存中，无法在磁盘上找到。可以被访问到，如：http://localhost:8080/bundle.js

2 html-webpack-plugin ，webpack中的html插件，可用于定制index.html页面内容。
使用步骤：

1 安装：npm i html-webpack-plugin -D
2 导入：const HtmlPlugin = require('html-webpack-plugin')

3 创建实例对象：

const htmlPlugin = new HtmlPlugin({
  //指定源文件独立与生成文件的路径
    template: './src/index.html',
    filename: './index.html'
})

4 挂载实例对象

module.exports = {
    mode: 'development',
    plugins:[htmlPlugin]
}

注意：复制出来的index首页放进内存中，不能在目录树中找到。插件生成的index.html首页的底部已经生成了导入bundle.js的代码

其他设置

//devServer节点写在webpack.config.js里面,与module节点平级
plugins:[htmlPlugin],
devServer:{
        open:true,
        host:'127.0.0.1',
        port:80
    }

loder加载器

webpack只能处理js文件，不能处理其他。需要调用loader加载器才能正常打包。
css-loader和less-loader打包处理css与less文件。
babel-loader打包处理webpack无法处理的高级语法。

1 css-loader

1 安装：npm i style-loader@2.0.0 css-loader@5.0.1 -D
2 配置：在module.exports中，声明 module: {rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }]}

注意：use数组中的顺序是固定的，只能从后往前调用。

设置要生效需要重启自动打包服务。

2 less-loader

1 安装：npm i less-loader less -D

2 配置：在module.exports中，声明

module: {rules: [ { test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] }]}

使用之前需要在js中导入：import './css/index.less'

3 url-loader

打包处理样式表中与url路径有关的文件。如png jpg gif等。

1 安装：npm i url-loader@4.1.1 file-loader@6.2.0 -D
2 配置：{ test: /\.jpg|png|gif/, use: 'url-loader?limit=22229'}
？后面是loader的参属项，单位为byte，只有小于这个值的才会被转为base64。

小图片可以考虑转为base64，大图不要转。

4 打包处理高级JS语法

借助babel-loader处理高级语法。

包名：babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1

webpack.config.js中的module -> rule数组中，添加

{ test: /\.js$/, //exclude为排除项目，这里不编译node_modules下的js文件
  exclude: /node_modules/, 
  //指定使用babel-loader
  use: { 
  	loader: 'babel-loader', 
  //参数项目，使用babel-loader调用此插件，此插件用来处理转化class中的高级语法
 	 options: { plugins: ['@babel/plugin-proposal-class-properties'] } } }

打包发布

1 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件开发环境下，
2 打包生成的文件不会进行代码压缩和性能优化
为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。

步骤：

1 在package.json文件中的，script节点下，新增命令：

 "scripts": {
    "build":"webpack --mode production"
  }

–mode 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。注意：–mode 优先级较高，通过 --mode 指定的参数项，会覆盖 webpack.config.js 中的 mode选项。这里已经修改为了生产环境，不是开发环境。

运行npm run build 命令后，会在文件夹下生成dist目录，内部存放的是发布所需的文件。

归纳不同文件，使得js文件放入js文件夹,png等放入png文件夹

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

    module: {
        rules: [
            {
                test: /\.jpg|png|gif/, use: {
                    loader: 'url-loader',
                    options: {
                        limit: 22228,
                        outpath: 'image'
                    }
                }
            },
          ]
    }

自动清理打包过程的旧文件

安装 clean-webpack-plugin 插件。

1 安装：npm i clean-webpack-plugin -D
2 导入：const {CleanWebpackPlugin}= require ('clean-webpack-Plugin')
3 创建实例：const cleanPlugin = new CLeanWebpackPlugin()
4 把实例放入plugins: [htmlPlugin]

企业级项目非常复杂，后续vue项目中会讲。

source Map

代码上线前会进行混淆压缩。出错后debug是非常困难的。无法定位。

Source Map 就是一个信息文件，里面储存着位置信息，即Source Map 文件中存储着代码压缩混淆前后的对应关系。
出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

开发环境下， webpack.config.js 中添加如下的配置，可保证运行时报错的行数与源代码的行数保持一致：

module.exports = {
  devtool:'eval-source-map'
}

在生产环境下，需要省略 devtool 选项，生成的文件中不包含 Source Map。如果只想定位报错的具体行数，且不想暴露源码。此时可以将 devtool 的值设置为 nosources-source-map。如果想在定位报错行数且展示具体报错的源码。此时可以将 devtool 的值设置为 source-map。采用此选项后：应该将你的服务器配置为，不允许普通用户访问 source map 文件。

收录于