阅读 184

前端工程化和webpack(前端工程化和模块化的理解)

前端开发

  • 模块化：js模块化，css模块化，资源模块化

  • 组件化：复用UI结构样式

  • 规范化：目录结构划分，编码规范化，接口规范化，文档规范化，git分支管理

  • 自动化：自动化构建，自动部署，自动化测试

前端工程化

在企业级的前端项目中，把前端开发所需的工具，技术，流程，经验等进行规范化，标准化。

前端工程化解决方案

webpack和parcel

webpack

前端项目工程化集体解决方案。 主要功能：支持前端模块化开发，代码压缩混淆，处理浏览器端JavaScript兼容性，性能优化。

在webpack中，一切皆模块化，都可以通过es6导入语法进行导入和使用（导入jquery,css，less文件，图片） 如果某个模块中，使用from接收到的成员是undefined,则没必要进行接收。（css,less等文件）

基础使用

隔行变色案例：

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

  2. 新建src源代码目录

  3. 在src目录中新建index.html和index.js文件

  4. 初始化index.html首页基本结构

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

  6. 通过es6模块化方式导入jQuery，实现隔行变色效果

在项目中安装webpack

npm install webpack@5.42.1 webpack-cli@4.7.2 -D   
（-D 开发依赖（上线时不需要使用）-D是--save-dev的简写）复制代码

在项目中配置webpack

1. webpack.config.js （webpack配置文件）

module.export={
    mode:'development'   
    //mode指构建模式，development（开发阶段）或production（生产模式）
}复制代码

webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。由于webpack 是基于node.js 开发出来的打包工具，因此在它的配置文件中，支持使用node.js 相关的语法和模块进行webpack 的个性化配置。 mode 节点的可选值有两个：

  • development

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

  • production

生产环境 会对打包生成的文件进行代码压缩和性能优化，体积小 打包速度很慢，仅适合在项目发布阶段使用

开发阶段使用development（打包速度快，但是体积大），发布上线时使用production（打包时会进行代码压缩和混淆，发布体积小，但是打包速度慢）

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

"scripts": {
    "dev":"webpack"  //script下的脚本可以通过npm run 执行，如npm run dev （执行webpack命令）
  },复制代码

3. 在终端运行npm run dev 命令，启动webpack进行项目打包构建命令运行时先读取webpack.config.js配置文件，为development还是production，根据配置文件运行webpack。

> webpack
asset main.js 88.3 KiB [emitted] [minimized] (name: main)
runtime modules 663 bytes 3 modules
cacheable modules 282 KiB
  ./src/index.js 563 bytes [built] [code generated]
  ./node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]  
复制代码

执行结束后，跟目录中会出现dist文件夹，./src/index.js和 ./node_modules/jquery/dist/jquery.js 中的代码打包在main.js文件中。 打包后index.html中script标签中应该引入main.js文件。

webpack 中的默认约定在webpack 4.x 和5.x 的版本中，有如下的默认约定： ①默认的打包入口文件为src-> index.js ②默认的输出文件路径为dist -> main.js 注意：可以在webpack.config.js 中修改打包的默认约定

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

	const path=require('path')
	//使用node.js导出语法，向外导出一个webpack的配置对象
	module.export={
	    //代表webpack运行模式，可选值为development和production
	    mode:'production',
	    // entry:'指定要处理哪个文件'
	    entry:Path2D.join(__dirname,'./src/index1.js'),
	    //output指定生成的文件要存放到哪里
	    output:{
	        //存放到目录
	        path:path.join(__dirname,'dist'),
	        //生成文件名
	        filename:'bundle.js'
	    }
	}复制代码

使用webpack打包后，每次修改代码网页中不能直接刷新效果，而是需要在终端中npm run dev重新运行webpack（更新dist文件夹）网页才能刷新出效果。

webpack插件

webpack-dev-server

实时自动打包，监听项目源代码的变化，修改代码保存后会识别自动打包。

安装webpack-dev-server：

npm install webpack-dev-server@3.11.2-D复制代码

配置webpack-dev-server：

修改package.json中scripts中的dev命令

"scripts": {
    "dev": "webpack serve"
  },复制代码

再次运行npm run dev命令，重新进行项目打包 在浏览器中访问http://localhost:8080 地址，查看自动打包效果，会将项目打包文件保存到内存中。进入文件目录点击src会进入index首页。

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

html-webpack-plugin

html-webpack-plugin 是webpack 中的HTML 插件，可以通过此插件自定制index.html 页面的内容。

通过html-webpack-plugin 插件，将src 目录下的index.html 首页，复制到项目根目录中一份

安装html-webpack-plugin插件

npm install html-webpack-plugin@5.3.2 -D复制代码

配置html-webpack-plugin插件

webpack.config.js

//导入html-webpack-plugin插件，得到插件的构造函数
const HtmlPlugin=require('html-webpack-plugin')
//new构造函数，创建插件的实例对象
const htmlPlugin =new HtmlPlugin({
    template:'./src/index.html',
    filename:'./index.html'
})
module.exports = {
    mode: 'development',
    //插件的数组，将来webpack运行时会加载调用这些插件
    plugins:[htmlPlugin] ，//通过plugin节点，使htmlPlugin插件生效
};复制代码

通过HTML 插件复制到项目根目录中的index.html 页面，也被放到了内存中。 HTML 插件在生成的index.html 页面，自动注入了打包的bundle.js 文件，就不需要在index.html中手动引入bundle.js文件。

devServer节点

webpack.config.js 配置文件，通过devServer节点配置

devServer：{
//首次打包成功后，自动打开浏览器地址
open:true, 
//在http协议中，如果端口号为80，则可以省略（localhost）
port:80;
//在指定运行的主机地址
host:'127.0.0.1'
}复制代码

webpack 加载器loader

1.loader 概述

在实际开发过程中，webpack 默认只能打包处理以.js 后缀名结尾的模块。

其他非.js 后缀名结尾的模块，webpack 默认处理不了，需要调用loader 加载器才可以正常打包，否则会报错！

loader 加载器的作用：协助webpack 打包处理特定的文件模块。 css-loader 可以打包处理.css 相关的文件 less-loader 可以打包处理.less 相关的文件 babel-loader 可以打包处理webpack 无法处理的高级JS 语法

loader调用过程

QQ图片20211209002514.png

2.解析处理css文件

安装：

npm i style-loader@3.0.0 css-loader@5.2.6-D复制代码

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

module:{
    rules:[
     {test:/\.css$/,use:['style-loader','css-loader']}
     ]
}复制代码

test表示匹配的文件类型，use表示对应要调用的loader 注意： use数组中指定的loader顺序是固定的， 多个loader的调用顺序是从后往前调用

1.webpack默认只能处理js结尾的文件，处理不了其他后缀的文件 2.由于代码中包含index.css文件，webpack默认处理不了 3.当webpack处理不了时，会查找webpack.config.js这个配置文件，查看module中rules数组中是否配置了对应的loader加载器 4.webpack把index.css文件先转交给loader进行处理 5.先交给css-loader处理（数组中loader从后往前），处理完毕的结果转交给前一个loader（style-loader） 6.style-loader处理完毕后转交给前一个loader，没有loader，则转交给webpack 7.webpack把style-loader处理的结果和并到/dist/bundle.js中，最终胜出打包好的文件

3.解析处理less文件

安装：

npm i less-loader@10.0.1 less@4.1.1-D复制代码

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

module:{//所有第三方文件模块的匹配规则复制代码

      rules:[         //定义了不同模块对应的loader

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

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

使用base64格式字符串，不用再单独发起网络请求。 图片转为base64后，体积会增加，不建议把大图转base64。

import img from ‘./img.jpg’ 导入的该图片为base64的字符串 js中导入图片时，会出错（不是js文件）

安装：

npm i url-loader@4.1.1 file-loader@6.2.0 -D复制代码

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

module:{
 rules:[
     //当只有一个loader时，use后面可以不使用数组，直接写为字符串
     {test:/\.jpg|png|gifs$/,use:'url-loader'}
 ]
}


作者：用户8007311792059
链接：https://juejin.cn/post/7039370198670901284


文章分类
代码人生
文章标签
前端
webpack
版权声明：本站是系统测试站点，无实际运营。本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 XXXXXXo@163.com 举报，一经查实，本站将立刻删除。
相关推荐