前言

webpack在框架中多半被脚手架所集成，例如vue中的vue-cli，但是在面试中，还是会被问到，所以我们还是要了解一些必要知识，能让我们对此类技术有一个更深的认识。

不得不说，在学习过程中，我了解到了许多我之前仅仅知道那是配置文件的东西，但是经过学习了解之后，已经可以知道哪些配置是为了什么目的的了。

古人云：学吧，学会了都是你的~

古人又云：学吧，学不死就往死里学！

注：本文为摘录笔记，供学习使用。

什么是webpack

可能大家了解的，百度搜到的，webpack是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

还有另一种说法：webpack是前端项目工程化的具体解决方案

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

  • 代码压缩混淆是为了缩减文件体积，让网页打开更迅速
  • 程序员可以放心大胆写js高级语法，webpack在具体浏览器运行的时候会有转换过程，将高级的转换成低级，没有兼容问题的代码，去浏览器里跑。
  • css3动画，浏览器不兼容是不会显示的，不会报错，效果出不来
  • js，如果低版本浏览器不兼容的话，浏览器会报错
  • webpack目前有一些现有的成熟的兼容方案

好处：让 程序员把工作重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

webpack的基本使用

构建初始项目目录

因为许多我觉得大家都会，所以在此简略一些。

①新建项目空白目录，运行npm init -y命令，初始化包管理配置文件package.json

②新建src源代码目录

③新建src—>index.html首页和src—>index.js脚本文件

下面就是初始化和引入依赖了，我随便的引入一个jq，完后瞎写了点东西，主要还是学习webpack

④初始化首页的基本结构

⑤运行npm install jquery -S命令，安装jQuery

之前是不是都是去网上下一个类似jquery.min.js的文件手动拉到文件夹？

在项目中安装webpack

在终端运行如下命令：

1
npm install webpack@5.42.1 webpack-cli@4.7.2 -D

解释一下npm命令中-S -D的区别

开发中跟上线后部署都需要的包，要-S存到dependencies节点下

只在开发中使用的包，上线后不需要的包，要-D存到devDependencies节点下

注：-S 是 –save的简写 -D 是 –save-dev的简写

在项目中配置webpack

只安装不配置当然不会生效，所以我们还要来配置一下。

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

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

module.exports 这个是不是很眼熟（Node.js的导出语法，如果对node有了解的话会知道），它的作用是向外导出一个配置对象，它是webpack的配置文件，当然，这个配置就是给webpack用的咯！

mode的两个可选值，代表着开发的不同阶段：分别是开发模式（development）跟生产模式（production）。

生产模式也就是要上线了。

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

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

"dev":"webpack",冒号前面是这个脚本的名字，冒号后面是个命令，后面的命令必须是字符串，前面脚本的名字可以任意去写，不一定叫dev，合法就行。

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

运行之后，会多一个dist目录，打开后里面有一个main.js代码。

如果你之前index.js的代码引入到index.html中，出现了兼容性问题，那么不妨引入main.js试试，你会发现没有任何问题，这就是webpack的在起作用了，它帮着对我们的项目进行了兼容性处理。

mode的可选值

mode节点的可选值在上面已经说过了，有两个，分别是

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

结论：开发的时候我们一定要用development，因为我们追求的是速度而不是体积，反过来，发布上线的时候我们一定要用production，因为上线追求的是体积和性能，而不是打包的速度。

webpack.config.js文件的作用

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

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

webpack中的默认约定

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

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

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

自定义打包的入口与出口

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

示例代码如下：

1
2
3
4
5
6
7
8
9
const path = require('path') // 导入node.js中专门操作路径的模块

module.exports = {
    entry: path.join(__dirname,'./src/index.js'), // 打包入口文件路径
    output: {
        path: path.join(__dirname, './dist'), // 输出文件的存取路径
        filename: 'main .js' // 输出文件名称 
    }
}

注意： __dirname 是两个下划线！！代表这个文件的存放路径。

webpack中的插件

方便程序员的开发

通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来方便。最常用的webpack插件有如下两个：

  • webpack-dev-server
    • 类似于node.js阶段用到的nodemon工具
    • 每当修改了源代码，webpack会自动进行项目的打包和构建
  • html-webpack-plugin
    • webpack中的HTML插件（类似于一个模板引擎插件）
    • 可以通过此插件自定制index.html页面内容

安装webpack-dev-server

运行如下命令：

npm install webpack-dev-server@3.11.2 -D

-D，上面有讲过，他只是在开发阶段使用的工具，并不是上线部署的时候需要的。

配置webpack-dev-server

  • 修改package.json-->scripts中的dev命令如下

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

serve是一个参数，代表我们要通过插件实现自动打包功能，只要修改代码保存，他就会自动打包生成

  • 再次运行npm run dev命令，重新进行项目的打包
  • 在浏览器中访问http://localhost:8080地址，查看自动打包效果

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