Vue-1

（一）基本概念

1.前端开发

模块化（js的模块化、css的模块化、资源的模块化）
组件化（复用现有的UI结构、样式和行为）
规范化（目录结构的划分、编码规范化、接口规范化、Git分支管理）
自动化（自动化构件、自动部署、自动化测试）

2.前端工程化

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

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

早期的前端工程化解决方案
- grunt
- gulp
目前主流的前端工程化解决方案
- webpack
- parcel

4.package.json

dependencies（-S）：项目开发阶段和上线过程中都需要用到的包，-S是--save的简写
devDependencies（-D）：只在开发中使用到，上线后不需要的包，-D是--save-dev的简写

（二）webpack的基本使用

　　主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大功能

在项目中安装webpack

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

在项目中配置webpack
- 在根目录下创建文件：webpack.config.js，并初始化如以下的基本配置
- webpack.config.js是webpack的配置文件，webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。但由于webpack是基于node.js开发出来的打包工具，因此在它的配置文件中，支持使用node.js相关的语法和模块进行webpack的个性化配置。

//使用node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    //代表webpack运行的模式，可选值有development和production
    mode: 'development'
}

- 在package.json下的scripts节点下，新增dev脚本（注意在json文件下不要加注释）

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

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

npm run dev

webpack的基本使用
- 在webpack4._和5._的版本中
  - 默认的打包入口文件为src->index.js
  - 默认的输出文件路径为dist->main.js
- 在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口

//1.使用ES6导入语法导入jquery
import $ from 'jquery'
//2.定义jquer的入口函数
$(function() {
    //3.实现奇偶行变色
    $("li:odd").css('background-color', 'pink');
    $("li:even").css("background-color", 'skyblue');
})

- 安装和配置webpack-dev-server
  - 类似于node.js阶段使用的nodemon工具
  - 每当修改了源代码，webpack会自动进行项目的打包和构建
  - 安装webpack-dev-server

npm install webpack-dev-server@3.11.2 -D

- - 配置webpack-dev-server
    - 修改package.json->scripts中的dev命令

"scripts": {
    "dev": "webpack server"
  },

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

//如果出现报错
//[webpack-cli] Unable to load '@webpack-cli/serve' command
//[webpack-cli] TypeError: options.forEach is not a function 
//重新执行下列语句，再次运行
npm install webpack-cli -D

- webpack-dev-server工作原理
  - 由于该项目在端口号8080运行的，所以我们要通过8080端口查看样式的变化
  - 该工具使用内存保存自动生成的bunddle.js，所以我们应该将页面中引入的js改为<script src="/bundle.js"></script>
  - 进入8080端口后，进入src会打开默认的index.html界面能够查看到效果

html-webpack-plugin：将主页面复制一份放在根目录下
- 安装

npm install html-webpack-plugin@5.3.2 -D

- 配置const path = require("path")

//配置html-webpack-plugin
//1.导入HTML插件，得到一个构造函数
const HtmlPlugin = require("html-webpack-plugin")
//使用node.js中的导出语法，向外导出一个webpack的配置对象
//2.创建HTML插件实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',//指定原文件存储路径
    filename: './index.html'//指定生成的文件的存储路径
})
module.exports = {
    //代表webpack运行的模式，可选值有development和production
    mode: 'development',
    //通过entry节点指定打包的入口，指定要处理的文件路径
    // entry: path.join(__dirname,"./src/index1.js"),
    //通过output节点，指定打包的出口
　　//插件的数组，将来webpack在运行时，会加载并调用这些插件
    plugins: [htmlPlugin],//3.通过plugins节点，使htmlPlugin插件生效
    output: {
        path: path.join(__dirname,'dist'),
        filename: 'bundle.js'
    }
}

- 特点
  - 将路径的页面复制到根目录下
  - 在复制的页面中添加一个脚本引用内存中的bundle
devServer节点：可以对webpack-dev-server插件进行更多的配置
- 示例

devServer: {
        open: true,//初次打包完成后，自动打开浏览器
        host: '127.0.0.1',//实施打包所使用的主机地址
        port: 8080//实时打包所使用的端口号，如果端口号是80可以被省略
    }

（三）webpack文件中的loader

打包处理css文件
- 运行命令，安装处理css文件中的loader

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

- 在webpack.config.js中的module->rules数组中，添加loader规则
  - webpack默认只能打包处理js结尾的文件，处理不了其他后缀文件
  - 由于代码中包含了index.css文件，因此webpack无法处理
  - 当webpack发现某个文件处理不了时，会查找webpack.config.js这个配置文件，看module.rules数组中，是否配置了对应的loader加载器
  - webpack把index.css转交给最后一个loader（css-loader）进行处理
  - 在css-loader处理完之后，会把处理的结果转交给下一个loader（style-loader）
  - 当style-loader处理完之后，发现没有下一个loader，把处理了转交给webpack
  - webpack把style-loader合并到/index/bundle.js中，生成打包好的文件

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

打包处理less文件
- 运行命令

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

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

rules:[//文件后缀名的匹配规则
            //定义了不同模块对应的loader
            {test: /\.css$/,use:['style-loader','css-loader']},
            {test: /\.less$/,use:['style-loader','css-loader','less-loader']}
        ]

base64图片的优缺点
- 优点
  - 防止发起一些不必要的网络请求（性能优化）
- 缺点
  - 将图片转成base64字符串之后，其体积会增大
打包处理样式表中与url路径相关的文件
- 运行命令

npm i url-loader@4.1.1 file-loader@6.2.0 -D

- 添加loader规则

module: {//所有第三方文件模块的匹配规则
        rules:[//文件后缀名的匹配规则
            //定义了不同模块对应的loader
            {test: /\.css$/,use:['style-loader','css-loader']},
            {test: /\.less$/,use:['style-loader','css-loader','less-loader']},
            //如果需要调用的loader只有一个，则值传递一个字符串也可以，如果有多个loader，则必须指定数组
            {test: /\.jpg|png|gif$/,use:'url-loader?limit=47770'},
            //其中？之后，是loader的参数项，单位是字节
            //只有<=limit大小的图片，才会被转为base64格式的图片
        ]
    }

webpack打包高级js语法

　　　　webpack只能打包处理一部分的高级js语法，对于那些webpack无法处理的高级js语法，需要借助babel-loader进行打包处理

- 安装babel-loader相关的包

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.
5 -D

- 添加loader规则

module: {//所有第三方文件模块的匹配规则
        rules:[//文件后缀名的匹配规则
            //定义了不同模块对应的loader
            {test: /\.css$/,use:['style-loader','css-loader']},
            {test: /\.less$/,use:['style-loader','css-loader','less-loader']},
            //如果需要调用的loader只有一个，则值传递一个字符串也可以，如果有多个loader，则必须指定数组
            {test: /\.jpg|png|gif$/,use:'url-loader?limit=47770'},
            //其中？之后，是loader的参数项，单位是字节
            //只有<=limit大小的图片，才会被转为base64格式的图片
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
            //由于在node_modules中存在很多的js文件，但并未使用高级的js语法可以排除以提高效率
        ]

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

module.exports = {
    //声明babel可用的插件
    //将来：webpac在调用babel-loader的时候，会先加载plugins插件来使用
    plugins: [["@babel/plugin-proposal-decorators",{legacy: true}]]
}

（四）打包发布

在packa.json文件的scripts节点下，新增命令

"scripts": { "dev": "webpack serve", "build": "webpack --mode production"//项目发布时，运行build命令 },

- --mode是一个参数项，用来指定webpack的运行模式，production代表生产环境，会对打包生成的恩建进行代码压缩和性能优化
- 通过--mode指定的参数项，会覆盖webpack.config.js中的mode选项
在终端运行命令

npm run build

把JavaScript文件统一生成到js目录中

　　　　在webpack.config/js配置文件中的output节点中，进行如下的配置

output: {
        path: path.join(__dirname,'dist'),
        //明确告诉webpack将生成的bundle.js文件存放扫fist目录下的js子目录中
        filename: 'js/bundle.js',
    },

　　　　修改webpack中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径

　　　　注意：base64的图片是不会被打包进入images，当图片大小小图limit时，就可以被转换为base64格式

方法一：{test: /\.jpg|png|gif$/,use:{
                loader: 'url-loader',
                options:{
                    limit: 22228,
                    outputPath: 'image'
                    }
                },
            },

方法二：{test: /\.jpg|png|gif$/,use:'url-loader?limit=22224&outputPath=images'},
            //其中？之后，是loader的参数项，单位是字节
            //只有<=limit大小的图片，才会被转为base64格式的图片

　　　　为了在每次打包发布时自动清理dist目录下的旧文件，可以安装并配置clean-webpack-plugin插件

//1.安装清理dist目录下的webpack插件
npm install clean-webpack-plugin@3.0.0 -D
//2.按需导入插件、得到插件的构造函数之后，创建插件的实例对象
//左侧的方括号代表解构赋值
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin();
//3.把创建的cleanPlugin实例对象，挂载到plugins节点上
plugins: [htmlPlugin,cleanPlugin],

（五）Source Map：在发布中，为了保证安全性，防止源代码被泄露，尽量关闭Source Map

　　Source Map就是一个信息文件，里面存储着位置信息，也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置

　　有了它，出错的时候，除错工具直接显示原始代码，而不是转换后的diamante，能够极大地方便后期的调试

　　开发环境下默认生成的Source Map，记录的是生成后的代码位置，会导致运行时报错的行数与源代码的行数不一致的问题

//eval-source-map仅限在开发模式下使用，不建议在生产模式下使用
    //此选项生成的SourceMap能够保证运行时报错的行数与源代码的行数一致
    devtool: 'eval-source-map',

在生产环境下，如果指向定位报错的具体行数，而不想暴露源码，此时可以将devtool的值设置为nosources-source-map
- 在实际开发过程中建议使用

devtool: 'nosources-source-map',

在生产环境下，如果想在定位报错行数的同时，显示具体报错的代码，此时可以将devtool的值设置为source-map

//不建议使用
    devtool: 'source-map',

建议
- 开发环境下：
- 生产环境下：
  - 建议关闭SourceMap或将devtool的值设置为nosources-source-map
  - 好处：防止源码泄露，提高网站的安全性
导入文件，我们建议从外向内查找，使用@符号代表根目录，在配置文件中进行声明

resolve: {
        alias: {
            //告诉webpack，程序员写的@符号代表src目录
            '@':path.join(__dirname,'./src/')
        }
    }

在chrome中安装vue-devtools调试工具

　　　　教程：https://blog.csdn.net/weixin_43508199/article/details/123005570

posted @ 2022-04-28 17:11 Miraitowa56 阅读(37) 评论(0) 收藏举报

刷新页面返回顶部

Miraitowa56

Vue-1

公告