构建工具Webpack简介

一、构建工具

当我们习惯了Node中使用ES模块化编写代码以后,用原生的HTML、CSS、JS这些东西会感觉到各种不便。比如:不能放心的使用模块化规范(浏览器兼容性问题)、即使可以使用模块化规范也会面临模块过多时的加载问题。

这时候我们就希望有一个工具能对代码进行打包,将多个模块打包成一个文件。这样一来即解决了兼容性问题,又解决了模块过多的问题。

构建工具就起到这样一个作用,通过构建工具库将使用ESM规范编写的代码转换为旧的JS语法,这样可以使得所有的浏览器可以支持代码。

二、Webpack的使用步骤

1. 初始化项目

npm init -y

构建工具Webpack简介_第1张图片

2. 安装依赖

npm i -D webpack webpack-cli

这里使用-D目的是为了安装开发依赖,我们只需要在开发的时候使用Webpack打包工具,在实际的项目中是不需要使用的。

3. 在项目中创建src目录

构建工具Webpack简介_第2张图片

4. 执行 对代码进行打包

npx webpack

构建工具Webpack简介_第3张图片

5. 观察dist文件 

 构建工具Webpack简介_第4张图片

dist下面的main.js中的内容与index.js中的内容是相同的

构建工具Webpack简介_第5张图片

当我们代码比较简单的时候,我们并不能看出Webpack打包工具的具体作用。

我们创建一个模块1和模块2,分别是创建一个H1标签和在控制台输出“你好,Webpack”。

构建工具Webpack简介_第6张图片

构建工具Webpack简介_第7张图片

在index.js中引入和使用这两个模块

构建工具Webpack简介_第8张图片

对代码进行打包

构建工具Webpack简介_第9张图片

观察我们会发现原本src里有3个目录,而打包过后始终只有main.js这一个文件,并且文件中的代码只显示在一行。

构建工具Webpack简介_第10张图片

 对代码进行格式化,这就是Webpack最终为我们打包的代码。

构建工具Webpack简介_第11张图片

 在html文件中调用查看效果

构建工具Webpack简介_第12张图片

构建工具Webpack简介_第13张图片

三、Webpack配置文件

在项目文件夹下创建webpack.config.js文件,该文件就是Webpack的配置文件

注意:该文件中遵循Node.js的代码格式规范 ,需要对导出配置文件中的内容

构建工具Webpack简介_第14张图片

我们刚才在使用npm webpack进行打包的时候的会收到一条报错,大致意思为mode未进行配置

构建工具Webpack简介_第15张图片

进行配置即可

构建工具Webpack简介_第16张图片

你可能感兴趣的:(Webpack,webpack,前端,node.js)