Vue 08上

Vue 08

Webpack

基本介绍

webpack是一个现代JavaScript应用程序的静态模拟打包器 webpack用于上线之前的代码打包（编译、文件的压缩、合并等操作）
编译：把Vue、js、less等相关的代码转换为浏览器能认识的原生代码
压缩：代码中的空格、回车换行、注释、变量名称等信息的优化，优化之后代码体积变小，提高网络传输效率
合并：多个文件合并成一个，减少网络请求的次数

初始化项目

index.html
src/js/index.js
src/js/common.js

基于命令行用法

初始化项目

npm init -y

安装依赖包

npm install webpack webpack-cli -D

判断安装成功的标注

.\node_modules\.bin\webpack -v
npx webpack -v

打包

.\node_modules\.bin\webpack --entry 要打包的文件名称 -o 打包后的文件路径
// 或者(npx是node环境自带的命令,作用是：自动从当前项目的跟目录中的node_modules\.bin目录中查找要执行的命令)
npx webpack --entry 要打包的文件名称 -o 打包后的文件路径
npx webpack --entry ./src/js/index.js -o ./src/js/

思考： webpack打包和Vue脚手架打包（npm run build）之间是什么关系？
Vue脚手架打包的底层过程其实是使用的是webpack（脚手架打包依赖的webpack）,只不过Vue脚手架封装了webpack的打包过程，我们看不到而已
为什么要封装webpack的打包过程？
因为封装之后用起来非常简单
为什么要学习webpack打包过程？
理解Vue脚手架内部的实现原理

基于配置文件用法

入口文件和出口文件
加载器
插件

入口文件和出口文件配置

在项目的根路径中创建一个配置文件

webpack.config.js

使用配置文件

–config可以指定配置文件的名称（默认名称是webpack.config.js） 如果配置文件名称不是webpack.config.js，必须指定（–config配置文件名称）
npx webpack

# 上面的命令等效于下面的命令（因为默认的配置文件名称就是webpack.config.js）
npx webpack --config webpack.config.js

# 如果配置文件名称不是webpack.config.js，如果是webpack.config.dev.js，必须添加--config选项
npx webpack --config webpack.config.dev.js

文件基本配置

const path = require('path')

const config = {
  // 配置入口文件名称（指定入口文件（告诉webpack你要打包那个文件））
  entry: './src/js/index.js',
  // 配置生成的打包后的文件（告诉webpack打包后的文件放到哪里）
  output: {
    // 打包好的文件放置的目录位置
    path: path.join(__dirname, 'dist'),
    // 打包后的文件名称
    filename: 'index.min.js'
  }
}

module.exports = config

加载器

安装相关依赖包

css-loader 把css文件转化js模块
style-loader 把css-loader的处理结果添加到页面

npm install style-loader css-loader -D

配置css加载器

module: {
  rules: [
    {
      // 配置加载器处理文件的匹配规则（匹配以.css结尾的文件）
      test: /\.css$/,
      // 上面匹配的文件交给如下的加载器处理
      // 如下加载器处理文件的规则是：从右向左
      // use的作用：配置加载器（用于处理test匹配的文件的内容）
      // css-loader 加载器作用：把css文件内容变成js代码
      // style-loader 加载器的作用：把css代码添加到html页面中
      use: ['style-loader', 'css-loader']
    }
  ]
}

关于加载器作用分析

webpack最终打包时，处理的各种类型的文件需要加载器实现

插件

应用场景一：清除目录中的所有文件

安装依赖包

npm install clean-webpack-plugin -D

导入

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

配置插件

plugins: [
  new CleanWebpackPlugin()
]