这是我参与 [第五届青训营] 伴学笔记创作活动的第5天
前端工程化
所谓前端工程主要指从开发到部署线上再到后期迭代维护到这一整个过程，目的是提高前端开发效率，提高前端应用的可扩展性、可维护性等性能。
随着前端的发展，业务越来越复杂，需要团队化、模块化的开发。前端需要模块化的打包工具，将各部分打包为整体。
webpack的出现
一个前端项目通常由各种资源组成，如png，jpg，gif，js，css，scss等等
在页面中手动引入、管理这些资源，当资源过多时管理会非常困难，限制了页面规模以及前端发展。
webpack是一个编译及打包工具，将各个资源编译好后打包为一个文件。它使得可以在项目中使用es6代码和es6模块化。
loader与plugin
- loader即预处理器。webpack 自身只理解 js，为了让其可以处理非js文件， 可以使用loader 将所有类型的文件转换为 webpack 能够处理的有效模块
- 插件则可以用于执行比loader范围更广的任务。插件可以预设网页模板、打包优化和压缩等等。插件功能强大，可以用来处理各式任务
基础使用
安装
使用如下命令
npm i webpack webpack-cli --save-dev
1.基础配置
1.在项目根目录下创建 webpack.config.js 配置文件
2.在项目根目录下创建src文件夹，将项目文件放进去；（可选：在根目录创建dist文件）
3.设置入口 entry 和出口 output
//webpack配置需使用CommonJs语法
const path = require('path');
//导出配置信息
module.exports = {
mode: 'development', //开发模式 可配合一些开发插件
entry: path.join(__dirname, 'src', 'test1.js'), //入口
output: { //出口
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
}
}
2.使用命令打包
下载 webpack-cli 后可以输入命令 npx webpack 打包
或者使用 package.json 配置文件配置自定义命令
//package.json
"scripts": {
"build": "webpack"
},
//终端
npm run build
进阶配置
webpack.config.js中的各个配置项：
module.exports = {
entry: '', // 入口文件
output: {}, // 出口文件
devtool: '', // 错误映射 （source-map）
mode: '', // 模式配置 （production / development ）
module: {}, // 处理对应模块 （对文件做些处理）
plugins: [], // 插件 （压缩/做其他事情的）
devServer: {}, // 开发服务器配置
optimization: {}, // 压缩和模块分离
resolve: {}, // 模块如何解析，路径别名
...
}
HtmlWebpackPlugin
生成打包后的html
安装：npm install html-webpack-plugin --save-dev
使用：
先引入 const HtmlWebpackPlugin=require('html-webpack-plugin');
再在配置中的 plugins加入
//webpack配置需使用CommonJs语法
const path = require('path');
//引入HtmlWebpackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//...
plugins: [ //插件配置
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'), //模板文件
filename: 'index.html',
})
]
//...
}
清除插件CleanWebpackPlugin
将上一次的打包文件清除
安装：npm install clean-webpack-plugin --save-dev
使用：
先引入
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
再在配置中的 plugins加入
plugins: [
// 清除dist文件夹
new CleanWebpackPlugin(),
]
更方便的用法：直接在output里加上 clean: true
output: { //出口
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
clean: true
}
热更新webpack-dev-server
修改代码后，即时到打包后的效果 原理是将打包文件加载在内存中 即使真实打包文件被删除，依然存在且有效果
安装：npm install webpack-dev-server --save-dev
使用：
在配置中加入 devServer属性
module.exports = {
//...
devServer: { //热更新
static: {
directory: path.join(__dirname, 'dist') //静态资源目录
},
port: 8000, //服务开启端口
hot: true, //热更新
open: false,
}
//...
}
命令行：
npx webpack-dev-server 加上 --open 可以直接打开网页
或者使用 package.json 配置文件配置自定义命令
//package.json
"scripts": {
"build": "webpack",
"dev":"webpack-dev-server"
},
//终端
npm run dev
使用 npx webpack --watch 可以实现dist的热更新 配合 live server 可以不使用 webpack-dev-server
babel 兼容
在打包时将es6+语法改为兼容性的语法
Babel自身配置见 前端模块化 笔记
webpack 中的配置：
在配置项 module 中的 rules 数组加新规则
module.exports = {
//...
module: { // 处理对应模块 （对文件做些处理）
rules: [ //规则
{
test: /\.js$/, //匹配 需要处理文件的后缀
loader: ['babel-loader'], //加载了什么loader
include: path.join(__dirname, 'src'), //要处理那些范围内的文件
exclude: /node_modules/ //不要处理那些范围的文件
}
]
}
//...
}
使用 source map
可以在调试过程中 在打包后找到对用的 打包前的代码位置 方便纠错
在配置项中加入 devtool: 'inline-source-map'
module.exports = {
//...
devtool: 'inline-source-map',
//...
}
总结：
webpack是一个编译、打包工具，发展到现在它更成为了一个前端资源以及工具的统合中枢、粘合剂。可以将前端开发拆分为各个模块，与所需工具、资源打包为一个文件。webpack使得前端开发更工程化，提高了开发效率，可维护性。不过各类配置也加重了学习负担——不过理解这些配置，也能增长工程化认识和经验。
