实际开发中不需要自己配置webpack,有CLI一键生成带有webpack的项目
前端工程化与webpack
1前端工程化
在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终就是实现前端的模块化、组件化、规范化、自动化。
1.模块化
js的模块化、css的模块化、其他资源的模块化
2.组件化
复用现有的UI结构、样式、行为
3.规范化
目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理
4.自动化
自动化管理、自动部署、自动化测试
目前前端工程化的主流解决方案:
webpack
parcel
2webpack的基本使用
2.1什么是webpack
webpack是前端项目工程化的具体解决方案。
webpack提供了前端模块化开发支持,以及代码压缩、处理浏览器js的兼容性、性能优化等功能。
2.2通过项目体验webpack
2.2.1创建列表隔行变色项目
1.新建项目空白目录,并运行
npm init -y
命令,初始化包管理配置文件package.json2.新建src源代码项目
3.新建src -> index.hmtl 首页和src -> index.js 脚本文件
4.初始化页面基本结构
5.运行
npm install jquery -S
命令,安装jQuery6.通过ES6 模块化的方式导入jQuery,实现列表隔行变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./index.js"></script> <!-- <script src="../dist/main.js"></script> --> </head> <body> <ul> <li>这是第 1 个li</li> <li>这是第 2 个li</li> <li>这是第 3 个li</li> <li>这是第 4 个li</li> <li>这是第 5 个li</li> <li>这是第 6 个li</li> <li>这是第 7 个li</li> <li>这是第 8 个li</li> <li>这是第 9 个li</li> </ul> </body> </html>
// 使用ES6导入语法,导入jQuery import $ from 'jquery' // 定义jQuery的入口 $( function() { $('li:odd').css('background-color', 'blue'); $('li:even').css('background-color', 'yellow'); } )
使用ES6导入语法,导入jQuery,存在浏览器的兼容性问题
import $ from ‘jquery
会报错,样式会无法显示,需要安装webpack
2.2.2在项目中安装webpack
npm install webpack webpack-cli -D
-D 装完后,把信息记录到package.json的devDependencies
-S 装完后,把信息记录到package.json的dependencies
项目开发和上线都要用到的包,用-S;只在开发阶段用,用-D
-S是–save的简写;-D是–save-dev的简写
2.2.3在项目中配置webpack
1.在项目的根目录中创建webpack.config.js的webpack的配置文件,并初始化如下的基本配置:
// 使用Node.js中的导出语法,向外导出一个webpack的配置对象 module.exports = { // 代表webpack运行的模式,可选值有两个development和production //development 开发时使用 //production 上线时使用 //development 打包时间短 文件大 开发用; production打包时间长 文件小 项目上线用 mode: 'development' }
注意:
凡是修改了webpack.config.js 配置文件,或修改了package.json配置文件,必须重启实时打包的服务器,否则最新的配置文件无法生效!
mode的可选值:
mode节点的可选值有两个,分别是:
1.development
开发环境
不会对打包生成的文件进行代码压缩和性能优化
打包速度快,适合在开发阶段使用
2.production
生产环境
会对打包生成的文件进行代码压缩和性能优化
打包速度很慢,仅适合在项目发布阶段使用
2.在webpack.json的script节点下,新增dev脚本
"scripts": { //script节点下的脚本可以通过npm run 脚本名 执行 "dev": "webpack" },
3.在终端运行
npm run dev
2.3webpack.config.js的作用
webpack.config.js是webpack的配置文件,webpack在真正开始打包构建之前,会先读取这个配置文件,从而基于给定的配置,对项目进行打包。
由于webpack是基于node.js开发出来的打包工具,在它的配置文件中支持使用node.js的相关语法和模块进行webpack的个性化配置。
2.4webpack的默认约定
在webpack4.x 和 5.x 的版本中,
1.默认的打包入口为src -> index.js
2.默认的输出文件路径为 dist -> main.js
可以在webpack.config.js中修改打包的默认约定。
2.5自定义打包的入口和出口
在webpack.config.js中,通过entry节点指定打包的入口,output节点指定打包的出口。
示例代码:
//导入node.js中操作路径模块 const path = require('path'); module.exports = { // 代表webpack运行的模式,可选值有两个development和production // development 代表开发时 // production 产品将要发布时 mode: 'development' // webpack.config.js 所在文件夹中的 src 文件夹下的 index 文件 entry: path.join(__dirname, './src/index.js'), //打包入口文件路径 output: { // webpack.config.js 所在文件夹中的 dist 文件夹下 path: path.join(__dirname, './dist'), //输出文件的存放路径 filename: 'main.js' //输出文件名称 } }
3webpack中的插件
3.1webpack插件的作用
安装和配置第三方插件,拓展webpack的能力,从而让webpack用起来更方便。
常用的webpack插件:
1.webpac-dev-server:
每当修改源代码,webpack会自动进行项目的打包和构建
2.html-webpack-plugin:
可以通过此插件自定制index.html页面的内容
3.2webpac-dev-server
3.2.1安装 webpac-dev-server
运行如下命令安装插件:
npm install webpac-dev-server -D
3.2.2配置 webpac-dev-server
1.修改package.json中的script的dev命令:
"scripts": { "dev": "webpack serve" },
2.再次运行 npm run dev。
3.在浏览器中访问 http://localhost:8080/ 查看打包效果。
webpack会启动一个实时打包的http服务器。
如果报错了是webpack-cli的版本不兼容,重新安装webpack-cli的最新版本。
npm install webpack webpack-cli -D
3.2.3打包生成文件的位置
不配置webpack-dev-server的情况下,webpack打包生成的文件,会存放到实际的物理磁盘上。
严格遵守开发者在webpack.config.js 中指定配置
根据output节点指定路径进行存放
配置了webpack-dev-server 之后,打包生成的文件存放到了内存中
不再根据output节点指定的路径,存放到实际的物理磁盘上
提高了实时打包输出的性能,因为内存比物理磁盘速度快很多
webpack-dev-server生成到内存中的文件,默认放到了项目的根目录中,而且是虚拟的、不可见的。
3.2.4修改html中引入的js文件路径
由于:
i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from /
对应的文件在内存中,文件之间的关系发生了变化。
所以需要修改html中导入的js。
<script src="/main.js"></script>
在浏览器中打开 http://localhost:8080/ 打开src(浏览器会自动打开index.html)
3.3html-webpack-plugin
3.3.1html-webpack-plugin作用
html-webpack-plugin会把指定的页面复制到根目录中,在复制页面的同时会自动注入一个脚本,使得可以直接访问链接查看网页的效果,不用在点击src文件夹。
3.3.2安装 html-webpack-plugin
npm install html-webpack-plugin -D
3.3.3在webpack.config.js文件中配置
配置之后的webpack.config.js文件:
//导入html-webpack-plugin插件 得到插件的构造函数 const HtmlPlugin = require('html-webpack-plugin') // new构造函数创建插件的实例对象 const htmlPlugin = new HtmlPlugin({ // 指定要复制哪个页面 template: './src/index.html', // 指定复制出来的文件名和存放路径 filename: './index.html' }) // 使用Node.js中的导出语法,向外导出一个webpack的配置对象 module.exports = { // 代表webpack运行的模式,可选值有两个development和production mode: 'development', // 插件的数组 将来webpack在运行时会加载并调用这些插件 plugins: [htmlPlugin] }
通过插件复制到项目根目录的index.html会被放到内存中,插件在生成index.html页面会自动注入打包的index.js文件。
3.4devServer节点
在webpack.config,js配置文件中,可以通过devServer节点对 webpack-dev-server插件进行更多的配置。
3.4.1设置打包完成后自动打开浏览器
// 使用Node.js中的导出语法,向外导出一个webpack的配置对象 module.exports = { // 代表webpack运行的模式,可选值有两个development和production mode: 'development', // 插件的数组 将来webpack在运行时会加载并调用这些插件 plugins: [htmlPlugin], devServer: { // 首次打包成功后自动打开浏览器 open:true, // 在http协议中如果端口号为80可以省略 port:80, // 指定主机运行的地址 host:'127.0.0.1' } }