首页 Vue

# webpack

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

  • 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端 JavaScript 的兼容性，性能优化等强大的功能

# webpack 的基本使用

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

    1
    2
    3
    module.exports = {
        mode: 'development'		//mode 用来指定构建模式, 可选值有development production
    }

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

    1
    2
    3
    "scripts:" {
        "dev": "webpack"	//script 节点下的脚本, 可以通过npm run执行 例如 npm run dev
    }

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

# webpack.config.js 文件的作用

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

** 注意 : ** 由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化设置

# webpack 默认约定

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

  1. 默认的打包入口文件为 src -> index.js
  2. 默认的输出文件路径为 dist -> main.js

** 注意 : ** 可以在 webpack.config.js 中修改打包的默认约定，通过 entry 节点指定打包的入口，output 节点指定打包的出口

1
2
3
4
5
6
7
8
9
10
const path = require('path')

module.exports = {
    mode: "devlopment",
    entry: path.join(__dirname, './src/index1.js'),	//打包入口的文件路径
    output: {
        path: path.join(__dirname, "./dist"),	//输出文件的存放路径
        filename: 'budle.js'	//输出文件的名称
    }
}

# webpack 常用插件与扩展功能

# webpack-dev-server

每当修改了源代码，webpack 会自动进行项目的打包和构建

  1. 下载 webpack-dev-server

    1
    npm i webpack-dev-server -D

  2. 修改 package.json -> scripts 的 dev 命令如下 :

    1
    2
    3
    "scripts": {
        "dev": "webpack serve"
    }

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

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

** 注意 : **webpack-dev-server 会启动一个实时打包的 http 服务器

这个插件是不会把新打包的文件写入文件中的，而是储存在内存中，通过一个 http 服务展示出来，script 标签里面应该写服务地址，类似于 :

1
<script scr="http://localhost:8080/main.js"></script>

# html-webpack-plugin

webpack 中的 HTML 插件 (类似于一个模板引擎插件)

  1. 下载 html-webpack-plugin

    1
    npm i html-webpack-plugin -D

  2. 修改 webpack.config.js 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const HtmlPlugin = require('html-webpack-plugin')

    const htmlPlugin = new HtmlPlugin({
        template: "./src/index.html",
        filename: "./index"
    })

    module.exports = {
        plugins: [htmlPlugin]	//通过plugins节点, 使htmlPlugin生效
    }
  • 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中
  • HTML 插件在生成的 index.html 页面，自动注入打包的 js 文件

# devServer 节点

webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的设置

1
2
3
4
5
devServer {
    open: true,		//初次打包完成, 自动打开浏览器
    host: "127.0.0.1",
    port: 80
}

# loader

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

loader 加载器的作用 : 协助 webpack 打包处理特定的文件模块

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

# 打包处理 css 文件

  1. 运行 npn i style-loader css-loader -D, 安装处理 css 文件的 loader

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

    1
    2
    3
    4
    5
    6
    7
    module.exports = {
        module: {
            rules: [
                {test: /\.css$/, use: ['style-loader', 'css-loader']}
            ]
        }
    }

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

** 注意 : **

  • use 数组中指定的 loader 顺序是固定的
  • 多个 loader 的调用顺序是 : 从右往前调用
  1. webpack 默认只能打包处理.js 结尾的文件，处理不了其它后缀的文件
  2. 由于代码中包含了 index.css 这个文件，因此 webpack 默认处理不了
  3. 当 webpack 发现某个文件处理不了的时候，会查找 webpack.config.js 这个配置文件，看 module.rules 数组中，是否配置了对应的 loader 加载器
  4. webpack 把 index.css 这个文件，先转交给一个 loader 进行处理 (先转交给 css-loader)
  5. 当 css-loader 处理完毕后，会把处理的结果，转交给下一个 loader (style-loader)
  6. 当 style-loader 处理完毕后，发现没有下一个 loader 了，于是就把处理的结果转交给 webpack
  7. webpack 把 style-loader 处理的结果，合并到 /dist/main.js 中，最终生成打包好的文件

# 打包处理 less 文件

  1. 运行 npm i less-loader less -D 命令

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

    1
    2
    3
    4
    5
    6
    7
    module.exports = {
        module: {
            rules: [
                {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
            ]
        }
    }

# 打包处理样式表中与 url 路径相关的文件

  1. 运行 npm i url-loader file-loader -D 命令

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

    1
    2
    3
    4
    5
    6
    7
    module.exports = {
        module: {
            rules: [
                {test: /\.jpg|png|gif$/, use: ['url-loader?limit=22229']}
            ]
        }
    }

其中？之后的是 loader 的参数项 :

  • limit 用来指定图片的大小，单位是字节 (byte)
  • 只有 <= limit 大小的图片，才会被转为 base64 格式的图片

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

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

1
2
3
4
5
6
7
8
9
10
11
12
// 1. 定义了名为info的装饰器
function info(target) {
    // 2. 为目标添加静态属性 info
    target.info = "Person info"
}

// 3. 为Person类应用 info 装饰器
@info
class person {}

// 4. 打印Person的静态属性 info
console.log(Person.info)

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

1
2
3
module.exports = {
    plugins: [['@babel/plugin-proposal-decorators', {legacy: true}]]
}

# 配置 webpack 的打包发布

在 webpack.json 文件的 script 节点下，新增 build 命令如下 :

1
2
3
4
"scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode: production"
}

—model 是一个参数项，用来指定 webpack 的运行模式. production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化

** 注意 : ** 通过–model 指定的参数想，会覆盖 webpack.config.js 中的 mode 选项

# Source Map

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

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

1
2
3
4
module.exports = {
    mode: "development",
    devtool: 'eval-source-map'
}

在生产环境中，如果只想定位报错的具体行数，且不想暴露源码。此时可以将 devtool 的值设置为 nosources-source-map

  1. 开发环境下 :
    • 建议把 devtool 的值设置为 eval-source-map
    • 好处：可以精准定位到具体的错误行
  2. 生产环境下 :
    • 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
    • 好处：防止源码泄露，提高网站的安全性
更新于 阅读次数 次