【大前端】2. 前端工程化

前端工程化导学

webpack思维导图：

gulp思维导图：

自动化测试思维导图：

什么是前端工程化

前端工程化是指将前端开发的流程规范化、标准化，包括开发流程，技术选型，代码规范，构建发布等，用于提高前端开发工程师的开发效率和代码质量。

为什么要前端工程化

• 复杂度高：前端项目的多功能、多页面、多状态、多系统
• 规模大：团队开发，多人协作，代码质量管理
• 要求高：页面性能优化（CDN/异步加载/请求合并），兼容性，单页面应用，服务端渲染等等

怎么做到前端工程化

webpack

这里如果需要对webpack有更好的理解，我觉得是挺适合看下webpack面试高频点的，有助于建立整体的概念。下面推荐一篇关于这个的博客：Webpack 高频面试题汇总

核心概念

使用

mkdir webpack-learning && cd webpack-learning

# 初始化项目，生成package.json文件
npm init -y

# webpack开发依赖安装（yarn add webpack webpack-cli -D）
npm install webpack webpack-cli -D

# 查看webpack版本（npx webpack --version）
.\node_modules\.bin\webpack --version 
# webpack 5.27.0
# webpack-cli 4.5.0

# 配置webpack
vim webpack.config.js

下面放上我的webpack配置，增加了vue单文件的编译和样式图片的处理。

具体demo请看: https://gitee.com/cheerfulion/my_public_demos/tree/master/webpack_learning

// webpack.config.js
const path = require('path')  // nodejs中的路径模块
// 导入插件，返回一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderLibPlugin = require('vue-loader/lib/plugin')

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

// webpack v5 自带， v4需要安装。关于插件的更多配置请看官方文档：https://webpack.docschina.org/plugins/terser-webpack-plugin/
const TerserJSPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

const webpack = require('webpack')

module.exports = {
	// 编译模式(会修改process.env.NODE_ENV的值，并启用对应的webpack官方的插件)
	mode: 'production',   // development production
	entry: path.join(__dirname, './src/index.js'), // 入口文件
	output: {
		path: path.join(__dirname, './dist'), // 输出文件存放路径
		filename: 'bundle.js' // 输出文件名称
	},
	optimization: {
		// TerserJSPlugin: 压缩JS
		// OptimizeCSSAssetsPlugin: 压缩CSS
		minimize: true,
		minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
	},
	plugins: [
		// 把index放到项目根目录中
		new HtmlWebpackPlugin({
			template: './src/index.html',
			filename: 'index.html'
		}), 
		// 打包vue单文件组件
		new VueLoaderLibPlugin(),
		// 引用HMR插件，修改js代码的时候自动刷新页面
		new webpack.HotModuleReplacementPlugin(),
		// 清除打包文件(除了编译后的文件，其他都会被删除，不信的话就往dist目录加几个其他文件运行webpack打包)
		new CleanWebpackPlugin(),
		// 拷贝文件(这里是从from指定的文职拷贝到打包文件夹的to位置)
		new CopyWebpackPlugin([
			{
				from: path.join(__dirname, 'src/images/'),
				to: 'assets'
			}
		]),
		// 把css提取出来，单独放到一个文件里面来引入到html里面
		new MiniCssExtractPlugin({
			filename: '[name].css',
			chunkFilename: '[id].css'
		})
	],
	module: {
		rules: [
			// 注意：loader是倒序加载，流水线处理
			// MiniCssExtractPlugin.loader取代style-loader
			// style-loader是将样式写到style标签内，而MiniCssExtractPlugin.loader将样式写到一个文件内通过link引入
			{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] },
			{ test: /\.less/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] },
			// 注意：sass文件的后缀是scss
			{ test: /\.scss/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] },
			{ 
				test: /\.jpg|png|gif|bmp|svg|ttf|eot|woff|woff2$/,
				// limit用来指定文件的大小，只有小于limit大小的图片才会被转成base64图片
				// use: 'url-loader?limit=16940&esModule=false'  
				// https://blog.csdn.net/simper_boy/article/details/103455444
				use: 'url-loader?limit=16940&esModule=false'
			 },
			 // exclude 为排除项，表示不需要处理的js文件位置
			 { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
			 { test: /\.vue$/, use: 'vue-loader' },
		]
	},
	devServer: {
		hot: true
	}
}

// package.json
{
  "name": "webpack_learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888",
    "build": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/runtime": "^7.9.2",
    "autoprefixer": "^9.7.6",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.0.0",
    "css-loader": "^2.1.0",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^1.3.9",
    "node-sass": "^4.13.1",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.3.1",
    "style-loader": "^0.23.1",
    "url-loader": "^4.1.0",
    "vue-loader": "^15.9.1",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.10.3"
  }
}

好文摘录

# 什么是 webpack

webpack 是个静态模块打包工具。在 webpack 看来，项目里所有资源皆模块，利用资源依赖关系，把各模块之间关联起来。
简单讲就: webpack 对有依赖关系的多个模块文件进行打包处理后，生成浏览器可以直接 高效运行的资源。
通过 入口文件 开始，利用 递归 找到直接依赖或间接依赖的所有模块，并在内部构建一个能映射出项目所需的所有模块的 依赖图，并进行 webpack 打包生成一个或多个 bundle 文件。

打包是用的 webpack 命令即：npm webpack
从 webpack 4.x 开始，把 webpack 拆成 webpack 和 webpack-cli 两部分，分工如下：
webpack： 负责 Js 的打包工作
webpack-cli：解析 webpack 命令，命令内部使用 webpack 的功能
并且 webpack 能解析打包各种模块规范的 Js 代码，包括：ES6、Commonjs、AND/Requirejs 以及 CMD/Seajs。

优点

1. 专注于处理模块化的项目，能做到开箱即用，一步到位
2. 可通过 plugin 扩展，完整好用又不失灵活
3. 使用场景不局限于 web 开发
4. 社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展
5. 良好的开发体验

缺点

只能用于采用模块化开发的项目

# 什么是 loader ? 什么是 plugin ?

loader：模块转换器，webpack 将一切文件视为模块，但 webpack 只能解析 JavaScript 文件，而 loader 作用是让 webpack 拥有了加载 和 解析非 JavaScript 文件的能力。

plugin：在 webpack 构建流程中的特定时机注入扩展逻辑，让它具有更多的灵活性。在 webpack 运行的生命周期中会广播出许多事件，plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出结果。

用法的区别：

Loader 在 module.rules 中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）
Plugin 在 plugins 中单独配置。 类型为数组，每一项是一个 plugin 的实例，参数都通过构造函数传入。

# 有哪些常见的 Loader ？他们是解决什么问题的？

file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
source-map-loader：加载额外的 Source Map 文件，以方便断点调试
image-loader：加载并且压缩图片文件
babel-loader：把 ES6 转换成 ES5
css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
eslint-loader：通过 ESLint 检查 JavaScript 代码
svg-inline-loader：将压缩后的 SVG 内容注入代码中
json-loader : 加载 JSON 文件（默认包含）
ts-loader : 将 TypeScript 转换成 JavaScript
awesome-typescript-loader：将 TypeScript 转换成 JavaScript，性能优于 ts-loader
sass-loader：将 CSS 代码注入 JavaScript 中，通过 DOM 操作去加载 CSS
postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀
tslint-loader：通过 TSLint检查 TypeScript 代码
vue-loader：加载 Vue.js 单文件组件

# 有哪些常见的 Plugin？他们是解决什么问题的？

define-plugin：定义环境变量
commons-chunk-plugin：提取公共代码
terser-webpack-plugin : 支持压缩 ES6 (Webpack4)
ignore-plugin：忽略部分文件
html-webpack-plugin：简化 HTML 文件创建 (依赖于 html-loader)
web-webpack-plugin：可方便地为单页应用输出 HTML，比 html-webpack-plugin 好用
mini-css-extract-plugin : 分离样式文件，CSS 提取为独立文件，支持按需加载
serviceworker-webpack-plugin：为网页应用增加离线缓存功能
clean-webpack-plugin : 删除打包文件
happypack：实现多线程加速编译

# 如何利用 webpack 来优化前端性能？

用 webpack 优化前端性能是指优化 webpack 的输出结果，让打包的最终结果在浏览器运行快速高效。

1.压缩代码。删除多余的代码、注释、简化代码的写法等等方式。
用 UglifyJsPlugin和ParallelUglifyPlugin 压缩JS文件
用 mini-css-extract-plugin 压缩 CSS

1. 利用 CDN 加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用 webpack 对于output 参数和各 loader 的 publicPath 参数来修改资源路径
2. 删除死代码。JS 用 Tree Shaking，CSS 需要使用 Purify-CSS
3. 提取公共代码。用 CommonsChunkPlugin 插件

# 分别介绍 bundle，chunk，module 是什么

bundle：是由 webpack 打包出来的文件，
chunk：代码块，一个 chunk 由多个模块组合而成，用于代码的合并和分割。
module：是开发中的单个模块，在 webpack 的世界，一切皆模块，一个模块对应一个文件，webpack 会从配置的 entry 中递归开始找出所有依赖的模块。

.说一下 webpack 的热更新原理吧

热更新又称热替换（Hot Module Replacement），缩写为 HMR，基于 webpack-dev-server。
当你对代码修改并保存后，将会对代码进行重新打包，并将改动的模块发送到浏览器端，浏览器用新的模块替换掉旧的模块，去实现局部更新页面而非整体刷新页面。

作者：酷酷的凯先生
链接：https://www.jianshu.com/p/216ed82a3e49
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

gulp

gulp flow

定义任务 → 输入文件 → 处理文件 → 输出 → 完成任务

使用

mkdir gulp-learning && cd gulp-learning

# 初始化项目，生成package.json文件
npm init -y

# gulp开发依赖安装（yarn add gulp -D）
npm install gulp -D

# 查看gulp版本
npx gulp --version
# CLI version: 2.3.0
# Local version: 4.0.2

# 配置gulp
vim gulpfile.js

下面放上我的gulp配置:

具体demo请看: https://gitee.com/cheerfulion/my_public_demos/tree/master/gulp_learning

// gulpfile.js

// 该变量的作用是使得引用其他插件更简单，如：plugins.uglify = require('gulp-uglify')
// 注意只能用其简写引用 gulp 开头的插件
const plugins = require('gulp-load-plugins')();
const del = require('del')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload

const {
    src,
    dest,
    series,
    watch
} = require('gulp')

// html处理（暂无处理）
function html(cb) {
    src('src/*.html')
        .pipe(dest('./dist'))
        .pipe(reload({
            stream: true
        }))
    cb();
}

// 压缩混淆js
function js(cb) {
    src('src/js/*.js')
        .pipe(plugins.uglify())
        .pipe(dest('./dist/js'))
        .pipe(reload({
            stream: true
        }))
    cb();
}

// 对scss/less编译，压缩，输出css文件
function css(cb) {
    src('src/css/*.scss')
        // 编译压缩sass样式
        .pipe(plugins.sass({
            outputStyle: 'compressed'
        }))
        // 给样式添加浏览器前缀
        // https://github.com/postcss/autoprefixer
        .pipe(plugins.autoprefixer({
            cascade: false,
            remove: false
        }))
        .pipe(dest('./dist/css'))
        .pipe(reload({
            stream: true
        }))
    cb()
}

// 监听文件变化, gulp.watcher无法监听新增加的文件，需要可以参考https://blog.csdn.net/guang_s/article/details/84672449安装使用gulp-watcher
function watcher(cb) {
    watch('src/*.html', html)
    watch('src/js/*.js', js)
    watch('src/css/*.scss', css)
    cb()
}

// 删除dist目录中的内容
function clean(cb) {
    // 注意：del是一个异步操作，返回promise，只有return之后，其他依赖clean的任务才能保证执行顺序
    return del('./dist', cb)
}

// server服务
function serve(cb) {
    browserSync.init({
        server: {
            baseDir: './dist'
        }
    })
    cb()
}

exports.scripts = js
exports.styles = css
exports.clean = clean
exports.default = series([
    clean, html, js, css, serve, watcher
])

// 【重要！！！】这里给自己一个任务，给angularjs配置gulp工程化
// 可参考：https://segmentfault.com/a/1190000007445150

// package.json

{
  "name": "gulp_learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "gulp"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.14",
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-load-plugins": "^2.0.6",
    "gulp-sass": "^4.1.0",
    "gulp-uglify": "^3.0.2"
  },
  "browserslist": [
    "last 2 Version", 
    "> 2%"
  ]
}

Yoeman

快速形成工程化项目，达到脚手架作用

npm install -g yo

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/6d298638.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！