webpack使用说明

webpack 是一个现代 JavaScript 应用程序的静态模块打包器,是前端工程化必不可少的工具之一,以下是我的学习笔记整理。

前端框架开发基础

前端工程化

前端工程原则

  • 模块化( js 、css 代码的复用)
  • 组件化(现有的 UI 结构的复用)
  • 规范化(目录结果划分、编码规范化、接口规范化、文档规范化、git 分支管理)
  • 自动化(自动化构建、自动部署、自动化测试)

何为前端工程化

前端工程化即,在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。这样有利于前端开发自成体系,有一套标准的开发方案和流程

前端工程化解决方案

早期:grunt 、gulp

目前主流: webpack、parcel、vite

初识 webpack

webpack是什么

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

    • 提供了友好的前端模块化开发(ejs、pug)
    • 代码压缩混淆
    • 处理语法兼容性(ES6,ES7,ES8,less,scss)
    • 性能优化、实时编译等功能
  • 提高开发效率和项目可维护性

安装与配置

1. 原始三大件
webpack
webpack-cli
webpack-dev-server 自动进行项目打包和构建

2. 处理JS ES6 ES7 ES8 装饰器六件套
处理ES6
babel-loader@7
babel-core
babel-preset-env
处理ES7 ES8
babel-plugin-transform-runtime
处理装饰器
babel-plugin-transform-decorators
babel-plugin-transform-decorators-legacy

3. 处理 sass -> css -> style 样式四大件
sass-loader
node-sass
css-loader
style-loader

4. 处理模板
ejs-loader

5. 代码压缩
html-webpack-plugin

npm i -D webpack webpack-cli webpack-dev-server babel-loader babel-core babel-preset-env babel-plugin-transform-runtime babel-plugin-transform-decorators babel-plugin-transform-decorators-legacy sass-loader node-sass css-loader style-loader ejs-loader html-webpack-plugin

-D--save-dev 的缩写,表示开发时依赖,只在项目开发阶段用到。

-S--save 的缩写,表示运行时依赖,即项目打包发布运行时要用到。

npm install webpack webpack-cli -D
  1. 在项目根目录中创建 webpack.config.js 配置文件,初始化基本配置:
module.exports = {
  // mode 用于指定构建模式,可选值有 development 和 production
  // development开发环境,不会对打包生成的文件进行代码压缩和性能优化,打包速度快,适合开发阶段使用
  // production生产环境,与development反之
  mode: 'development',
}
  1. package.json 文件的 scripts 节点下,新增 dev 脚本:
"scripts" :{
  // 配置好后就能通过 npm run dev 命令执行打包过程
  "dev": "webpack"
}
  1. 在终端中运行 npm run dev 命令,即可启动 webpack 进行项目的打包构建

webpack.config.js 配置文件

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

webpack默认约定

  • 默认打包入口文件为 src -> index.js
  • 默认输出文件路径为 dist -> main.js
  • 可以在webpack.config.js 配置文件中,通过entry节点指定打包入口,output节点指定打包出口
const path = require('path')

module.exports = {
  entry: path.join(__dirname, './src/index.js'),
  output: {
    path: path.join(__dirname, './dist'), // 输出文件的存放路径
    filename: 'bundle.js', // 输出文件的名称
  },
}

webpack-dev-server

类似于nodejs中的nodemon工具,每当修改源码,webpack会自动进行项目打包和构建

webpack-dev-server会将打包的js放到内存中,方便快速读写更改

安装webpack-dev-server

npm install webpack-dev-server -D

配置webpack-dev-server

  1. 修改 package.json -> scriptsdev 命令:
"scripts": {
  "dev": "webpack-dev-server"
}
  1. 运行 npm run dev 命令,重新打包项目
  2. 浏览器访问 http://localhost:8080 地址,查看打包效果

devServer 节点

通过 webpack.config.js 文件的 devServer 节点对 webpack-dev-server 插件进行更多的配置。

devServer: {
  open: true, // 初次打包完成后,自动打开浏览器
  host: '127.0.0.1', // 访问地址
  port: 80 // 访问端口号
}

html-webpack-plugin

  • webpack中的HTML插件,类似于模板引擎插件
  • 可以通过此插件自定制index.html页面的内容

webpack的loader

实际开发中,webpack只能打包处理js后缀模块,非js后缀结尾的模块,需要调用loader加载器才可以正常打包,比如

在webpack.config.js 的module -> rules 数组中,添加相应的规则:

  • css-loader 处理 css 相关文件
  • less-loader 处理 less 相关文件
  • url-loader 处理 图片等相关文件
  • babel-loader 处理 webpack 无法处理的高级JS语法
    • babel 的使用需要在use后面添加一个 exclude 排除 node_modules目录下的JS文件
    • 还需要创建一个 babel.config.js 的配置文件

打包发布

为何需要打包发布

  • 开发环境下,打包生成的文件存放于内存中,无法得到最终打包生成的文件
  • 开发环境下,打包生成的文件不会进行代码压缩和性能优化

配置打包

在 package.json 文件的 scripts 节点下,新增build命令如下:

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

把 JS 文件统一生成到 js 目录

在 webpack.config.js 配置文件的 output 节点中,进行配置:

ouput: {
  path: path.join(__dirname, 'dist'),
  // 将 bundle.js 文件存放到 dist 目录的 js 子目录中
  filename: 'js/bundle.js',
}

把图片统一生成到 image 目录

修改 webpack.config.js 中的 url-loader 配置项,新增 outputPath 选项指定图片文件的输出路径:

{
  test: /\.jpg|png|gif$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 23333,
      // 指明生成的图片存到 dist 目录下的 image 子目录中
      outputPath: 'image'
    }
  }
}

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

安装配置 clean-webpack-plugin

npm install clean-webpack-plugin@3.0.0 -D

在 webpack.config.js 文件中进行配置:

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

// plugins 节点挂载 CleanWebpackPlugin 实例对象
plugins: [htmlPlugin, new CleanWebpackPlugin()]

企业级项目打包发布

企业级项目打包发布的流程更复杂:

  • 生成打包报告,根据报告分析具体的优化方案
  • Tree-Shaking
  • 为第三方库启用 CDN 加载
  • 配置组件的按需加载
  • 开启路由懒加载
  • 自定制首页内容

SourceMap

SourceMap 就是信息文件,存储着压缩混淆代码转换前的位置信息。

出错的时候,SourceMap 将直接显示出错的原始代码位置,极大方便后期的调试。

在 webpack.config.js 添加如下配置

module.exports = {
    # 在开发调试的时候,有行号,且暴露代码
	devtools: "eval-source-map"
    # 在实际发布的时候,只有行号,不暴露代码
	devtools: "nosources-source-map"
}

生产环境时,需要关闭该设置。

@的原理与好处

@ 表示 src 源代码目录,从外往里找, 不要使用 ../

配置方式: 在 webpack.config.js 中

resolve: {
    alias : {
         "@" : path.join( __dirname,"./src/") 
    }
}

参考资料

前端工程化与 webpack 基础 | BruceBlog (gitee.io)

黑马程序员Vue全套视频教程,从vue2.0到vue3.0一套全覆盖,前端必会的框架教程_哔哩哔哩_bilibili