【vue篇】 第一话--前端工程化与 webpack

·🤱作者简介：大家好！我是陪我吹吹海風吧。

·✍喜欢：点赞收藏！持续更新vue2.0/3.0

·✊加油，共勉！

文章目录

🔒一.前端工程化

🔑前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、 经验等进行规范化、 标准化。
📍早期的前端工程化解决方案：
·grunt（ https://www.gruntjs.net/ ）
·gulp（ https://www.gulpjs.com.cn/ ）
📍目前主流的前端工程化解决方案：
· webpack（ https://www.webpackjs.com/ ）
· parcel（ https://zh.parceljs.org/ ）

🔒二.webpack 的基本使用

🔑 webpack 是前端项目工程化的具体解决方案。它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性 能优化等强大的功能。让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护 性。 注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的。

1.创建列表隔行变色项目

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

     ② 新建 src 源代码目录

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

     ④ 初始化首页基本的结构

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

     ⑥ 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果

2.在项目中安装并配置 webpack

安装：
在终端运行如下的命令，安装 webpack 相关的两个包： npm install webpack@5.42.1 webpack-cli@4.7.2 -D

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

3.
module.exports={
mode:'development'//mode用来指定构建模式，可选值有development和production
//development：开发环境，不会对打包生成的文件进行代码压缩和性能优化，打包速度快，适合在开发阶段使用
//production：生产环境 ，会对打包生成的文件进行代码压缩和性能优化 ，打包速度很慢，仅适合在项目发布阶段使用
}

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

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

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

3.自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。 示例代码如下：

const path=require('path')//导入node.js中专门操作路径的模块
module.exports={
   entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径
   output:{
     path:path.join(__dirname,'./dist'),//输出文件的存放路径
     filename:'bundle.js'//输出文件的名称
}
}

🔒三.webpack 中的插件

最常用的 webpack 插件有如下两个：
① webpack-dev-server：可以让webpack监听项目源代码的变化，从而井陉自动打包构建( 类似于 nodemon 工具,会自动进行项目的打包和构建)
② html-webpack-plugin:可以通过此插件自定制 index.html 页面的内容

1.配置webpack-dev-server

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

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

再次运行 npm run dev 命令，重新进行项目的打包

2.配置 html-webpack-plugin

//1.导入HTML插件，得到一个构造函数
const HtmlPlugin=require('html-webpack-plugin')
 
//2.创建HTML插件的实例对象
const htmlPlugin=new HtmlPlugin({
 template:'./src/index.html',//指定原文件的存放路径
 filename:'./index.html',//指定生成的文件的存放路径
})
 
module.exports={
 mode:'development',
 plugins:[htmlPlugin],//3.通过plugins节点，是htmlPlugin 插件生效
}

📍注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服 务器，否则最新的配置文件无法生效！

🔒四.webpack 中的 loader

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

1.css-loader 可以打包处理 .css 相关的文件

① 运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理 css 文件的 loader
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module:{//所有第三方文件模块的匹配规则
    rules:[//文件后缀名的匹配规则  
        {test:/\.css$/,use:['style-loader','css-loader']/ 
] }

2.less-loader 可以打包处理 .less 相关的文件

① 运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

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

3.打包处理样式表中与 url 路径相关的文件

① 运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module:{//所有第三方文件模块的匹配规则
    ruLes：[//文件后缀名的匹配规则
     {test:/\.jpg|png|gifs/,use:'url-loader?limit=22229'},
    ]
}

其中 ? 之后的是 loader 的参数项：
📍 limit 用来指定图片的大小，单位是字节（byte）
📍只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片

4.打包处理 js 文件中的高级语法

webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借
助于 babel-loader 进行打包处理。例如 webpack 无法处理下面的 JavaScript 代码：

//1.定义了名为info的装饰器
function info(target){
//2.为目标添加静态属性info
target.info='Person info'
}

//3.为Person类应用info装饰器
@info
class Person{}
//4.打印Person的静态属性info
console.log(Person.info)

5.安装 babel-loader 相关的包

运行如下的命令安装对应的依赖包：
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下:

{test:/\.js$/,use:'babel-loader',exclude:/node_modules}

6.配置 babel-loader

在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：

module.exports={
  //声明babel可用的插件
  plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}