vue day-01

vue1

webpack基本概念

什么是webpack

• 是一个第三方的包，用于分析，打包代码

使用webpack的好处

• 减少文件数量
• 缩减代码体积
• 提高浏览器的打开速度

webpack使用步骤

初始化包环境

• yarn init
• 可以一路按回车键

安装依赖包

• yarn add webpack webpack-cli -D

配置scripts（自定义命令）

• 在package.json中配置
  “scripts”:{
  “build”:“webpack”
  }

基础使用（两个js文件的合并）

• 新建src文档

• 里面需要包含入口

  • 比如index.js

• 新建一个其他的文件夹

  • 包含一个add.js

• index.js引入add.js文件

• 在终端执行yarn build命令

• 会默认生成dist文件，观察其代码

yarn bulid 执行流程

• 在package.json自定义build命令

• 执行webpack00。

• 是否配置文件

  • 根据文件找到入口

• 执行默认文件找到入口

• 构建依赖关系图，编译各个模块的文件

• 输出

• 指定文件

webpack配置

package.json

• “webpack”: “^5.69.1”,
  “webpack-cli”: “^4.9.2”,

  • 安装webpack环境

• “less”: “^4.1.2”,
  “less-loader”: “^10.2.0”,
  “style-loader”: “^3.3.1”,
  “css-loader”: “^6.6.0”,

  • 安装less，css配置

• “html-webpack-plugin”: “^5.5.0”,

  • 自动生成html文件配置

• “@babel/core”: “^7.17.5”,
  “@babel/preset-env”: “^7.16.11”,
  “babel-loader”: “^8.2.3”,

  • 字体图标配置

webpack.config.js

• mode:‘development’,

  • 处于开发环境

• mode:‘development’

  • 文件状态

• entry: ‘./src/main.js’,

  • 指定入口

• output: {
  path: path.resolve(__dirname, ‘dist’),
  filename: ‘bundle.js’,
  },

  • 指定生成的文档名和文件名

• devServer: {
  // open: true,
  port: 3000,
  },

  • 指定服务器端口

• plugins: [new HtmlWebpackPlugin(
  {
  template:’./public/index.html’
  }
  )],

  • 自动生成html文件

• {
  test: /.less$/i,
  use: [
  // compiles Less to CSS
  ‘style-loader’,
  ‘css-loader’,
  ‘less-loader’,
  ],
  },

  • 把less转化为css
    解析css
    加载到dom中

• {
  test: /.(gif|png)/,
  type: ‘asset’,
  },

  • 设置图片的格式
    对于8kb大小的图片判断，大于，生成文件，小于转化为base64格式

• {
  test: /.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
  loader: ‘babel-loader’,
  options: {
  presets: [’@babel/preset-env’]
  }
  }
  }

  • 降级处理

• {
  test: /.(eot|svg|ttf|woff|woff2)/,
  type:‘asset/resource’,
  generator: {
  filename: ‘static/[name][hash:6][ext]’
  }
  },

  • 配置字体图标

webpack开发服务器

为社么使用开发服务器

• 每次修改代码后，都需要从0开始构建依赖，这个过程比较费事

下载 yarn add webpack-dev-server -D

配置scripts（自定义命令）

• 在package.json中配置
  “scripts”:{
  “serve”:“webpack serve”
  }

启动开发服务器

• yarn serve