VUE-Webpack基础知识点汇总
1.前端工程化
1.1.工程化四大模块
- 模块化
- js的模块化、css的模块化、资源的模块化
- 组件化
- 复用现有的UI结构、样式、行为
- 规范化
- 目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理
- 自动化
- 自动化构建、自动部署、自动化测试
2.webpack学习
2.1.概念
- webpack是前端项目工程化的具体解决方案。
- 主要功能：
- 提供了友好的前端模块化开发支持。
- 提供了代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。
- 提高了前端开发效率和项目的可维护性。
- 目前的VUE、React等前端项目，都是基于webpack进行工程化开发的。
2.2.基本使用
-
【案例】初始化项目完成隔行变色
-
第一步：新建项目空白目录，并运行如下命令，初始化包管理配置文件package.json
npm init -y -- 注意：文件目录必须纯英文
-
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G8yceDFt-1651403956283)(C:\Users\Dougl\Desktop\vue-study\1650981892659.png)]](https://img-blog.csdnimg.cn/1fcd1087e17142c9bd2cd78f571fa828.png)
-
第二步：新建src源代码目录
-
第三步：新建src->index.html首页和src->index.js脚本文件
-
第四步：初始化首页基本的结构
-
第五步：运行如下命令，安装jQuery
npm install jquery -S -- 简写版 -S == --save npm i jquery -S
-
第六步：通过ES6模块化的方式导入jQuery，实现列表隔行变色效果
-- 在index.js中导入jquery 导入命令如下： import $ from 'jquery' -- 导入jquery临时变量为 $
2.3.webpack安装
-
在终端或DOS窗口
npm install webpack@5.42.1 webpack-cli@4.7.2 -D -- 简写 -D == --save-dev
2.4.webpack配置
-
第一步：在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置：
// 使用Node.js 中的导出语法，向外导出一个webpack的配置对象 module.exports = { mode: 'development' //mode 用来指定构建模式，可选值有development 和 production } -- 结论：开发阶段使用development，追求打包速度，而不是体积，对包不压缩； -- 发版上线阶段使用production，追求体积小，而不是打包速度快，会对包进行压缩； -
第二步：在package.json的scripts节点下，新增dev脚本如下：
"scripts": { "dev": "webpack" //script 节点下的脚本，可以通过npm run 执行，例如 npm run dev } -
第三步：在终端中运行如下命令，启动webpack进行项目的打包构建
npm run dev
- 第四步：2.2案例bug修复
2.5.webpack中的默认规约
- 在webpack4.x和5.x的版本中，有默认规约如下：
- 默认的打包入口文件为src -> index.js
- 默认的输出文件路径为dist -> main.js
- 注意：可以在webpack.config.js中修改打包的默认约定
2.6.自定义打包的入口和出口
-
在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' //输出文件的名称 } }
2.7.webpack插件的作用
2.7.1.webpack-dev-server
-
【作用】保存即可自动打包
-
类似于node.js阶段用到的nodemon工具
-
每当修改了源代码，webpack会自动进行项目的打包和构建
-
【安装】当前项目根目录DOS运行如下的命令，即可在项目中安装此插件：
npm install webpack-dev-server@3.11.2 -D -
【配置】
-
修改package.json -> scripts 中的dev命令如下：
"scripts": { "dev": "webpack serve" //script 节点下的脚本，可以通过 npm run 执行 } -
再次运行npm run dev命令，重新进行项目的打包
-
在浏览器中访问http://localhost:8080地址，查看自动打包效果
-
-
【注意】 webpack-dev-server会启动一个实时打包的http服务器
- html页面应用dist下的js时，需要改为应用根目录下的内存中对应js；
- html页面应用dist下的js时，需要改为应用根目录下的内存中对应js；
2.7.2.html-webpack-plugin
-
webpack中的HTML插件(类似于一个模板引擎插件)
-
可以通过此插件自定制index.html页面的内容
-
【安装】运行如下命令，即可在项目中安装此插件：
npm install html-webpack-plugin@5.3.2 -D //下载插件安装到devDependencies节点 -
【配置】在webpack.config.js中新增配置如下：
//1.导入HTML插件 得到一个构造函数 const HtmlPlugin = require("html-webpack-plugin") //2.创建 HTML 插件的实例对象 const htmlPlugin = new HtmlPlugin({ template: './src/index.html', //指定原文件的存放路径 filename: './index.html' //指定生成的文件的存放路径 }) //3.通过plugins节点，使htmlPlugin插件生效 module.exports = { mode: 'development', plugins: [htmlPlugin] //插件数组，webpack运行时会加载并调用这些插件 } -
【作用】
- 通过html插件将项目src目录下的index.html复制到根目录下，并且放到内存中。
- HTML插件在内存中的index.html页面，自动注入了打包并在内存中的main.js文件。
2.7.3.devServer节点配置
-
【作用】启动项目默认启动浏览器打开index页面
-
【配置】在webpack.config.js配置文件中，通过devServer节点对webpack-dev-server插件进行更多配置：
devServer: { open: true, //初次打包完成后，自动打开浏览器 host: '127.0.0.1', //实时打包所使用的主机地址 port: 80 // 实时打包所用的端口号
}
- 【注意】凡是修改webpack.config.js配置文件,或者修改package.js配置文件，都必须重启实时打包服务器，否则最新的配置文件无法生效！
2.8.webpack中的loader
-
【概述】
- 在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。但是非.js后缀名结尾的模块webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错！
-
【作用】协助webpack打包处理待定的文件模块,例如：
- css-loader可以打包处理.css相关的文件。
- less-loader可以打包处理.less相关的文件。
- babel-loader可以打包处理webpack无法处理的高级JS语法。
-
【loader】调用过程如下：
2.8.1.loader处理css文件
-
【安装处理css文件的loader】
- 运行如下命令：
npm i style-loader@3.0.0 css-loader@5.2.6 -D 安装样式加载器和css加载器到devDependencies- 在webpack.config.js的module.exports内配置module -> rules数组中，添加loader规则如下：
module:{ //所有第三方文件模块的匹配规则 rules: [ //文件后缀名的匹配规则 顺序不可颠倒！ {test:/\.css/,use:['style-loader','css-loader']} ] }【注意】test：表示匹配的文件类型，use表示对应要调用的loader
- use数组中指定的loader顺序是固定的
- 多个loader的调用顺序是：从后往前调用
-
【小结】
- 第一步：将css文件引入对应的js文件中：import ‘./css/index.css’
- 第二步：在webpack.config.js中的module.export模块中增加module->rules数组对应的loader加载器。
- 第三步：重新打包启动即可
2.8.2.loader处理less文件
-
【安装处理less文件的loader】
- 运行如下命令：
npm i less-loader@10.0.1 less@4.1.1 -D- 在webpack.config.js的module.exports内配置module -> rules数组中，添加loader规则如下：
module: { //所有第三方文件模块的匹配规则 rules: [ //文件后缀名的匹配规则 {test:/\.less/,use:['style-loader','css-loader','less-loader']} ] }
2.8.3.loader处理url路径
-
【作用】处理样式表与url路径相关的文件，处理图片的loader
-
【安装处理url的loader】
- 运行如下命令：
npm i url-loader@4.1.1 file-loader@6.2.0 -D- 在webpack.config.js的module.exports内配置module -> rules数组中，添加loader规则如下：
module:{ rules:[ {test:/\.jpg|png|gif$/,use:'url-loader?limit=22229'} ] }- 【注意】其中？之后是loader的参数项：
- limit用来指定图片的大小，单位是字节(byte)
- 只有<=limit大小的图片，才会被转为base64格式的图片
-
【loader另外一种配置方式】
Vue3.0的配置方式- use参数以对象的形式进行配置：
module:{
rules:[
{test:/\.jpg|png|gif$/,
use: {
loader: 'url-loader',
options: {
limit=22229
}
}
}
]
}
2.8.4.loader处理高级js
-
【作用】webpack只能打包处理一部分高级的JavaScript语法，对于哪些webpack无法处理的高级js语法，需要借助babel-loader进行发包处理。
-
【安装处理高级js的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.exports内配置module -> rules数组中，添加loader规则如下：
{test:/\.js$/,use:'babel-loader',exclude:'/node_modules'}- 【注意】必须使用exclude指定排除项，因为node_modules目录下的第三方包不需要被打包！
-
【配置babel-loader】
- 第一步：在项目根目录下，创建名为babel.config.js的配置文件，定义Babel的配置想如下：
module.exports = { //声明 babel 可用的插件 plugins: [['@babel/plugin-proposal-decorators',{legacy:true}]] } -
【vue3.0】
不需要创建 babel.config.js进行配置babel-loader，可直接在webpack.config.js中配置，如下：
{
test: /\.js$/,
// exclude为排除项
// 表示 babel-loader只需处理开发者编写的js文件，不需要处理node_modules下的js文件
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: { //参数项
// 声明一个 babel 插件，此插件用来转换class中的高级语法
plugins: ['@babel/plugin-proposal-decorators']
}
}
}
2.9.webpack打包发布
- 第一步：在package.json文件的script节点下，新增build命令如下：
"scripts": {
"dev": "webpack serve",//开发环境中运行dev命令
"build": "webpack --mode production" //项目发布时，运行 build 命令
}
- 【注意】
- –model是一个参数项，用来指定webpack的运行模式。
- production代表生产环境，会对打包生成的文件进行代码压缩和性能优化。
- 通过 --model指定的参数项，会覆盖webpack.config.js中的mode选项的默认值。
2.9.1.打包发布优化配置
-
【js文件统一放入js目录】
- 修改webpack.config.js中的module.exports配置项下的output输出配置，修改filename目录：
output: { path: path.join(__dirname,'./dist'), //打包输出文件的存放路径 filename: 'js/main.js' //指定输出文件的名字 } -
【图片统一放入image目录】
- 修改webpack.config.js中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径：
{ test: /\.jpg|png|gif$/, use: { loader: "url-loader", options: { limit: 22228, //明确指定把打包生产的图片文件存储到dist目录下的images文件夹中 outputPath: 'images' } } } //第二种写法： {test:/\.jpg|png|git$/,use:'url-loader?limit=22228&outputPath=images'}
2.9.2.自动清理dist目录
-
【作用】每次运行打包时自动清理dist目录中的旧文件
-
【安装清理插件】
- 运行如下命令：
npm install clean-webpack-plugin@4.0.0 -D- 在
webpack.config.js中按需要导入插件、得到插件的构造函数之后，创建插件的实例对象：
const {CleanWebpackPlugin} = require('clean-webpack-plugin') const cleanPlugin = new CleanWebpackPlugin()- 把创建的cleanPlugin插件实例对象，挂载到plugin节点中
plugins: [htmlPlugin,cleanPlugin] //挂载插件
2.10.Source Map
- 【作用】console控制台报错显示源文件行号
- 【配置】在webpack.config.js中的module.exports模块中添加如下配置：
//1.开发调试阶段的配置：显示行号和源码文件
devtool: 'eval-source-map',
//2.在实际发布的时候，配置如下：只显示源码行号，不显示源码文件
//在生产环境下，只定位(实际代码)报错的具体行数，且不暴露源码
devtool: 'nosources-source-map',
//在生产环境下，既可以定位源代码报错的行数，同时也会展示具体报错的源码，设置如下：
devtool: 'source-map'
2.11.全局配置别名
- 【作用】配置全局目录结构别名，不在使用…/进行反向目录查询，直接使用@进行正向目录加载
- 【配置】在webpack.config.js中的module.exports模块中新增配置如下：
//配置全局别名
resolve: {
alias: {
//告诉webpack,全局代码中的'@'代表 src目录
'@': path.join(__dirname,'./src')
}
}
3.webpack配置内容总结
3.1.webpack.config.js
// 定义导入路径
const path = require('path')
//1.导入HTML插件 得到一个构造函数
const HtmlPlugin = require("html-webpack-plugin")
//2.创建 HTML 插件的实例对象
const htmlPlugin = new HtmlPlugin({
template: './src/index.html', //指定原文件的存放路径
filename: './index.html' //指定生成的文件的存放路径
})
//1.导入清理插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
//2.构造清理插件的实例对象
const cleanPlugin = new CleanWebpackPlugin()
// 使用Node.js 中的导出语法，向外导出一个webpack的配置对象
module.exports = {
devtool: 'nosources-source-map', //console控制台显示报错行号
mode: 'development', //mode 用来指定构建模式，可选值有development 和 production
entry: path.join(__dirname,'./src/index.js'), //指定初始化加载的默认文件入口
output: {
path: path.join(__dirname,'./dist'), //打包输出文件的存放路径
filename: 'js/main.js' //指定输出文件的名字
},
//挂载插件
plugins: [htmlPlugin,cleanPlugin], //3.通过plugins节点，使htmlPlugin插件生效
devServer: {
open: true, //初次打包完成后，自动打开浏览器
host: '127.0.0.1', //实时打包所使用的主机地址
port: 80 // 实时打包所用的端口号
},
module:{ //所有第三方文件模块的匹配规则
rules: [ //文件后缀名的匹配规则 定义了不同模块对应的loader
//1.处理css样式文件的loader
{test:/\.css/,use:['style-loader','css-loader']},
//2.处理less样式文件的loader
{test:/\.less/,use:['style-loader','css-loader','less-loader']},
//3.处理图片的url的loader 在配置多个参数之间，使用&进行连接
{test:/\.jpg|png|gif$/,use:'url-loader?limit=22229&outputPath=images'},
//4.使用babel-loader处理高级的js文件,注意需要排除第三方包中的高级js文件
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
]
},
//配置全局别名
resolve: {
alias: {
//告诉webpack,全局代码中的'@'代表 src目录
'@': path.join(__dirname,'./src')
}
}
}
3.2.package.json
{
"name": "change-rows-color",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack serve", //本地开发环境启动命令
"build": "webpack --mode production" //生产发布打包启动命令
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.6.0"
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/plugin-proposal-decorators": "^7.14.5",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^5.2.6",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"less": "^4.1.1",
"less-loader": "^10.0.1",
"style-loader": "^3.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.42.1",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^3.11.2"
}
}
303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
