vue基础学习-1(了解内容)

一、前端工程化

• 模块化（js模块化，css模块化，资源模块化）

• 组件化（复用现有的UI结构、样式、行为）

• 规范化（目录结构的划分、编程规范化、接口规范化、Git分支管理）

• 自动化（自动化构建、自动部署、自动化测试）

1. webpack的基本使用（了解）

实际开发中不需要手动配置

webpack：前端工程化的具体解决方案

1.1 手动配置webpack项目

1. 创建项目文件，打开终端 npm init -y
2. 安装jQuery依赖 npm i jquery -S

//1.使用ES6语法，导入jquery
import $ from "jquery"

3. 在项目中安装webpack
   第一种：npm install webpack@5.42.1 webpack-cli@4.7.2 -D
   第二种：npm install --save-dev webpack
4. 配置webpack

• 在项目根目录下创建名为webpack.config.js,并初始化基本配置

// 使用node.js中的导出语法，向外导出一个webpack配置对象
module.exports={
    // 代表webpack运行的模式，可选值有两个development(开发环境)和production（生产环境），   
    mode:'development'
}

• 在package.json的script节点下，新增dev脚本如下

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

终端npm run dev 可运行项目实现

• 在html中引入

 <script src="../dist/main.js"></script>

main.js封装了项目的相关文件
5. 自定义打包的入口和出口
webpck4.x和5.x默认规定：
默认的打包入口文件是src->index.js ,默认的输出路口文件是dist->main.js
注意：可以在webpack.config.js中修改默认配置
entry：打包的入口
output：打包的出口

   //entry:'指定要处理哪个文件'
    entry:path.join(__dirname,'../src/index1.js'),
    //output:'指定生成的文件要放在哪里'
    output:{
        // 存放到目录,默认dist
        path:path.join(__dirname,'dist'),
        // 生成的文件名,默认main.js
        filename:'bundle.js'
    }

1.2 webpack中插件的使用

1. webpack-dev-server(每当修改了源代码，webpack会自动进行项目的打包和构建)
   安装：npm install webpack-dev-server@3.11.2 -D
   配置：

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

2. html-webpack-plugin（可以自定制index.html页面的内容,自动注入打包的main.js）
   安装：npm install html-webpack-plugin@5.3.2 -D
   配置：

// 1.导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin=new HtmlPlugin({
    template:'./src/index.html',//指定原文件存放路径
    filename:'./index.html'//指定生成文件的存放路径
})
// 2. 创建HTML插件的实例对象
module.exports={
    mode:'development',
    plugins:[htmlPlugin],//3. 通过plugin节点，使htmlPlugin插件生效
}

3. devServer节点
   在webpack.config.js（修改后必须重启服务器）配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置，示例代码如下：

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

1.3 webpack中的loader

webpack只能处理.js文件，非.js文件需要调用loader实现打包

1. 打包处理css文件
   安装loader：npm i style-loader@3.0.0 css-loader@5.2.6 -D
   配置（webpack-config.js)：

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

2. 打包处理less文件
   安装loader：npm i less-loader@10.0.1 less@4.1.1 -D
   配置（webpack-config.js)：

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

3. 打包处理样式表中与url路径相关的文件
   安装loader：npm i url-loader@4.1.1 file-loader@6.2.0 -D
   配置（webpack.config.js)：

module.exports={
    module:{//所有第三方模块匹配规则
        rules:[//文件后缀匹配规则
            {test:/\.jpg|png|gif$/,use:['url-loader?limit=22229']}
        ]
    }
}//?之后的参数limi用来指定图片的大小，单位为字节（byte），大于该文件大小不会转为base64格式

4. 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:[//注意：必须使用exclude指定排除项，因为node_modules目录下的第三方包不需要被打包
            {test:/\.js$/,use:['babel-loader'],exclude:/node_modules/}

        ]
    }
}//?之后的参数limi用来指定图片的大小，单位为字节（byte），大于该文件大小不会转为base64格式

在项目根目录中创建babel.config.js的配置文件：

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

1.4 打包发布

1. 配置webpack的打包发布
   在package.json文件的script节点下，新增build命令如下：

    "scripts": {
      "dev": "webpack serve",
      "build":" webpack --mode production"
    },

–mode是一个参数项，用来指定webpack的运行模式。production代表生产环境，会对打包生成的文件进行代码压缩和性能优化。
注意：–mode的参数项，会覆盖webpack.config.js的model选项
2. 优化图片和js文件路径，

// js，在output中多加一层路径
    output:{
        // 存放到目录,默认dist
        path:path.join(__dirname,'dist'),
        // 生成的文件名,默认main.js
        filename:'js/bundle.js'
    }
//图片，在配置url-loader的时候，多个参数之间，使用&符号进行分隔
 {test:/\.jpg|png|gif$/,use:['url-loader?limit=22229&outputPath=images']},

3. 配置和安装clean-webpack-plugin插件完成自动删除dist文件中的旧目录
   安装：npm install clean-webpack-plugin@3.0.0 -D
   配置（webpack-config.js):

//左侧的{}是解构赋值
const {CleanWebpackplugin}=require('clean-webpack-plugin')
const cleanPlugin =new CleanWebpackplugin()
module.exports={
    plugins :[cleanPlugin],//挂载插件
}

1.5 SourceMap的使用

这是一个信息文件，存储着位置信息，出错的时候将直接显示源代码，而不是转换后的代码，能够极大的方便后期调试
配置：（开发环境下）

module.exports={
    devtool :'eval-source-map',
    }

发布时：

• 在生产环境下，省略devtool能够防止代码泄露
  只定位行号，不暴露源码
• 可以把devtool设置为nosources-source-map

1.6 webpack@的应用

@引用时的路径
webpack.config.js

    resolve:{
      alias{
       '@':path.join(__dirname,'./src/')
      }
    }

例如：import msg form '@/msg.js'