1 项目开发工具

摘要

在本文中，我们会详细讨论webpack是如何打包发布项目，不过对于Vue来说，Vite可以做到和webpack一样的功能。

声明：如果想要看懂此文章，需具备node.js中npm的知识。

作者：来自ArimaMisaki创作

文章目录

1 项目开发工具
- 1.1 webpack工具
- - 1.1.1 什么是webpack
  - 1.1.2 安装配置webpack
  - 1.1.3 mode的可选值
  - 1.1.4 webpack.config.js文件的作用
  - 1.1.5 修改打包的入口
  - 1.1.6 webpack插件的使用
  - 1.1.7 访问自动打包生成的文件
  - 1.1.8 注意事项
  - 1.1.9 devServer节点
- 1.2 loader加载器
- - 1.2.1 loader概述
  - 1.2.2 打包处理css文件
  - 1.2.3 打包处理less文件
  - 1.2.4 打包处理样式表中与url相关的文件
- 1.3 打包发布
- - 1.3.1 为什么需要打包发布
  - 1.3.2 配置webpack打包发布
  - 1.3.3 整理dist目录下的文件
  - 1.3.4 自动删除dist目录下的旧文件

1.1 webpack工具

1.1.1 什么是webpack

说明：目前企业级的前端项目开发中，绝大多数的项目都是基于Webpack进行打包构建的。

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

1.1.2 安装配置webpack

安装命令：npm i webpack webpack-cli

配置：

项目根目录创建webpack.config.js
将下面给的代码写入webpack.config.js来初始化配置
在package.json的scripts节点中加入键值对"dev":"webpack"用于运行webpack脚本
使用npm run dev来运行webpack脚本
运行脚本后出现dist目录，点开出现mian.js，这是webpack将有兼容性的代码转为没有兼容性的代码，我们在网页中应该导入改文件而非原来有兼容性的js文件。

module.exports = {mode:'development' //mode用来指定构建方式，可选值有development和production
}

1.1.3 mode的可选值

说明：mode可选值为development和production

开发环境：development环境下不会对打包生成的文件进行代码压缩和性能优化，但打包速度快，适合在开发阶段使用

生产环境：production环境下会对打包生成的文件进行代码压缩和性能优化，但打包速度慢，适合在项目上线阶段使用

1.1.4 webpack.config.js文件的作用

说明：从配置文件的内容来看很有nodejs的味道，因为文件的内容采用了COMMONJS的语法。webpack是基于nodejs开发出来的打包工具，因此在它的配置文件中，支持使用nodejs相关的语法和模块进行webpack的个性化配置。

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

1.1.5 修改打包的入口

说明：在webpack中常有如下的约定：

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

修改：如果需要修改入口文件和输出文件路径及路径名，可以按如下配置（注意!这里采用了nodejs的知识内容，如果不懂就记配置就行了）

const path = require('path')module.exports = {mode:'development', //mode用来指定构建方式，可选值有development和productionentry:path.join(__dirname,'./src/index.js'), //指定打包入口output:{path:path.join(__dirname,'./dist'), //输出文件的路径filename:'bundle.js' //输出文件的名称}
}

1.1.6 webpack插件的使用

说明：如果想要将最新的配置生效，则需要使用命令npm run dev来重新生效配置。

升级！：我们可以通过安装和配置第三方插件，监听源码的改动，从而避免频繁使用打包指令。最常用的插件有如下两种：

webpack-dev-server：类似于nodemon工具。
html-webpack-plugin：webpack中的HTML插件，可以通过该插件定义index.html页面的内容。

安装配置webpack-dev-server：

通过npm i webpack-dev-server -D安装
修改package.json中dev后的值为webpack serve
使用npm run dev开启实时打包

安装配置html-webpack-plugin:

通过npm i html-webpack-plugin -D安装
配置webpack.config.js

const path = require('path')const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({template:'./src/index.html',filename:'/index.html'
})module.exports = {mode:'development', //mode用来指定构建方式，可选值有development和productionentry:path.join(__dirname,'./src/index.js'), //指定打包入口output:{path:path.join(__dirname,'./dist'), //输出文件的路径filename:'bundle.js' //输出文件的名称},plugins:[htmlPlugin]// 挂载插件实例对象
}

1.1.7 访问自动打包生成的文件

疑问：开启自动打包后，在源码HTML中通过src的方式导入js，修改js后，发现修改后的效果和代码不一致。

回答：修改效果不一致是因为开启自动打包后的js文件并不处于真实物理磁盘中，而是存在于内存中。自动打包处于内存中可以提高实时打包输出的速度。

如何访问：实际上，webpack-dev-server生成到内存的文件默认放在了项目的根目录中，只不过它是虚拟且不可见的，但我们仍然能在html文件中引用它。

实时预览：webpack-dev-server提供了一个实时预览的服务器，我们通过http:localhost:8080可以访问。

1.1.8 注意事项

疑问：html-webpack-plugin将src下的html复制一份到根目录下，可为何我们在编辑器中的文档树无法看到复制的html文件？

回答：该html文件也是置于内存中

疑问：既然通过两个插件生成的实时js文件和复制的html文件都处于内存中，那么删除dist文件夹还会影响项目吗？

回答：不影响

1.1.9 devServer节点

说明：在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置，如下：

devServer:{open:true, //打包完成后自动打开浏览器host:'127.0.0.1', //实时打包使用的主机地址port:80, //实时打包使用的端口号
}

1.2 loader加载器

1.2.1 loader概述

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

作用：协助webpack打包处理特定的文件模块，如：

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

调用过程示意图：

1.2.2 打包处理css文件

说明：如果想要在js文件中导入css文件，可以通过import语法导入，这正是webpack神奇之处。但在没有配置loader的情况下，当我们使用import语法导入后webpack会报错。

配置loader：

通过npm i style-loader css-loader安装
在webpack.config.js的module->rules数组中添加loader规则，演示如下
其中test表示匹配的文件类型，采用正则匹配；use表示对应调用的loader，数组中指定的loader顺序固定不可改变，调用顺序从后往前调用

module.exports = {mode:'development', //mode用来指定构建方式，可选值有development和productionentry:path.join(__dirname,'./src/index.js'), //指定打包入口output:{path:path.join(__dirname,'./dist'), //输出文件的路径filename:'bundle.js' //输出文件的名称},plugins:[htmlPlugin],// 挂载插件实例对象module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']} //采用正则表示loader来处理css后缀的文件]}
}

1.2.3 打包处理less文件

配置loader：

通过npm i less-loader less安装
在webpack.config.js的module->rules数组中添加loader规则，演示如下
其中test表示匹配的文件类型，采用正则匹配；use表示对应调用的loader，数组中指定的loader顺序固定不可改变，调用顺序从后往前调用

说明：与cssloader不同的是，下载后use数组只需添加less-loader，无需添加less，因为less是内置依赖项。

module:{rules:[{test:/\.less$/,use:['style-loader','css-loader','less-loader']}]}

1.2.4 打包处理样式表中与url相关的文件

说明：在高版本的webpack实际上已经不需要再安装这个loader了，但是在1.3.3中整理dist目录下的img会用到，故这里提及。

配置loader：

通过npm i url-loader file-loader安装
在webpack.config.js的module->rules数组中添加loader规则，演示如下
其中test表示匹配的文件类型，采用正则匹配；use表示对应调用的loader，数组中指定的loader顺序固定不可改变，调用顺序从后往前调用

提示：在组件中多次使用小图片会导致浏览器总是发出一些不必要的请求，这样会导致网页加载的速度变慢。我们可以将小图片格式转为base64格式，这样可以提高速度。使用?limit=22229可以将小图片转换为base64，意为体积小于等于给定的22229时，即可转为base64。

module: {rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] },{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },{test: /\.jpg|png|gif$/, use: {loader: 'url-loader',options: {limit: 22229,}}}]}

1.3 打包发布

1.3.1 为什么需要打包发布

说明：项目完成之后，使用webpack对项目进行打包发布的主要原因有以下两点：

开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件
开发环境下，打包生成的文件不会对代码压缩和性能优化

1.3.2 配置webpack打包发布

说明：在package.json文件的script节点上新增build命令，命令中的–model为指定的参数项，指定production后，使用此命令可以覆改webpack.config.js中的model选项。配置如下所示：

  "scripts": {"build":"webpack --mode production"},

1.3.3 整理dist目录下的文件

js整理说明：如果我们想要在打包发布后，内存中的js文件出现在dist下的js文件夹内，那么我们需要在webpack.config.js配置文件的output节点中，修改filename的值为js/bundle.js。

img整理说明：如果我们想要在打包发布后，内存中的img文件出现在dist下的img文件夹内，那么我们需要在webpack.config.js配置文件的output节点中，如下配置：

module: {rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] },{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },{test: /\.jpg|png|gif$/, use: {loader: 'url-loader',options: {limit: 22229,outputPath: 'image',}}}]}

1.3.4 自动删除dist目录下的旧文件

说明：在打包发布过程中，我们需要先删除开发时的dist，然后在运行命令打包发布，让内存中的文件构建dist。但我们可以再懒点，通过安装clean-webpack-plugin插件来自动清理dist目录下的旧文件。

安装配置：

npm i clean-webpack-plugin
在webpack.config.js中配置如下所示：

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()plugins: [htmlPlugin,cleanPlugin],// 挂载插件实例对象

一幅长文细学Vue（一）——Webpack打包工具相关推荐

一幅长文细学Vue（十）——初探组合式
10 组合式API(一) 摘要:在进行前面的学习后,我们为了方便和Ts搭配使用Vue,需要放弃原有的选项式API写法,转向更为复杂的组合式API的学习:当然,这个学习过程无需担心学习成本过大,因为当你 ...
一幅长文细学Vue（十三）——组合式中的生命周期
13 组合式API(四) 摘要:每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM.在此过程中,它也会运行被称为 ...
一幅长文细学HTML5
HTML5 摘要在本文的学习中,我们会讲述HTML5新增的特性.HTML5并不是一种新的语言,而是HTML语言的第五次重大修改版本.现如今很多主流浏览器都支持H5如chrome.firefox. ...
一幅长文细学React（一）——入门
1 入门摘要:React是前端两大热门框架之一,为此,学好React对于前端开发工程师来说是必不可少的.在本文中,我们会快速入门React. 声明:为了文章的清爽性,在文章内部的代码演示中只会附上部 ...
一幅长文细学CSS3
摘要:CSS实际上指的是层叠样式表(Cascading style sheets),其作用是给页面中的HTML标签设置样式.在本文中我们会详细记录CSS3是如何给HTML美化样式的. 声明:在使用本文 ...
一幅长文细学JavaScript（五）——ES6-ES11新特性
5 ES版本摘要 ES5的先天不足致使ES后续版本的发展,这也是前端人员绕不开的一个点.如果我们想要在工作和面试中轻松解决问题,那么了解ES6-ES11是必不可少的. 在本文中,我将采用一种更加通俗 ...
一幅长文细学GaussDB（一）——数据库介绍
文章目录 1 数据库介绍 1.1 数据库技术 1.2 数据库技术发展史数据库技术产生和发展数据库三个阶段比较数据库系统优势层次模型网状模型关系模型关系数据库产品历史结构化查询语言SQL ...
一幅长文细学GaussDB（二）——数据库基础知识
文章目录 2 数据库基础知识 2.1 数据库管理简介数据库管理数据库管理工作范围对象管理制定数据库对象命名规范备份和恢复灾难恢复备份方式数据库安装数据库卸载数据库迁移数据库扩容 ...
一幅长文细学华为MRS大数据开发（四）——HBase
4 HBase 摘要:HBase是一种非关系型数据库,它是基于谷歌BigTable的开源实现,和BigTable一样,支持大规模海量数据的存储,对于分布式并发数据处理的效率极高,易于扩展且支持动态伸缩 ...

一幅长文细学Vue（一）——Webpack打包工具

1 项目开发工具

文章目录

1.1 webpack工具

1.1.1 什么是webpack

1.1.2 安装配置webpack

1.1.3 mode的可选值

1.1.4 webpack.config.js文件的作用

1.1.5 修改打包的入口

1.1.6 webpack插件的使用

1.1.7 访问自动打包生成的文件

1.1.8 注意事项

1.1.9 devServer节点

1.2 loader加载器

1.2.1 loader概述

1.2.2 打包处理css文件

1.2.3 打包处理less文件

1.2.4 打包处理样式表中与url相关的文件

1.3 打包发布

1.3.1 为什么需要打包发布

1.3.2 配置webpack打包发布

1.3.3 整理dist目录下的文件

1.3.4 自动删除dist目录下的旧文件

一幅长文细学Vue（一）——Webpack打包工具相关推荐

最新文章

热门文章