VUE前端工程化-2

VUE前端工程化-2
webpack的概念

webpack是一个流行的前端项目构建工具，可以解决目前web开发的困境。
webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性

 webpack的基本使用
1. 创建项目目录并初始化，初始化包管理配置文件package.json
  npm init -y
2. 新建src源代码目录
3. 新建src->index.html首页
4. 初始化首页基本结构
5. 运行npm install jquery -S安装JQuery
6. 通过模块化的形式，实现列表隔行变色
index.html文件
```
DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Documenttitle>
    <script src="./index.js">script>
  head>
  <body>
    <input type="text" placeholder="ceshi" />
    <ul>
      <li>这是第1个lili>
      <li>这是第2个lili>
      <li>这是第3个lili>
      <li>这是第4个lili>
      <li>这是第5个lili>
      <li>这是第6个lili>
      <li>这是第7个lili>
      <li>这是第8个lili>
      <li>这是第9个lili>
    ul>
  body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
```
index.js文件
```
import $ from "jquery"
$(function(){
    $("li:odd").css("backgroundColor","pink");
    $("li:even").css("backgroundColor","lightblue");
})
1
2
3
4
5
```
这种写法有问题，因为index.js文件中使用了import，这属于ES6的语法了，浏览器不兼容，所以需要使用webPack来打包

 安装和配置WebPack
1. 运行npm install webpack webpack-cli -D安装webpack相关的包
2. 在根目录中，创建名为webpack.config.js的webpack配置文件
3. 在webpack.config.js配置文件中，初始化如下基本配置
```
module.exports={
    mode:'development'//mode用来指定构建模式，这是开发模式，生产模式为production
}
1
2
3
```
1. 在package.json配置文件中的scripts节点下，新增dev脚本
```
"scripts":{
    "dev"："webpack" //scripts节点下的脚本，可以通过npm run执行
}
1
2
3
```
1. 在终端运行npm run dev，启动webpack进行项目打包
在运行完以上步骤后，会自动生成一个dist目录，且在dist目录中生成main.js文件，在index.html中更改

 配置打包的入口与出口

webpack的4.0版本默认约定：
- 打包的入口文件为src->index.js
- 打包的输出文件为src->main.js
如果要自定义打包的入口和出口，则需要更改webpack.config.js中的配置信息
```
const path = require("path") //导入node.js中专门操作路径的模块
module.exports = {
    entry:path.join(__dirname,"./src/index.js"),//打包入口文件的路径 __dirname是该文件的当前目录
    output:{
        path:path.join(__dirname,"./dist"),//输出文件的存放路径
        filename:"boundle.js" //输出文件的名称
    }
}
1
2
3
4
5
6
7
8
```
配置webpack自动打包

为什么要自动打包？如果修改某些js文件进行保存不会热重载，需要手动执行npm run dev
1. 安装自动打包工具npm install webpack-dev-server -D
2. 修改package.json ->scripts中的dev命令：
```
"scripts":{
    "dev":"webpack-dev-server" //scripts节点下的脚本，可以通过npm run执行
}
1
2
3
```
1. 将src->index.html中script节点下的脚本路径修改为路径/boundle.js，因为自动打包会将生成的js文件托管到根目录下（在内存中），至于是哪个路径，默认http://localhost:8080/
2. 运行npm run dev重新打包
注意：webpack-dev-server会启动一个实时打包的http服务器，

webpack-dev-server 打包生成的输出文件，默认放到项目根目录，而且是虚拟的在项目中看不到

 生成预览界面

设置访问路径打开默认的界面
1. 运行npm install html-webpack-plugin -D命令，安装生成预览页面的插件
2. 修改webpack.config.js文件头部区域，添加如下内容
```
//导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebpackPlugin({ //创建插件的实例对象
    template:"./src/index.html",//设定作为默认页面的文件
    filename:"index.html" //指定生成文件的名称，存储于内存中，在目录中不显示
});
1
2
3
4
5
6
```
1. 修改webpack.config.js文件中向外暴露的插件配置对象
```
module.exports ={
    plugins:[htmlPlugin] //plugin数组是webpack打包期会用到的插件
}
1
2
3
```
1. 在终端运行npm run dev，启动webpack进行项目打包
配置自动打包相关的参数

上面使用webpack自动打包完成后，需要手动在浏览器中输入网址，自动打开浏览器的设置如下：
```
//package.json中的配置

//--open 打包完成后自动打开浏览器
//--host 配置IP地址
//--port 配置端口
"scripts":{
    "dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}
1
2
3
4
5
6
7
8
```
相关阅读:
jupyter notebook 导入已经在pycharm里pip install过的包报错
 ROS stm32 CAN通信
 测试经理应该怎么写测试部门年终总结报告？
夏日漫步（BFS）-- 2023百度之星初赛第二场
 [Linux] Screen的简单使用与中途退出保持运行
 数据结构实战开发教程（八）选择排序和插入排序、冒泡排序和希尔排序、归并排序和快速排序、排序的工程应用示例
 解决from d2l import torch as d2l报pandas，numpy的相关问题
 uView2 LineProgress进度太小时显示不全的一种解决办法
 数据类型与运算符-java
程序环境和预处理
原文地址：https://blog.csdn.net/weixin_44064908/article/details/126713690

webpack的概念

webpack的基本使用

安装和配置WebPack

配置打包的入口与出口

配置webpack自动打包

生成预览界面

配置自动打包相关的参数