0
点赞
收藏
分享

微信扫一扫

Webpack-背景、概念、基本使用、插件、loader、打包、source Map

宁静的猫 2022-05-03 阅读 90
webpack前端javascript

背景介绍

前端小白眼中的前端开发 vs 实际的前端开发

  • 前端小白眼中的前端开发：

    1. 会写 HTML + CSS + JavaScript 就是合格的前端程序员 ；
    2. 东拼西凑，不成体系 。

  • 实际的前端开发（四个现代化）：

    1. 模块化（js 的模块化、css 的模块化、资源的模块化） ；

    2. 组件化（复用现有的 UI 结构、样式、行为） ；

    3. 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理） ；

    4. 自动化（自动化构建、自动部署、自动化测试） 。

前端工程化的解决方案 ：

  • 早期的前端工程化解决方案：
    • grunt（ https://www.gruntjs.net/ ）
    • gulp（ https://www.gulpjs.com.cn/ ）
  • 目前主流的前端工程化解决方案：
    • webpack（ https://www.webpackjs.com/ ）

webpack概念

webpack是一个流行的前端项目构建工具，可以解决目前web开发的困境。
webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性

  1. 代码压缩混淆

  2. 处理浏览器端 JavaScript 的兼容性

  3. 以模块化的方式处理项目中的资源

今天要安装的所有包

安装项目依赖包：
npm install jquery

安装开发项目依赖包
npm install webpack@5.58.2 webpack-cli@4.9.0 clean-webpack-plugin@4.0.0 webpack-dev-server@4.3.1 html-webpack-plugin@5.3.2 style-loader@3.3.0 css-loader@6.4.0 less-loader@10.1.0 less@4.1.2  babel-loader@8.2.2 @babel/core@7.15.8 @babel/plugin-proposal-decorators@7.15.8 -D

webpack的基本使用

1.创建列表隔行变色项目

目的：以模块化的方式实现列表隔行变色的项目，为 webpack 的学习做准备。

具体步骤：

  1. 在项目目录中, 初始化项目创建package.json文件 (npm init -y)

  2. 在项目目录中，新建 src 源代码目录

  3. 在项目目录中，新建public 静态资源目录

  4. src目录中创建index.js

  5. public目录中创建index.html，引入index.js

  6. 初始化首页基本的结构（创建ul>li这样的结构）

  7. 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果

import $ from 'jquery';

$(function () {
  $('li:odd').css('background-color', '#ccffcc');
  $('li:even').css('background-color', '#ffccff');
})

分析项目中遇到的问题

  • 报错的原因： 浏览器对 ES6+ 高级语法支持的不好，有兼容性问题
  • 如何解决： 在运行的时候，让浏览器不出现“兼容性问题”
  • 具体方案： 在项目中安装和配置 webpack，对 JS 代码进行降级处理

2.安装和配置webpack

目标：

  • 通过 webpack 处理 JS 代码的兼容性问题
  • 了解 webpack 的基本配置步骤。

1.安装 webpack 相关的两个包： webpack@5.58.2 和 webpack-cli@4.9.0 （前面已经统一安装过了）

2.在 package.json 的 scripts 节点下，新增 dev 脚本如下：

"scripts": {
  "dev": "webpack"
},

3.在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

3. mode 的可选值

在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

module.exports = {
  // 打包模式
  mode: 'development', //  production：生成  development：开发
}

目标：清楚每个 mode 值的作用，知道每个值的具体应用场景。

mode 节点的可选值有两个，分别是：

  1. development
  • 开发环境
  • 不会对打包生成的文件进行代码压缩和性能优化
  • 打包速度快，适合在开发阶段使用
  1. production
  • 生产环境
  • 会对打包生成的文件进行代码压缩和性能优化
  • 打包速度很慢，仅适合在项目发布阶段使用

4. webpack.config.js的作用

webpack.config.js是什么

  • webpack.config.js 是 webpack 的配置文件。

作用:

  • 告诉 webpack 怎么对项目进行打包。

被读取的时机:

  • npm run dev 的时候（打包的时候），会先读取配置文件，再对项目进行打包处理。

5. webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：

  1. 默认的打包入口文件为 src -> index.js

2 默认的输出文件路径为 dist -> main.js

注意：可以在 webpack.config.js 中修改打包的默认约定

6. 自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。

示例代码如下：

const path = require('path');

module.exports = {
  // 打包模式
  mode: 'development', //  production：生成  development：开发
  // 入口文件
  entry: path.join(__dirname, 'src', 'index.js'),
  // 出口文件
  output: {
    path: path.join(__dirname, 'dist'), // 要使用绝对路径，否则报错
    filename: 'bundle.js',
  }
}

重新运行 npm run dev ，即可得到新的打包结果 bundle.js .

index.html 中引入新的打包结果 bundle.js。

webpack 中的插件

1. clean-webpack-plugin

作用：每次打包构建的时候，自动清理 dist 目录下的旧文件，保证 dist 目录的代码是最新的。

安装依赖包：clean-webpack-plugin@4.0.0 （前面已经统一安装过）

在 webpack.config.js 中增加配置：

// 1. 配置自动清理插件（在打包的时候，插件就会自动清理 dist 中没用的文件）
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const cleanPlugin = new CleanWebpackPlugin();

module.exports = {
  mode: 'development',
  // 其他项省略......
  // 插件配置
  plugins: [ cleanPlugin ]
}

重新运行 npm run dev ，即可将 dist 文件夹中没用的文件清理掉.

2. webpack-dev-server

作用：可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。

安装包 webpack-dev-server@4.3.1（前面已经统一安装过）

配置 webpack-dev-server

  1. 修改 package.json -> scripts 中的 dev 命令如下：
"scripts": {
  "dev": "webpack serve" // 注意这里是 serve ，不是 server
},
  1. 在 webpack.config.js 配置文件中，增加 devServer 节点对 webpack-dev-server 插件进行更多的配置
devServer: {
  port: 9000, // 实时打包所用的端口号
  open: true // 初次打包完成后，自动打开浏览器
}

  1. 再次运行 npm run dev 命令，重新进行项目的打包

  2. 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

打包生成的文件哪儿去了？

  1. 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上

  • 严格遵守开发者在 webpack.config.js 中指定配置

  • 根据 output 节点指定路径进行存放

  1. 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中

  • 不再根据 output 节点指定的路径，存放到实际的物理磁盘上

  • 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

生成到内存中的文件该如何访问？

  • webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。
  • 可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
  • 例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件

所以，index.html 中应该这样引入js <script src="/bundle.js"></script>

3. html-webpack-plugin

html-webpack-plugin 是 webpack 中的 HTML 插件。

作用：自动把生成好的 bundle.js 注入到 HTML 页面中。

安装包 html-webpack-plugin@5.3.2 （前面已经统一安装过）

在webpack.config.js中配置 html-webpack-plugin

const HtmlPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlPlugin({
  template: path.join(__dirname, 'public', 'index.html'), // public中，你的html叫什么
  filename: 'index.html' // 打包后的html叫什么（这个文件会生成到dist文件夹）
});

module.exports = {
  mode: 'development',
  // 其他项省略......
  // 插件配置
  plugins: [ cleanPlugin, htmlPlugin ]
}

其他说明：

  1. 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中，所以看不到

  2. HTML 插件在生成的 index.html 页面，自动注入了打包的 bundle.js 文件

webpack 中的 loader

1. loader 概述

loader加载器有什么用？

  • 在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。
  • 其他非 .js 后缀名结尾的模块， webpack 默认处理不了
  • 需要调用 loader 加载器才可以正常打包非 js 文件，否则会报错！

所以，loader 加载器的作用是协助 webpack 打包处理特定的文件模块。比如：

  • css-loader 可以打包处理 .css 相关的文件
  • less-loader 可以打包处理 .less 相关的文件
  • babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

2. 打包处理 css 文件

  1. 安装包 style-loader@3.3.0 和 css-loader@6.4.0 （前面已经统一安装过）

  2. 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module.exports = {
  mode: 'development',
  // 其他项省略......
  module: {
    rules: [
      // 处理css文件
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ]
  }
}

其中，test 表示匹配的文件类型， use 表示对应要调用的 loader。

注意：

  • use 数组中指定的 loader 顺序是固定的；
  • 多个 loader 的调用顺序是：从后往前调用。

3. 打包处理 less 文件

  1. 安装 less-loader@10.1.0 和 less@4.1.2（前面已经安装过）

  2. 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

 module.exports = {
   mode: 'development',
   // 其他项省略......
   module: {
     rules: [
       // 处理css文件
       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
       // 处理less文件
       { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
     ]
   }
 }

5.5 webpack处理图片url

Webpack4.x以上需要安装 url-loader 和 file-loader；

webpack现在已经升级到5.x.x的版本了,不用安装 url-loader 和 file-loader,只需要配置规则就可以了。

编写处理url的规则 ：

 module.exports = {
   mode: 'development',
   // 其他项省略......
   module: {
     rules: [
       // 处理css文件
       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
       // 处理less文件
       { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
       // 处理图片文件
       {test: /\.(jpg|png|gif)$/, type: 'asset'}
     ]
   }
 }

注意:
默认当原图片大小大于8kb时,会生成独立的图片文件,如果原图片小于8kb时,会转换成base64格式打包进bundle.js中

5. 打包处理 js 文件中的高级语法

webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借 助于 babel-loader 进行打包处理。

例如 webpack 无法处理下面的 JavaScript 代码：

// js装饰器
function info(target) {
  target.abc = '哈哈哈哈哈哈哈，这是新语法';
}

// 下面的语法，表示给Person加了一个abc属性
@info
class Person { }

console.log(Person.abc);

安装 babel-loader 相关的包 babel-loader@8.2.2 和 @babel/core@7.15.8 和 @babel/plugin-proposal-decorators@7.15.8 （前面已经统一安装过）

在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module.exports = {
  mode: 'development',
  // 其他项省略......
  module: {
    rules: [
      // 处理css文件
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      // 处理less文件
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      // 处理图片文件
      {test: /\.(jpg|png|gif)$/, type: 'asset'}
      // .js 文件使用 babel-loader去处理。但是不要处理 node_moduels文件夹中的第三方模块
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  }
}

配置 babel-loader

在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：

module.exports = {
  // 声明 babel 可用的插件
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}

打包发布

1. 为什么要打包发布

项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点：

  1. 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件

  2. 开发环境下，打包生成的文件不会进行代码压缩和性能优化

为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。

2. 配置 webpack 的打包发布

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

"scripts": {
  "dev": "webpack serve",
  "build": "webpack --mode production"
},
  • –model 是一个参数项，用来指定 webpack 的运行模式。
  • production 代表生产环境，会对打包生成的文件 进行代码压缩和性能优化。

把 JavaScript 文件统一生成到 js 目录中

  • 在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：

    output: {
  path: path.join(__dirname, 'dist'),
  filename: 'js/bundle.js', // 这里加入 js 文件夹。
},

Source Map

  • 开发环境中，错误行号对应不上。比如本来是在第23行报错了，但是浏览器提示在第20行报错。
  • 打包后，又不希望我们的代码被其他人看到源码。

Source Map 就是一个信息文件，里面储存着位置信息。

也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

开发环境

推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数 保持一致：

module.exports = {
  // source-map 仅限在开发模式中使用
  //（开发中，程序员需要排错，需要准确的定位错误行号）
  devtool: 'source-map',
}

生产环境

module.exports = {
  // nosources-source-map 适合生产环境。
  //（生产环境，我们不希望别人看到我们的源码，这个配置项只显示行号，但不会显示源码）
  devtool: 'nosources-source-map',
}
举报

相关推荐

WebPack-打包工具

react.js前端前端框架

webpack-自定义loader探索1

node栈让前端飞

webpack4.0核心概念（七）———— “devtool:source-map“

source-map映射关系错误代码开发环境配置Html/CSS前端开发

webpack下的Source Map

webpack前端javascript生产环境开发环境OpenStack云计算

彻底搞懂 Webpack 的Source Map

webpack前端node.jsSource生产环境系统/运维

webpack-前端资源加载/打包工具（1）

webpack前端javascript

webpack打包文件的基本使用

css加载html

webpack5 基本概念 —— 插件（plugin）

webpack

Webpack插件使用及热更新打包

htmlcss热更新

webpack 中的 loader基本操作

webpack前端javascriptcss数组Linux系统/运维
0 条评论