前端工程化开发使用webpack详细安装教程

一.实际的前端开发

1. 模块化:js的模块化,css的模块化,资源的模块化
2. 组件化:复用现有的UI结构,样式,行为
3. 规范化:目录结构的划分,编码规范化,接口规范化,文档规范化,Git分支管理
4. 自动化: 自动化构建,自动部署,自动化测试

二.什么是前端工程化

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

好处:前端开发自成体系,有一套标准的开发方案和流程

三.前端工程化的解决方案

目前主流的前端工程化解决方案
1. webpack
2. parcel

四.什么是webpack

概念: webpack是前端项目工程化的具体解决方案
主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆,处理浏览器JavaScript的兼容性,性能优化等强大的功能.
好处:让程序员把工作的重心放到具体功能的是线上,提高的前端开发的效率.

五.webpack的基本使用

创建列表隔行变色项目
1. 新建项目空白目录,并运行 npm init -y 命令,初始化包管理配置文件package.json

npm init -y

2. 新建src源代码目录
3. 新建src->index.html首尔和src->index.js脚本文件
4. 初始化首页基本结构
5. 运行npm install jquery -S命令(-S相当于--save),安装jQuery

npm install jquery -S

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

安装webpack

在终端运行如下命令,安装webpack相关的两个包

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

扩展:package两个节点的介绍

dependencies:记录的是项目在开发和上线阶段用到的包 -S 是--save的简写
devDependencies:只在开发阶段用到的包 -D 是--save-dev的简写

配置webpack

1. 在项目根目录之下,创建webpack.config.js的webpack配置文件,并初始化如下基本配置:

module.exports = {
    mode:'development'
    // mode 用来指定构建模式 development 代表开发模式 production 代表上线模式
}

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

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

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

npm run dev

webpack.config.js文件的作用

webpack.config.js是webpack的配置文件.webpack在真正开始打包构建之前,会先读取这个配置文件.从而基于给定的配置,对项目进行打包.
注意:由于webpack是基于node.js开发出来的打包工具,因此在它的配置文件中,支持使用node.js相关的语法和模块进行webpack的个性化配置.

webpack中的默认约定

在webpack 4.x 和5.x的1版本中,有如下的默认约定:
1. 默认的打包入口文件为 src->index.js
2. 默认的输出文件路径为 dist->main.js

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

自定义打包的入口与出口

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

const path = require('path')//导入node.js中专门操作路径的模块

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

html页面中引用的js文件为xxx.js
例如 xxx.js为bundle.js

<script src="/bundle.js"></script>

webpack插件的作用

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

配置插件webpack-dev-server

安装命令:

npm i webpack-dev-server@3.11.2 -D

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

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

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

npm run dev

3. 在浏览器中访问'http://localhost:8080' 地址,查看自动打包效果
注意:webpack-dev-server会启动一个实时打包的http服务器

安装html-webpack-plugin

运行如下的命令,即可在项目中安装此插件:

npm install html-webpack-plugin@5.3.2 -D

配置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:[htmlPllugin],// 3. 通过plugin节点,使htmlPlugin 插件生效
}

html-webpack-plugin插件的作用

1. 通过HTML插件,将项目中的index.html放到项目的根目录中,也被放到了内存中,是点开链接直接显示index.html页面
2. HTML插件在生成的index.html页面,自动注入了打包的bundle.js

decServer 节点

在webpack.config.js配置文件中,可以通过devServer节点对webpack-dev-server插件进行更多的配置,示例代码如下:

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

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

webpack中的loader概述

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

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

打包处理css文件

1. 运行npm i style-loader@3.0.0 css-loader@5.2.6 -D命令,安装处理css文件的loader

npm i style-loader@3.0.0 css-loader@5.2.6 -D

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

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

其中,test表示匹配的文件类型,use表示对应要调用的loader

注意:
1. use数组中指定的loader顺序是固定的
2. 多个loader的调用顺序是:从后往前调用

loader处理css文件过程

1. webpack默认只能打包处理.js结尾的文件,处理不了其他后缀的文件
2. 由于代码中包含了index.css这个文件夹,因此webpack默认处理不了
3. 当webpack发现某个文件处理不了的时候,会查找webpack.config.js这个配置文件,看module.rules数组中,是否配置了对应的loader加载器.
4. webpack把index.css这个文件,先转交给最后一个loader进行处理(先转交给css-loader).
5. 当css-loader处理完毕之后,会把处理的结果,转交给下一个loader(转交给style-loader)
6. 当style-loader处理完毕之后,发现没有下一个loader了,于是就把处理的结果,转交给了webpack
7. webpack把style-loader处理结果,合并到/dist/bundle.js中,最终生成打包好的文件.

打包处理less文件

1. 运行npm i less-loader@10.0.1 less@4.1.1 -D命令

npm i less-loader@10.0.1 less@4.1.1 -D

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

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