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) {
    return [{
            test: /\.(t|j)s$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    cacheDirectory: true
                }
            }
        },
    ]
}

5.2 安装TypeScript并使用babel进行转换

//安装ts
yarn add typescript -D
// 解析 typescript 的 babel 预
yarn add @babel/preset-typescript -D
//polyfill 箭头函数
yarn add @babel/plugin-transform-runtime -D
//支持 ts 类的写法
yarn add @babel/plugin-proposal-class-properties -D
//支持三点展开符
yarn add @babel/plugin-proposal-object-rest-spread -D
yarn add @babel/runtime @babel/runtime-corejs3 core-js -S

5.3 创建babel.config.js

const presets = [
    [
        "@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": "3.19.1"
        }
    ],
    [
        '@babel/preset-typescript', // 引用Typescript插件
        {
            allExtensions: true, // 支持所有文件扩展名，否则在vue文件中使用ts会报错
        },
    ],
]
const plugins = [
    //按需引入vant组件
    [
        "import",
        {
            "libraryName": "vant",
            "libraryDirectory": "es",
            "style": true
        }, "vant"
    ],
    [
        '@babel/plugin-transform-runtime',
        {
            corejs: 3,
        },
    ],
    '@babel/proposal-class-properties',
    '@babel/proposal-object-rest-spread',

]
module.exports = {
    plugins,
    presets
}

6 自动生成HTML文件

yarn add html-webpack-plugin -D

6.1 html-webpack-plugin配置

//webpack.base.conf.js
const HtmlWebpackPlugin = require("html-webpack-plugin");

const cdn = {
    dev: {
        css: [],
        js: []
    },
    prod: {
        css: [],
        js: [
            'https://lib.baomitu.com/vue/3.0.11/vue.runtime.global.prod.js',
            "https://lib.baomitu.com/vue-router/4.0.6/vue-router.global.prod.min.js",
            "https://lib.baomitu.com/vuex/4.0.0/vuex.global.prod.min.js"
        ]
    }
}

module.exports = function (proMode) {
    return {
        plugins: [
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, "../public/index.html"),  //引用模板位置
                filename: "index.html",  //生成的html，路径相对于output.path
                title: "webpack+vue3",
                minify: {

                    collapseWhitespace: true,  //是否折叠空白
                    preserveLineBreaks: false,  
                    minifyCSS: true,	//是否压缩
                    minifyJS: true,
                    removeComments: false
                },
                files: proMode ? cdn.prod : cdn.dev  
            }),
        ],
    }
}

6.2 创建public文件夹，在里面创建index.html

// public/index.html
//需将模板中的