【前端知识点总结】webpack 配置及打包(一)

webpack

1 . webpack 基本概念

什么是 webpack

webpack 是一个 javascript 应用程序的静态模块打包器

• 静态 : 文件资源
• 模块 : node环境, 引入文件, 遵守模块化语法

webpack 的作用

1. 语法转换

• less / scss ===> css
• 高版本语法 ===> 低版本语法
  • ES6/7/8 -> ES5
    2. 打包 代码压缩 合并
• html/css/js -> 压缩合并
  3. 监听代码的变化，自动打包和刷新

4.提取单vue文件里html/css/js

2 . webpack的基本使用

依赖Node环境开发

依赖 npm 或 yarn 等模块管理工具操作

使用步骤 :

• yarn init -y或npm init : 初始化项目，生成 package.json 文件

• yarn add [email protected] [email protected] -D 或 npm i : 安装webpack包 ,指定版本,防止以后包更新, 造成项目报错

• package.json 中配置打包命令

    scripts: {
	"build": "webpack"
    }

• 新建默认配置文件 webpack.config.js
• 运行打包命令 yarn build 或 npm run build

3 . webpack 的配置(webpack.config.js 中)

默认入口和出口

• 默认入口 : src/index.js

• 默认出口 : dist/main.js

修改默认出入口文件

在 webpack.config.js 文件中填入配置项

注意点 ：

• 用 node 语法导入 path 模块
• enter 属性 : 可以修改入口文件路径
• output 属性 : 可以修改出口文件路径（包含两个属性 path 和 filename ）
  • path ： 出口文件夹路径
  • filename ： 出口文件路径
  • path.join() ： node 语法，用于动态拼接路径
  • __dirname ： node 语法，动态获取文件所在文件夹

业务场景 ：

修改入口文件为 src/main.js ，修改出口文件为 dist/index.js

const path = require("path")
module.exports = {
    entry: "./src/main.js", // enter: 默认入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口"文件夹"名
        filename: "index.js"               // 出口"文件"名
    }
}

打包后自动生成 html 文件

安装 html-webpack-plugin 插件 ，自动生成 html 文件

1. 安装 yarn add [email protected] -D
2. 引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin')
3. 配置插件 plugins: [new HtmlWebpackPlugin({template: './public/index.html'})]

loader 插件配置

webpack 默认只能处理 js 文件，无法处理其他类型的文件

1 . css-loader 插件 处理 css 文件

1. 安装 yarn add [email protected] [email protected] -D
   • css-loader 识别.css文件打包
   • style-loader 把js内样式插入DOM上
2. 配置 loader 规则 module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }

2 . less-loader 插件 处理 less 文件

1. 安装 yarn add [email protected] [email protected] -D
2. 配置 loader 规则 { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }

3 . webpack-加载器-处理图片文件

webpack5_asset module(无需额外包)webpack 内置模块

配置 loader 规则

module: {
    rules: [ 
        // ...省略其他
        {
            test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
            type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
        }
    ]
}

注意 ：

• asset : 在导出一个 data URI 和一个单独的文件之间自动选择
• 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
• 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)

4 . webpack4_url-loader 处理字体文件

1. 安装 yarn add url-loader file-loader -D

2. 配置 loader 规则

    { 
       test: /\.(eot|svg|ttf|woff|woff2)$/,
       type: 'asset/resource',  // 当做静态资源直接复制文件
       generator: {
       	 filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左
       }
    }
   

注意点 :

• generator 属性 : 生成器, 帮我们自动整理输出到指定位置和指定的文件中
• 占位符:
  • [name] 原文件名, 表示以前叫什么名字现在就原样输出
  • [ext] 原后缀名(包含.), 原来的后缀名, 包括 ., 例如 .eot
  • [hash] 生成 hash 值, 唯一的标识, 避免重名覆盖

5. webpack-高版本js降级

为什么要对高版本 js 语法降级:

• 项目完成无法兼容低版本浏览器

• 在 webpack 中,无法准确的识别一些高版本的 js 语法, 例如:箭头函数

webpack 配合 babel-loader 对高版本js语法降级

1. 安装 yarn add babel-loader @babel/core @babel/preset-env -D
2. 配置 loader 规则

 {
   test: /\.js$/, // 匹配 .js 结尾的文件
   // exclude：排除  include：包含
   // 不降级 node_modules 和 bower_components 目录下的所有文件
   exclude: /(node_modules|bower_components)/,
   use: {
     loader: 'babel-loader',
     options: { // 加一些额外的配置 (语法预设: 提前准备好的语法包)
        presets: ['@babel/preset-env']
      }
    }
 }

4 . webpack 中 mode(模式)

webpack 把打包分成了两种模式, 一种是线上生产环境的模式, 另一种是开发环境的模式

作用 : 区分开发环境和生产环境, 代码是否压缩混淆

取值范围 :

• development 开发环境模式, 会对代码进行压缩混淆
• production 生产环境模式, 不会对代码进行压缩混淆, 速度非常快

module.exports = {
  mode: 'production'
}

5 . webpack 开发服务器

问题: 每次修改代码, 重新打包, 非常费时 (30s - 60s)

原因:

1. 再次找到入口并开始构建依赖关系图

2. 磁盘读取对应文件到内存

3. webpack用配置好的loader和plugin翻译和处理文件

4. 再将处理后内容, 写入到磁盘出口位置

5. 代码再变化，重复1~4步
   作用 : 将打包的结果放到内存中, 只打包修改的部分, 进行热更新, 大大提高了开发效率

webpack 开发服务器使用

1. 下包 : yarn add webpack-dev-server -D
2. 配置 : 在 package.json 配置文件中

  "scripts": {
    "build": "webpack",
    "serve": "webpack serve"
  },

3. 开启服务器 yarn serve

webpack 开发服务器优点

• 只重新打包变化的代码
• 打包输出在内存里, 使用更快
• 自动更新到浏览器, 无需手动刷新

6 . webpack 自定义配置

在 webpack.config.js 中可以做一些自定义配置

例:

• 自定义端口号
• 自动打开浏览器

  devServer: {
    port: 3000, // 端口号
    open: true // 自动打开浏览器
  },

7 . webpack 打包

执行webpack命令, 根据配置文件, 找到入口分析翻译打包输出到出口位置

• 所有代码都引入到 src/main.js 入口文件内

• 执行 build 打包命令

• 打包整合到 dist/index.js 出口文件内

8 . webpack 注意点

• 只要修改了 webpack 的配置文件, 都需要重新启动开发服务器
• webpack默认只能处理js文件
• 所有要被打包的资源,要和入口产生直接或间接引入关系