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()
]