webpack一些基础知识点

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 -D
yarn add core-js -S

5.1 匹配js进行转换

//webpack.rules.conf.js
module.exports = function (proMode