webpack从零开始（一）

撞钟少年
141 阅读3分钟

为什么用打包工具

1. 浏览器的运行效率问题

  • 我们如果不使用任何打包工具，如果编写的代码文件比较多，此时我们就需要发送多次http请求，如果下面的文件对该文件存在一些依赖，其中一个文件没有请求回来，此时，就会导致页面中的部分功能没有办法实现。
  • 如果我们将代码编写入一个文件中，文件大小就会很大，并且也会导致作用域的问题，代码不好维护。

2. 浏览器对新技术的支持度不够

  • 如果我们编写一些比较高级的语法，但是部分浏览器是不支持的（在webpack5之前，只能识别js和json），此时我们就需要设置一些pollfill去解决该问题。例如编写的TS和Vue文件，这些浏览器都不能识别，而webpack打包工具就会使用对应的babel对其进行转化，转化为浏览器可以识别的文件，格式化代码从而压缩体积，加快运行效率。

webpack打包工具

  • webpack是一个静态资源打包工具。
  • 他会以一个或多个文件作为打包的入口，将整个项目所有文件编译组合成浏览器能够识别的一个或多个文件输出出去，此时浏览器就可以直接运行编译好的文件。
  • 目前市面上最常用的打包工具就是webpack了，作为前端工程师必不可少的基本工具，让我们开始初步探索吧！

准备工作

webpack依赖于node环境，首先要检查你是否安装了node

image.png

接下来，初始化package.json，方便后续安装依赖

image.png

npm常用指令： wenku.baidu.com/view/74e923…

安装webpack依赖

image.png

注意：安装时不建议全局安装，会污染其他项目。

安装好依赖后，可以先简单试一下打包功能

首先创建一个要打包的js，随便写一些代码

image.png

之后创建webpack配置文件webpack.config.js,写上基本配置

image.png

为了方便管理，可以在package里面配置打包命令，当然也可以用npx webpack命令直接运行

image.png

运行后可以看到根目录已经出现了打包的文件

image.png

为了能在页面上直观看到打包的文件是否能运行，可以创建一个html，引入打包好的文件

image.png

但换个js或引入多个js文件，也需要如此麻烦地创建html，或创建后再更换引入吗？能不能统一管理，自动生成呢？

webpack提供了插件，可以实现这个功能

image.png

更新配置

image.png

image.png

但我们正常开发时，编译器更新代码后，直接就能生效的，能否动态打包呢？（热更新）

  1. webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务

  2. 主要提供两个功能：

    • 为静态文件提供服务
    • 自动刷新和热替换

webpack同样提供了插件，可以实现这个功能

image.png

更新配置

image.png

整合一下

webpack.config.js

// nodejs中的包，用来解析当前路径
const path = require('path')
// 动态引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// commonJS语法
module.exports = {
    // 环境模式：开发模式development，生产模式production
    mode: 'development',
    // 入口
    // 拼接要打包的文件路径,参数1起名约定俗成，参数二定位文件夹位置, 参数三打包的入口
    entry: path.join(__dirname, 'src', 'index.js'),
    // 输出
    // 存放打包好的文件
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 同entry注释
            template: path.join(__dirname, 'src', 'index.html'),
            // 打包后的文件名
            filename: 'bundle.html'
        })
    ],
    devServer: {
        // 指定运行的端口
        // vue项目默认运行在8080
        port: 8000,
        // 存放静态资源的文件夹
        static: path.join(__dirname, 'dist'),
        // 是否自动打开浏览器
        open: true,
        // 启动服务器域名
        host: 'localhost'
    }
}

提外：相信小伙伴在阅读文档时会看到，配置path时，有人会用到resolve方法，可以看看这篇文章 blog.csdn.net/qq_51066068…

avatar
文章
阅读
粉丝