前端工程化 Webpack基础

前端工程化

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

webpack

• 前端项目工程化的具体解决方案
• 提供友好的前端模块化开发支持，以及代码压缩混淆、处理js兼容性、性能优化等强大功能

安装

• 初始化项目
  npm init -y
• 安装
  npm install webpack webpack-cli --save-dev
• 根目录创建webpack配置文件 webpack.config.js

// webpack.config.js module.exports = {     ... } 

webpack.config.js 配置

1.mode模式

• development
  • 开发环境
  • 不会对打包生成的文件进行代码压缩和性能优化
  • 打包速度快
• production
  • 生产环境
  • 会对打包生成的文件进行代码压缩和性能优化
  • 打包速度慢

module.exports = {     mode: 'development' } 

2.出入口文件

• entry 打包文件入口，默认为：src/index.js
• output 打包文件输出，默认为： dist/main.js

const path = require('path') module.exports = {     entry: path.join(__dirname, './src/index.js'),   // 入口文件     output: {         path: path.join(__dirname, './dist'),        // 输出目录         filename: 'bundle.js'                        // 输出文件     } } 

3.loader加载器

webpack文件加载器，webpack默认只能打包处理.js文件，其他非.js后缀文件需要loader加载器处理完成后才能进行打包

3-1. less, css等样式文件处理

• 依赖安装 npm install style-loader css-loader less-loader --save-dev
• rules配置添加规则: test表示匹配文件类型，use表示要调用的loader，调用顺序为从后往前

module.exports = {     rules: [         { test: /.css$/, use: ['style-loader', 'css-loader'] },    // css文件处理         { test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },    // less文件处理     ] } 

3-2. url路径相关文件处理，如图片、字体文件、csv、xml文件等

• 依赖安装 npm install url-loader file-loader csv-loader xml-loader --save-dev
• url-loader参数：limit指定图片大小，单位为Byte，<=limit大小图片，才会被转为base64格式图片
• 参数配置为url参数与与options对象两种形式

module.exports = {     rules: [         // url参数形式配置         { test: /.jpg|png|gif$/, use: 'url-loader?limit=10000' },         // url参数options形式配置         {             test: /.jpg|png|gif$/,             use: {                 loader: 'url-loader',                 options: {                      limit: 10000,                     outputPath: 'image'       // 明确指定打包生成的图片文件存放到dist目录下的image文件夹中                 }             }         },         // 字体文件         {             test: /.(woff2?|eot|ttf|otf)(?.*)?$/,             use: {                 loader: 'url-loader',                 options: { limit: 10000 }             }         },         // csv文件         {             test: /.(csv|tsv)$/i,             use: {                 loader: 'csv-loader'             }         },         // xml文件         {             test: /.xml$/i,             use: {                 loader: 'xml-loader'             }         }     ] } 

3-3. js高级语法处理

• 依赖安装 npm install ... --save-dev

• babel配置比较灵活且复杂，可查看babel中文文档
• 配置举例

module.exports = {     rules: [         {             test: /.js$/,             use: {                 loader: 'babel-loader',                 options: {                     // 设置预定义环境                     presets: [                         [                             '@babel/preset-env',    // 指定环境的插件                             // 配置信息                             {                                 // 兼容的浏览器目标版本                                 targets: {                                     'chrome': '58',                                     'ie': '11'                                 },                                 // 指定core.js版本                                 'corejs': '3',                                 // 使用corejs方式 'usage':按需加载                                 'useBuiltIns': 'usage'                             }                         ]                     ]                 }             }         }     ] } 

4.webpack-dev-server

• webpack 开发环境http服务器
• 安装 npm install webpack-dev-server --save-dev
• package.json配置scripts

"scripts": {     "dev": "webpack serve" } 

• 启动 npm run dev
• webpack配置文件devServer节点

module.exports = {     devServer: {         open: true,             // npm run dev后，自动打开浏览器         host: '127.0.0.1',      // 主机地址         port: 8080              // 端口号，默认为8080     } } 

5.插件

• html-webpack-plugin 自定义输出index.html内容，会将打包好的bundle.js自动注入index.html的底部
  • 安装 npm install html-webpack-plugin --save-dev
  • plugins节点引入

const HtmlWebpackPlugin = require('html-webpack-plugin')  module.exports = {     plugins: [         new HtmlWebpackPlugin({             template: './src/index.html'   // 指定入口自定义的html文件         })     ] } 

• clean-webpack-plugin 打包时自动清理dist目录旧文件插件
  • 安装 npm install clean-webpack-plugin --save-dev
  • 引入

const CleanWebpackPlugin = require('clean-webpack-plugin') module.exports = {     plugins: [         new CleanWebpackPlugin()     ] } 

6.SourceMap

• 存储代码压缩混淆前后的对应关系文件
• 代码出错时，可以通过对应关系，直接显示原始代码出错位置，方便后期调试
• sourceMap选项很多，具体可参考webpack devtool sourcemap
• 常用选项为: source-map inline-source-map eval-source-map

module.exports = {     // eval-source-map 使"运行报错的行数"与”源代码行数“保持一致，但性能较低     devtool: 'eval-source-map' } 

• 实践建议
  • 开发环境建议设置为 eval-source-map，可以精准定位到具体的错误行
  • 生成环境建议关闭sourceMap，或者设置值为 nosources-source-map，防止源码泄露，提高安全性

打包发布

• package.json配置scripts

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

• 打包 npm run build

摘要

更多配置可查看官方文档

• webpack中文文档
• babel中文文档