webpack一些基础知识点
核心概念
- Entry : 入口,执行构建的第一步
- Module : 会从配置的Entry开始递归找出所有依赖的模块
- Chunk :用于代码的分割与合并
- Loader:模块转换器
- Plugin:扩展插件,在特定时机注入扩展逻辑改变构建结果
- Output:输出结果
webpack是对jacascript打包的工具,不能识别其他的文件,所以需要配置loader进行识别
前言 项目目录结构
├─build
│ ├─webpack.base.conf.js //开发环境和生产环境都有的操作配置文件
│ ├─webpack.dev.conf.js //开发环境配置文件
│ ├─webpack.prod.conf.js //生产环境配置文件
│ ├─webpack.rules.conf.js //模块匹配规则
├─node_modules //依赖文件
├─public //静态文件存储位置
| |-index.html //项目模板文件
└─src
| ├─plugins
| ├─router
| ├─store
| ├─views
| |-App.vue
| |-main.ts
| |-shims-vue.d.ts
|-.env.dev //环境文件
|-.env.test
|-.env.prod
|-.gitigore
|-babel.config.js //bable配置文件
|-package.json
|-postcss.config.js //适配规则
|-tsconfig.json
1. 第一步初始化项目
yarn init -y 初始化项目 //-y是都回答yes 一键初始化
2. 第二步安装webpack三件套
// 安装webpack三件套
yarn add webpack webpack-cli webpack-dev-server -D
// -D 等价于--save-dev开发环境时的依赖
// -S 等价于--save生产环境时的依赖
//使用http://localhost:8080/webpack-dev-server/可以访问webpack-dev-server命令在 内存中生成的文件
3. 创建配置文件,分功能创建
├─build
│ ├─webpack.base.conf.js //公共配置
│ ├─webpack.dev.conf.js //mode为development配置
│ ├─webpack.prod.conf.js //mode为production配置
│ ├─webpack.rules.conf.js //loader配置
3.1 创建src文件夹,并在里面创建main.js文件
3.2书写入口路径和输出路径
//webpack.base.conf.js
const path = require("path")
module.exports = function (proMode) {
return {
// JavaScript 执行入口文件
entry: path.resolve(__dirname, "../src/main.ts"),
output: {
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, "../dist"),
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: "./js/[name].[chunkhash].js",
// publicPath: "./",//生产环境时使用
clean: true
},
}
}
4 创建环境文件
.env.dev
.env.test
.env.prod
4.1 书写环境内容
//.env.dev
NODE_ENV="development"
VUE_APP_BASE_API="/api"
VUE_APP_API_USER="/user"
VUE_APP_SHOWCONSOLE=true
4.2 配置环境变量
//Dotenv是一个零依赖模块,它将环境变量中的变量从.env文件加载到process.env中
// 安装dotenv
yarn add dotenv -D
yarn add cross-env -D
//webpack.base.conf.js
const webpack = require("webpack")
const envMode = process.env.envMode
require("dotenv").config({
path: `.env.${
envMode}`
})
const prefixRE = /^VUE_APP_/
let env = {
}
for (const key in process.env) {
if (key == "NODE_ENV" || key == "BASE_URL" || prefixRE.test(key)) {
env[key] = JSON.stringify(process.env[key])
}
}
module.exports = function (proMode) {
return {
plugins: [
new webpack.DefinePlugin({
// 定义环境和变量
'process.env': {
...env
}
}),
],
}
}
4.3 修改package.json启动命令
"scripts": {
"dev": "cross-env envMode=dev webpack serve --config ./build/webpack.dev.conf.js --color",
"build": "cross-env envMode=prod webpack --config build/webpack.prod.conf.js --color",
"build:test": "cross-env envMode=test webpack --config build/webpack.prod.conf.js --color"
},
- cross-env:运行跨平台设置和使用环境变量的脚本
- –config:使用哪个配置文件
- –color :开启控制台颜色
5 es6=>es5
//安装babel
yarn add @babel/core @babel/preset-env babel-loader -