⭐webpack5开发指南（一）

webpack是什么

Webpack 是一种前端资源构建工具，静态模块打包器 (module bundler)。我们前端的所有资源文件，包括js、css、img等都会作为模块处理。webpack 根据相互之间的引用关系，构建一个依赖关系图，根据模块的依赖关系进行静态分析将所有静态模块打包成一个或多个 bundle 输出。

为什么要学习webpack

• 实用：在开发过程中，我们经常使用脚手架进行项目的开发，当我们遇到问题时常常会不知道如何处理，诸如不同版本es语法的兼容，服务代理，资源打包，浏览器热更新等问题，学习webpack能够使我们更快速的找到问题所在，并加以解决。
• 🔥面试：webpack、gulp等老牌打包工具以及vite新贵目前是许多较好公司的面试必备项目，不怕一万就怕万一，如果问到了一点都不会那岂不是凉凉。🥰

如何学习

本专栏将从webpack基础应用，webpack高级应用，webpack项目实战到webpack内部原理进行webpack相关知识的更新，希望能够对大家有所帮助。🐎

一、Webpack基础

1.1 webpack基础环境

1. 本地开发安装

npm install webpack webpack-cli --save

1. 查看webpack版本

webpack -v

webpack: 5.74.0
webpack-cli: 4.10.0
webpack-dev-server not installed

1.2 查看webpack配置

npx webpack --help 查看配置命令 npx webpack --entry ./src/index.js --mode production

新建配置文件 src下新建webpack.config.js,配置基本的入口及输出路径。

const path=require('path')
module.exports={
    entry:'./src/index.js',
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,'./dist')
    },
    mode:'none'
}

1.3 使用HtmlWebpackPlugin

首先安装插件:

npm install html-webpack-plugin -D

并且调整webpack.config.js文件：

const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    entry:'./src/index.js',
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,'./dist')
    },
    mode:'none',
    plugins:[
        new HtmlWebpackPlugin()
    ]
}

执行npx webpack: 我们发现dist目录下不仅生成了bundle.js,而且生成了index.html文件，并且帮助我们引入了bundle.js。 但是该index.html并没有按照我们外层的index.html为模板生成，如果希望按照我们的模板生成，需要修改配置：

在HtmlWebpackPlugin实例化时传入对象配置，template可以指定index.html的生成模板，filename可以修改生成的html文件名，inject可以配置我们script引入标签的插入位置。

const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    entry:'./src/index.js',
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,'./dist')
    },
    mode:'none',
    plugins:[
        new HtmlWebpackPlugin(
            {
                template:'./index.html',
                filename:'customize.html',
                inject:'body'
            }
        )
    ]
}

1.4 清理dist

自动清除上一次打包的文件，在output中配置clean属性即可

  output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,'./dist'),
        clean:true
    },

1.5 source map的使用

在webpack打包源码时，很难追踪到错误或者警告在源代码中的位置，我们将a、b文件打包到bundle.js文件中，当a文件中包含错误，那么堆栈跟踪就会指向到bundle.js，我们需要更准确的知道错误来源于哪个文件，所以需要使用javascript提供的source map功能，可以将编译后的代码映射回原始源代码，现在我们来使用inline-source-map选项。 我们在hello-world.js第二行输出代码中故意设置错误，我们可以看到控制台的错误并不能精准的告诉我们错误位置。

我们修改配置文件，新增devtool:'inline-source-map,重新打包后我们看到控制台可以精准的告诉我们错误文件及位置。

module.exports={
    mode:'development', // 设置为开发模式 
    devtool:'inline-source-map',
}

1.6 使用watch mode(观察模式)

每次编译代码时，我们都需要手动执行npx webpack会非常麻烦，我们可以在webpack启动时添加watch参数，如果其中一个文件更新，代码将会重新编译。

npx webpack --watch

1.7 使用webpack-dev-server

虽然我们使用了watch mode能够实时编译文件，但是浏览器并不能热更新，所以我们需要另外一个工具webpack-dev-server，webpack-dev-server提供了一个基本的web server,并且具有live reloading(实时重新加载)功能。

npm install webpack-dev-server -D

修改配置：

    devServer:{
        static:"./dist"
    }

重新启动：

npx webpack-dev-server

server服务启动在http://localhost:8080/ 我们可以看到server的根目录已经设置为dist,我们进入customize.html可以看到控制台成功输出了内容： 同时在控制台我们可以看到热模块以及实时更新已经生效：

其实webpack-dev-server并没有输出任何的物理文件，他把打包后的bundle文件放到了内存里，即使我们删除文件中的dist文件，重新启动项目，依然可以执行刷新。不但提高了开发效率，也提高了webpack的开发效率