• webpack5基础和配置

    初步体验webpack打包

    webpack是一个静态资源打包工具。
    它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。
    输出的文件就是编译好的文件，就可以在浏览器段运行了。
    1.初始化最简单的一个目录文件，手动创建
    在这里插入图片描述
    main.js

    import count from "./js/count";
import sum from "./js/sum";

console.log(count(2,1));
console.log(sum(1,2,3,4));

    • 1
    • 2
    • 3
    • 4
    • 5

    index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>webpack</h3>
    <!-- 这里直接运行报错 浏览器不识别ES6模块化 -->
    <!-- <script src="../src/main.js"></script> -->
    <!-- 运行的时候改成这个路径，webpack打包好的js文件 -->
    <script src="../dist/main.js"></script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    2.下载依赖
    npm init -y
    初始化package.json文件 修改一下 main 的路径 ./src/main.js

    {
  "name": "webpack_code",
  "version": "1.0.0",
  "description": "",
  "main": "./src/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    注意：package.json中name字段不能叫做webpack，否则下一步会报错
    npm i webpack webpack-cli -D
    3.启用webpack
    开发模式
    npx webpack ./src/main.js --mode=development
    生产模式
    npx webpack ./src/main.js --mode=production （生产环境会对代码压缩，文件非常小）

    默认webpack会将文件打包输出到dist目录下，我们查看dist目录下文件情况就好了

    npx webpack：是用来运行本地安装 webpack包的。
    ./src/main.js：指定webpack从main.js文件开始打包，不但会打包main.js，还会将其依赖也一起打包进来。
    –mode=xxx：指定模式（环境）

    webpack本身功能比较少，只能处理js资源，一旦遇到css等其他资源就会报错。

    5大核心概念

    1.entry（入口）
    指示webpack从哪个文件开始打包
    2.outpu（输出）
    指示webpack打包完的文件输出到哪里去，如何命名等
    3.loader（加载器）
    webpack本身只能处理js、json等资源，其他资源需要借助loader，webpack才能解析
    4.plugins（插件）
    扩展webpack的功能
    5.mode（模式）
    主要由两种模式：
    开发模式：development
    生成模式：production
    准备webpack配置文件
    在项目 根目录 新建文件：webpack.config.js

    const path=require('path');//nodejs核心模块，专门用来处理路径问题
module.exports={
     //入口
    entry:'./src/main.js', //相对路径
     //输出
    output:{
        //文件的输出路径
        //__dirname  nodejs的变量，代表当前文件的文件夹目录
        path:path.resolve(__dirname,'dist'),//绝对路径
        //文件名
        filename:'main.js'
    },
     //加载器
    module:{
        rules:[
            //loader的配置
        ]
    },
     //插件
    plugins:[
        //plugin的配置
    ],
     //模式
    mode:'development',
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    运行打包：npx webpack

    开发模式介绍

    1.编译代码，使浏览器能识别运行
    开发时我们有样式资源，字体图标，图片资源，html资源等，webpack默认都不能处理这些资源，所以我们要加载配置来编译这些资源
    2.代码质量检查，树立代码规范
    提前检查代码的一些隐患，让代码运行时能更加健壮。
    提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。
    官方文档

    处理样式资源Css资源

    （less，sass也是这样的处理步骤）
    1，下载包
    npm i css-loader style-loader -D
    css-loader：负责将css文件编译成webpack能识别的模块
    style-loader：会动态创建一个style标签，里面放置webpack中css模块内容

    2. 创建一个css资源引入
    main.js

    import count from "./js/count";
import sum from "./js/sum";
//想要webpack打包资源，必须引入该资源
import './css/index.css'
console.log(count(2,1));
console.log(sum(1,2,3,4));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    3.webpack.config.js 配置（如果有less，sass往rules里面添加即可）
    处理图片资源 不需要下载和配置，如果想转换base64就需要配置一下
    修改输出文件目录
    处理字体图标资源
    处理其他资源（比如视频，音频等等）

    const path=require('path');//nodejs核心模块，专门用来处理路径问题
//安装的插件需要引入
const ESLintPlugin=require('eslint-webpack-plugin')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
     //入口
    entry:'./src/main.js', //相对路径
     //输出
    output:{
        //所有文件的输出路径
        //__dirname  nodejs的变量，代表当前文件的文件夹目录
        path:path.resolve(__dirname,'dist'),//绝对路径
        //入口文件打包输出文件名
        filename:'static/js/main.js',
        //原理，在打包前，将path整个目录内容清空，再进行打包
        clean:true, //自动清空上次打包内容
    },
     //加载器
    module:{
        rules:[
            //loader的配置
            {
                test:/\.css$/i, //只检测.css结尾的文件
                use:[ //执行顺序，从右到左（从下到上）
                    "style-loader", //将js中css通过创建style标签添加html文件中生效
                    "css-loader"  //将css资源编译成commonjs的模块到js中
                ]
            },
            {
                test: /\.less$/i,
                use: [
                  // 使用多个loader
                  'style-loader',
                  'css-loader',
                  'less-loader', //将less编译成css文件
                ],
            },
            {
                test:/\.(png|jpe?g|glf|webp|svg)$/,
                type:"asset",
                parser:{
                    dataUrlCondition:{
                        //小于10kb的图片转base64
                        //优点，减少请求数量，缺点，体积会更大
                        maxSize:10 * 1024,//10kb
                    }
                },
                generator:{
                    //输出图片名称
                    //[hash:10] hash值取前10位
                    filename:"static/images/[hash:10][ext][query]"
                }
            },
            {
                test:/\.(ttf|woff2?|mp3|mp4|avi)$/,  //处理字体图标资源或者其他资源
                type:"asset/resource",
                generator:{
                    //输出名称
                    filename:"static/media/[hash:10][ext][query]"
                }
            },
            {
                test:/\.js$/,  //处理字体图标资源或者其他资源
                exclude:/node_modules/, //排除node_modules中的js文件（这些文件不处理）
                loader:'babel-loader',
                //写这里也行，写外面babel.config.js里面也行
                // options:{
                //     presets:["@babel/preset-env"]
                // }
            }
        ]
    },
     //插件
    plugins:[
        //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context:path.resolve(__dirname,"src"),
        }),
        new HtmlWebpackPlugin({
            //模板。以public/index.html文件创建新的html文件
            //新的html文件特点：1，结构和原来一致，2.自动引入打包输出的资源
            template:path.resolve(__dirname,"public/index.html")
        })
    ],
    //开发服务器:不会输出资源，在内存中编译打包
    devServer:{
        host:'localhost',//启动服务器域名
        port:'3000',//启动服务器端口
        open:true,//是否自动打开浏览器
    },
     //模式
    mode:'development',
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94

    eslint使用

    它是用来检测js和jsx语法的工具，可以配置各项功能
    使用eslint，关键是写eslint配置文件，里面写上各种rules规则，将来运行eslint时就会以写的规则对代码进行检查
    配置文件由很多种写法：
    .eslintrc.*：新建文件，位于项目根目录
    配置说明
    1.下载包
    npm i eslint-webpack-plugin eslint -D

    vscode可以安装一个插件 ESLint
    安装了这个插件就需要在配置一个文件 .eslintignore
    忽略dist文件，里面的不检查

    dist

    • 1

    2.定义.eslintrc.js 配置文件

    module.exports={
    //继承Eslint规则
    extends:['eslint:recommended'],
    env:{
        node:true,//启用node中全局变量
        browser:true,//启用浏览器中全局变量
    },
    parserOptions:{
        ecmaVersion:6, //语法环境ES6
        sourceType:'module' //es  module
    },
    rules:{
        "no-var":2 ,//不能使用var定义变量
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    babel使用

    主要用于将ES6语法编写的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中
    1.下载
    npm i babel-loader @babel/core @babel/preset-env -D

    2.定义babel配置文件 babel.config.js

    module.exports={
    //智能预设，能够编译ES6语法
    presets:["@babel/preset-env"]
}

    • 1
    • 2
    • 3
    • 4

    处理html资源

    1.下载
    npm install --save-dev html-webpack-plugin
    2.引入

    const HtmlWebpackPlugin=require('html-webpack-plugin')


    • 1
    • 2

    自动化
    每次写完代码都需要手动输入指令才能编译代码，太麻烦，希望一切自动化
    1.下载
    npm i webpack-dev-server -D

    2.配置 webpack.config.js

    //开发服务器:不会输出资源，在内存中编译打包
    devServer:{
        host:'localhost',//启动服务器域名
        port:'3000',//启动服务器端口
        open:true,//是否自动打开浏览器
    },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    3.运行
    npx webpack serve

    生产模式

    生产模式是开发完成代码后，需要得到代码将来部署上线
    主要对代码进行优化，让其运行性能更好。
    1，优化代码运行性能
    2，优化代码打包速度
    准备两个配置文件来放不同的配置
    在这里插入图片描述
    webpack.dev.js 文件

    const path=require('path');//nodejs核心模块，专门用来处理路径问题
//安装的插件需要引入
const ESLintPlugin=require('eslint-webpack-plugin')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
     //入口
    entry:'./src/main.js', //相对路径
     //输出
    output:{
        //所有文件的输出路径
        //开发模式没有输出
        path:undefined,
        //入口文件打包输出文件名
        filename:'static/js/main.js',
    },
     //加载器
    module:{
        rules:[
            //loader的配置
            {
                test:/\.css$/i, //只检测.css结尾的文件
                use:[ //执行顺序，从右到左（从下到上）
                    "style-loader", //将js中css通过创建style标签添加html文件中生效
                    "css-loader"  //将css资源编译成commonjs的模块到js中
                ]
            },
            {
                test: /\.less$/i,
                use: [
                  // 使用多个loader
                  'style-loader',
                  'css-loader',
                  'less-loader', //将less编译成css文件
                ],
            },
            {
                test:/\.(png|jpe?g|glf|webp|svg)$/,
                type:"asset",
                parser:{
                    dataUrlCondition:{
                        //小于10kb的图片转base64
                        //优点，减少请求数量，缺点，体积会更大
                        maxSize:10 * 1024,//10kb
                    }
                },
                generator:{
                    //输出图片名称
                    //[hash:10] hash值取前10位
                    filename:"static/images/[hash:10][ext][query]"
                }
            },
            {
                test:/\.(ttf|woff2?|mp3|mp4|avi)$/,  //处理字体图标资源或者其他资源
                type:"asset/resource",
                generator:{
                    //输出名称
                    filename:"static/media/[hash:10][ext][query]"
                }
            },
            {
                test:/\.js$/,  //处理字体图标资源或者其他资源
                exclude:/node_modules/, //排除node_modules中的js文件（这些文件不处理）
                loader:'babel-loader',
                //写这里也行，写外面babel.config.js里面也行
                // options:{
                //     presets:["@babel/preset-env"]
                // }
            }
        ]
    },
     //插件
    plugins:[
        //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context:path.resolve(__dirname,"../src"),
        }),
        new HtmlWebpackPlugin({
            //模板。以public/index.html文件创建新的html文件
            //新的html文件特点：1，结构和原来一致，2.自动引入打包输出的资源
            template:path.resolve(__dirname,"../public/index.html")
        })
    ],
    //开发服务器:不会输出资源，在内存中编译打包
    devServer:{
        host:'localhost',//启动服务器域名
        port:'3000',//启动服务器端口
        open:true,//是否自动打开浏览器
    },
     //模式
    mode:'development',
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92

    运行
    npx webpack serve --config ./config/webpack.dev.js

    webpack.prod.js 文件

    const path=require('path');//nodejs核心模块，专门用来处理路径问题
//安装的插件需要引入
const ESLintPlugin=require('eslint-webpack-plugin')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
     //入口
    entry:'./src/main.js', //相对路径
     //输出
    output:{
        //所有文件的输出路径
        //__dirname  nodejs的变量，代表当前文件的文件夹目录
        path:path.resolve(__dirname,'../dist'),//绝对路径
        //入口文件打包输出文件名
        filename:'static/js/main.js',
        //原理，在打包前，将path整个目录内容清空，再进行打包
        clean:true, //自动清空上次打包内容
    },
     //加载器
    module:{
        rules:[
            //loader的配置
            {
                test:/\.css$/i, //只检测.css结尾的文件
                use:[ //执行顺序，从右到左（从下到上）
                    "style-loader", //将js中css通过创建style标签添加html文件中生效
                    "css-loader"  //将css资源编译成commonjs的模块到js中
                ]
            },
            {
                test: /\.less$/i,
                use: [
                  // 使用多个loader
                  'style-loader',
                  'css-loader',
                  'less-loader', //将less编译成css文件
                ],
            },
            {
                test:/\.(png|jpe?g|glf|webp|svg)$/,
                type:"asset",
                parser:{
                    dataUrlCondition:{
                        //小于10kb的图片转base64
                        //优点，减少请求数量，缺点，体积会更大
                        maxSize:10 * 1024,//10kb
                    }
                },
                generator:{
                    //输出图片名称
                    //[hash:10] hash值取前10位
                    filename:"static/images/[hash:10][ext][query]"
                }
            },
            {
                test:/\.(ttf|woff2?|mp3|mp4|avi)$/,  //处理字体图标资源或者其他资源
                type:"asset/resource",
                generator:{
                    //输出名称
                    filename:"static/media/[hash:10][ext][query]"
                }
            },
            {
                test:/\.js$/,  //处理字体图标资源或者其他资源
                exclude:/node_modules/, //排除node_modules中的js文件（这些文件不处理）
                loader:'babel-loader',
                //写这里也行，写外面babel.config.js里面也行
                // options:{
                //     presets:["@babel/preset-env"]
                // }
            }
        ]
    },
     //插件
    plugins:[
        //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context:path.resolve(__dirname,"../src"),
        }),
        new HtmlWebpackPlugin({
            //模板。以public/index.html文件创建新的html文件
            //新的html文件特点：1，结构和原来一致，2.自动引入打包输出的资源
            template:path.resolve(__dirname,"../public/index.html")
        })
    ],
     //模式
    mode:'production',
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88

    打包
    npx webpack --config ./config/webpack.prod.js

    简化运行代码的长度 配置 package.json

     "scripts": {
    "start":"npm run dev",
    "dev": "webpack serve --config ./config/webpack.dev.js",
    "build":"webpack  --config ./config/webpack.prod.js"
  },

    • 1
    • 2
    • 3
    • 4
    • 5

    提取css成单独文件

    css文件目前被打包到js文件中，当js文件加载时，会创建一个style标签来生成样式
    这样对于网站来说，会出现闪屏现象，用户体验不好
    应该是单独的css文件，通过link标签加载性能才好
    1.下载
    npm i mini-css-extract-plugin -D
    2.配置webpack.prod.js文件

    const path=require('path');//nodejs核心模块，专门用来处理路径问题
//安装的插件需要引入
const ESLintPlugin=require('eslint-webpack-plugin')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const MiniCssExtractPlugin=require("mini-css-extract-plugin")
module.exports={
     //入口
    entry:'./src/main.js', //相对路径
     //输出
    output:{
        //所有文件的输出路径
        //__dirname  nodejs的变量，代表当前文件的文件夹目录
        path:path.resolve(__dirname,'../dist'),//绝对路径
        //入口文件打包输出文件名
        filename:'static/js/main.js',
        //原理，在打包前，将path整个目录内容清空，再进行打包
        clean:true, //自动清空上次打包内容
    },
     //加载器
    module:{
        rules:[
            //loader的配置
            {
                test:/\.css$/i, //只检测.css结尾的文件
                use:[ //执行顺序，从右到左（从下到上）
                   MiniCssExtractPlugin.loader, //提取css成单独文件
                    "css-loader"  //将css资源编译成commonjs的模块到js中
                ]
            },
            {
                test: /\.less$/i,
                use: [
                  // 使用多个loader
                  MiniCssExtractPlugin.loader, //提取css成单独文件
                  'css-loader',
                  'less-loader', //将less编译成css文件
                ],
            },
            {
                test:/\.(png|jpe?g|glf|webp|svg)$/,
                type:"asset",
                parser:{
                    dataUrlCondition:{
                        //小于10kb的图片转base64
                        //优点，减少请求数量，缺点，体积会更大
                        maxSize:10 * 1024,//10kb
                    }
                },
                generator:{
                    //输出图片名称
                    //[hash:10] hash值取前10位
                    filename:"static/images/[hash:10][ext][query]"
                }
            },
            {
                test:/\.(ttf|woff2?|mp3|mp4|avi)$/,  //处理字体图标资源或者其他资源
                type:"asset/resource",
                generator:{
                    //输出名称
                    filename:"static/media/[hash:10][ext][query]"
                }
            },
            {
                test:/\.js$/,  //处理字体图标资源或者其他资源
                exclude:/node_modules/, //排除node_modules中的js文件（这些文件不处理）
                loader:'babel-loader',
                //写这里也行，写外面babel.config.js里面也行
                // options:{
                //     presets:["@babel/preset-env"]
                // }
            }
        ]
    },
     //插件
    plugins:[
        //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context:path.resolve(__dirname,"../src"),
        }),
        new HtmlWebpackPlugin({
            //模板。以public/index.html文件创建新的html文件
            //新的html文件特点：1，结构和原来一致，2.自动引入打包输出的资源
            template:path.resolve(__dirname,"../public/index.html")
        }),
        new MiniCssExtractPlugin({
            filename:'static/css/main.css'
        })
    ],
     //模式
    mode:'production',
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92

    Css兼容性处理

    1.下载包
    npm i postcss-loader postcss postcss-preset-env -D
    2.配置webpack.prod.js文件
    在css-loader后面 在less-loader前面 加代码

    const path=require('path');//nodejs核心模块，专门用来处理路径问题
//安装的插件需要引入
const ESLintPlugin=require('eslint-webpack-plugin')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const MiniCssExtractPlugin=require("mini-css-extract-plugin")
module.exports={
     //入口
    entry:'./src/main.js', //相对路径
     //输出
    output:{
        //所有文件的输出路径
        //__dirname  nodejs的变量，代表当前文件的文件夹目录
        path:path.resolve(__dirname,'../dist'),//绝对路径
        //入口文件打包输出文件名
        filename:'static/js/main.js',
        //原理，在打包前，将path整个目录内容清空，再进行打包
        clean:true, //自动清空上次打包内容
    },
     //加载器
    module:{
        rules:[
            //loader的配置
            {
                test:/\.css$/i, //只检测.css结尾的文件
                use:[ //执行顺序，从右到左（从下到上）
                   MiniCssExtractPlugin.loader, //提取css成单独文件
                    "css-loader",  //将css资源编译成commonjs的模块到js中
                    {
                        loader:"postcss-loader",
                        options:{ //配置项
                            postcssOptions:{
                                plugins:[
                                    "postcss-preset-env",//能解决大多数兼容性问题
                                ]
                            }
                        }
                      },
                ]
            },
            {
                test: /\.less$/i,
                use: [
                  // 使用多个loader
                  MiniCssExtractPlugin.loader, //提取css成单独文件
                  'css-loader',
                  {
                    loader:"postcss-loader",
                    options:{ //配置项
                        postcssOptions:{
                            plugins:[
                                "postcss-preset-env",//能解决大多数兼容性问题
                            ]
                        }
                    }
                  },
                  'less-loader', //将less编译成css文件
                ],
            },
            {
                test:/\.(png|jpe?g|glf|webp|svg)$/,
                type:"asset",
                parser:{
                    dataUrlCondition:{
                        //小于10kb的图片转base64
                        //优点，减少请求数量，缺点，体积会更大
                        maxSize:10 * 1024,//10kb
                    }
                },
                generator:{
                    //输出图片名称
                    //[hash:10] hash值取前10位
                    filename:"static/images/[hash:10][ext][query]"
                }
            },
            {
                test:/\.(ttf|woff2?|mp3|mp4|avi)$/,  //处理字体图标资源或者其他资源
                type:"asset/resource",
                generator:{
                    //输出名称
                    filename:"static/media/[hash:10][ext][query]"
                }
            },
            {
                test:/\.js$/,  //处理字体图标资源或者其他资源
                exclude:/node_modules/, //排除node_modules中的js文件（这些文件不处理）
                loader:'babel-loader',
                //写这里也行，写外面babel.config.js里面也行
                // options:{
                //     presets:["@babel/preset-env"]
                // }
            }
        ]
    },
     //插件
    plugins:[
        //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context:path.resolve(__dirname,"../src"),
        }),
        new HtmlWebpackPlugin({
            //模板。以public/index.html文件创建新的html文件
            //新的html文件特点：1，结构和原来一致，2.自动引入打包输出的资源
            template:path.resolve(__dirname,"../public/index.html")
        }),
        new MiniCssExtractPlugin({
            filename:'static/css/main.css'
        })
    ],
     //模式
    mode:'production',
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112

    package.json 文件还需要做兼容那些处理
    实际开发用的是这种

     "browserslist":[
    "last 2 version",
    "> 1%",
    "not dead"
  ]

    • 1
    • 2
    • 3
    • 4
    • 5

    Css压缩

    1.下载包
    npm i css-minimizer-webpack-plugin -D
    2.配置webpack.prod.js文件

    const path=require('path');//nodejs核心模块，专门用来处理路径问题
//安装的插件需要引入
const ESLintPlugin=require('eslint-webpack-plugin')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const MiniCssExtractPlugin=require("mini-css-extract-plugin")
const CssMinimizerPlugin=require("css-minimizer-webpack-plugin")

//定义一个函数抽取重复的代码  用来获取处理样式的loader
function getStyleLoader(pre){
    return [ //执行顺序，从右到左（从下到上）
                MiniCssExtractPlugin.loader, //提取css成单独文件
                "css-loader",  //将css资源编译成commonjs的模块到js中
                {
                    loader:"postcss-loader",
                    options:{ //配置项
                        postcssOptions:{
                            plugins:[
                                "postcss-preset-env",//能解决大多数兼容性问题
                            ]
                        }
                    }
                },
                pre,
            ].filter(Boolean);
}


module.exports={
     //入口
    entry:'./src/main.js', //相对路径
     //输出
    output:{
        //所有文件的输出路径
        //__dirname  nodejs的变量，代表当前文件的文件夹目录
        path:path.resolve(__dirname,'../dist'),//绝对路径
        //入口文件打包输出文件名
        filename:'static/js/main.js',
        //原理，在打包前，将path整个目录内容清空，再进行打包
        clean:true, //自动清空上次打包内容
    },
     //加载器
    module:{
        rules:[
            //loader的配置
            {
                test:/\.css$/i, //只检测.css结尾的文件
                use:getStyleLoader(),
            },
            {
                test: /\.less$/i,
                use:getStyleLoader('less-loader'),
            },
            {
                test:/\.(png|jpe?g|glf|webp|svg)$/,
                type:"asset",
                parser:{
                    dataUrlCondition:{
                        //小于10kb的图片转base64
                        //优点，减少请求数量，缺点，体积会更大
                        maxSize:10 * 1024,//10kb
                    }
                },
                generator:{
                    //输出图片名称
                    //[hash:10] hash值取前10位
                    filename:"static/images/[hash:10][ext][query]"
                }
            },
            {
                test:/\.(ttf|woff2?|mp3|mp4|avi)$/,  //处理字体图标资源或者其他资源
                type:"asset/resource",
                generator:{
                    //输出名称
                    filename:"static/media/[hash:10][ext][query]"
                }
            },
            {
                test:/\.js$/,  //处理字体图标资源或者其他资源
                exclude:/node_modules/, //排除node_modules中的js文件（这些文件不处理）
                loader:'babel-loader',
                //写这里也行，写外面babel.config.js里面也行
                // options:{
                //     presets:["@babel/preset-env"]
                // }
            }
        ]
    },
     //插件
    plugins:[
        //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context:path.resolve(__dirname,"../src"),
        }),
        new HtmlWebpackPlugin({
            //模板。以public/index.html文件创建新的html文件
            //新的html文件特点：1，结构和原来一致，2.自动引入打包输出的资源
            template:path.resolve(__dirname,"../public/index.html")
        }),
        new MiniCssExtractPlugin({
            filename:'static/css/main.css'
        }),
        new CssMinimizerPlugin(),
    ],
     //模式
    mode:'production',
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107

    html压缩

    （默认生成模式已经开启了：html压缩和js压缩，不需要额外进行配置）

    webpack高级配置

    （其实就是进行webpack优化）
    1.提升开发体验
    2.提升打包构建速度
    3.减少代码体积
    4.优化代码运行性能

    1.提升开发体验

    SourceMap(源代码映射)是一个用来生成源代码与构建后代码一一映射的文件的方案。
    它会生成一个xxx.map文件，里面包含源代码和构建后代码每一行，每一列的映射关系，当构建后代码出错了，会通过xxx.map文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。

    开发模式：cheap-module-source-map
    优点：打包编辑速度快，只包含行映射
    缺点：没有列映射
    webpack.dev.js

     //模式
    mode:'development',
    devtool:"cheap-module-source-map"

    • 1
    • 2
    • 3

    生产模式：source-map
    优点：包含行/列映射
    缺点：打包编辑速度更慢
    webpack.prod.js

      //模式
    mode:'production',
    devtool:"source-map"

    • 1
    • 2
    • 3

    2.提升打包构建速度

    HotModuleReplacement(HMR/热模块替换)：在程序运行中，替换，添加或删除模块，而无需重新加载整个页面。
    基本配置 webpack.dev.js

    //开发服务器:不会输出资源，在内存中编译打包
    devServer:{
        host:"localhost",//启动服务器域名
        port:"3000", //启动服务器端口号
        open:true,//是否自动打开浏览器
        hot:true,//开启HMR功能（只能用于开发环境，生成环境不需要了）默认值是true
    },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    此时css样式经过style-loader处理，已经具备HMR功能了，但是js还不行。
    main.js

    import count from "./js/count";
import sum from "./js/sum";
//想要webpack打包资源，必须引入该资源
import './css/index.css'
import './css/iconfont.css'
console.log(count(2,1));
console.log(sum(1,2,3,4,5));

if(module.hot){
    //判断是否支持热模块替换功能
    module.hot.accept("./js/count")
    module.hot.accept("./js/sum")
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    上面这样写很麻烦，所以实际开发我们会使用其他loader来解决（比如：vue-loader，react-hot-loader）
    oneOf（就是只能匹配上一个loader，剩下的就不匹配了）

    include/exclude（包含/排除）两者只能存在一个

    {
                    test:/\.js$/,  //处理字体图标资源或者其他资源
                    exclude:/node_modules/, //排除node_modules中的js文件（这些文件不处理）
                    //include:path.resolve(__dirname,"../src"),//只处理src下的文件，其他文件不出来
                    loader:'babel-loader',
                    //写这里也行，写外面babel.config.js里面也行
                    // options:{
                    //     presets:["@babel/preset-env"]
                    // }
                }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    cache（对Eslint检查和Babel编译结果进行缓存）

    {
                    test:/\.js$/,  //处理字体图标资源或者其他资源
                    exclude:/node_modules/, //排除node_modules中的js文件（这些文件不处理）
                    //include:path.resolve(__dirname,"../src"),//只处理src下的文件，其他文件不出来
                    loader:'babel-loader',
                    //写这里也行，写外面babel.config.js里面也行
                    options:{
                        // presets:["@babel/preset-env"]
                        cacheDirectory:true,//开启babel缓存
                        cacheCompression:false,//关闭缓存文件压缩
                    }
                }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context:path.resolve(__dirname,"../src"),
            exclude:"node_modules", //默认值  
            cache:true,//开启缓存
            cacheLocation:path.resolve(__dirname,"../node_modules/.cache/eslintcache")  //指定缓存文件
        }),

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    thead（多进程打包，开启电脑的多个进程同时干一件事，速度更快）
    需要注意：请仅在特别耗时的操作中使用，因为每个进程启动就有大约为600ms左右开销。
    我们启动进程的数量就是我们CPU的核数。
    1.如何获取CPU的核数，因为每个电脑都不一样

    //nodejs核心模块，直接使用
const os=require('os');
//cpu核数
const threads=os.cpus().length;

    • 1
    • 2
    • 3
    • 4

    2.下载包
    npm i thread-loader -D
    3.配置

     {
                    test:/\.js$/,  //处理字体图标资源或者其他资源
                    exclude:/node_modules/, //排除node_modules中的js文件（这些文件不处理）
                    //include:path.resolve(__dirname,"../src"),//只处理src下的文件，其他文件不出来
                    use:[
                        {
                            loader:"thread-loader", //开启多进程
                            options:{
                                works:threads, //进程数量
                            }
                        },
                        {
                            loader:'babel-loader',
                            //写这里也行，写外面babel.config.js里面也行
                            options:{
                                // presets:["@babel/preset-env"]
                                cacheDirectory:true,//开启babel缓存
                                cacheCompression:false,//关闭缓存文件压缩
                            }
                        }
                    ]
                }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
     //插件
    plugins:[
        //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context:path.resolve(__dirname,"../src"),
            exclude:"node_modules", //默认值  
            cache:true,//开启缓存
            cacheLocation:path.resolve(__dirname,"../node_modules/.cache/eslintcache"),  //指定缓存文件
            threads,//开启多进程和设置进程数量
        }),
        new HtmlWebpackPlugin({
            //模板。以public/index.html文件创建新的html文件
            //新的html文件特点：1，结构和原来一致，2.自动引入打包输出的资源
            template:path.resolve(__dirname,"../public/index.html")
        }),
        new MiniCssExtractPlugin({
            filename:'static/css/main.css'
        }),
        // new CssMinimizerPlugin(),
        // new TerserWebpackPlugin({
        //     parallel:threads,//开启多进程和设置进程数量
        // })
    ],
    optimization:{
        //压缩的操作
        minimizer:[
            //压缩css
            new CssMinimizerPlugin(),
            //压缩js
            new TerserWebpackPlugin({
                parallel:threads,//开启多进程和设置进程数量
            })
        ]
    },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    3.减少代码体积

    tree Shaking（用于描述移除js中的没有使用上的代码）
    webpack已经默认开启了这个功能，无需其他配置
    注意：它依赖 ES模块化
    babel
    1.下载包
    npm i @babel/plugin-transform-runtime -D

    @babel/plugin-transform-runtime(禁用了Babel自动对每个文件的runtime注入，而是引入，并且使所有辅助代码从这里引用)

    {
                    test:/\.js$/,  //处理字体图标资源或者其他资源
                    exclude:/node_modules/, //排除node_modules中的js文件（这些文件不处理）
                    //include:path.resolve(__dirname,"../src"),//只处理src下的文件，其他文件不出来
                    use:[
                        {
                            loader:"thread-loader", //开启多进程
                            options:{
                                works:threads, //进程数量
                            }
                        },
                        {
                            loader:'babel-loader',
                            //写这里也行，写外面babel.config.js里面也行
                            options:{
                                // presets:["@babel/preset-env"]
                                cacheDirectory:true,//开启babel缓存
                                cacheCompression:false,//关闭缓存文件压缩
                                plugins:['@babel/plugin-transform-runtime'],//减少代码体积
                            }
                        }
                    ]
                }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    image Minimizer（用来压缩图片的插件）
    注意：如果项目中图片都是在线连接，那么就不需要了，本地项目静态图片才需要进行压缩
    1.下载包
    npm i image-minimizer-webpack-plugin imagemin -D
    还有剩下包需要下载，有两种模式：
    无损压缩
    npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
    有损压缩
    npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D

    注意：有时候网络问题，需要多下载几次，不然就使用翻墙软件下载

    2.配置，以无损压缩配置为例 打包的时候报错 不知道啥问题导致的

     optimization:{
        //压缩的操作
        minimizer:[
            //压缩css
            new CssMinimizerPlugin(),
            //压缩js
            new TerserWebpackPlugin({
                parallel:threads,//开启多进程和设置进程数量
            }),
            //压缩图片
            new ImageMinimizerPlugin({
                minimizer: {
                  implementation: ImageMinimizerPlugin.imageminGenerate,
                  options: {
                    plugins: [
                      ["gifsicle", { interlaced: true }],
                      ["jpegtran", { progressive: true }],
                      ["optipng", { optimizationLevel: 5 }],
                      [
                        "svgo",
                        {
                          plugins: [
                            "preset-default",
                            "prefixIds",
                            {
                              name: "sortAttrs",
                              params: {
                                xmlnsOrder: "alphabetical",
                              },
                            },
                          ],
                        },
                      ],
                    ],
                  },
                },
          }),
        ]
    },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    4.优化代码运行性能

    code split(代码分割）
    1.分割文件：将打包生成的文件进行分割，生成多个js文件
    单入口

    optimization:{
        //压缩的操作
        minimizer:[
            //压缩css
            new CssMinimizerPlugin(),
            //压缩js
            new TerserWebpackPlugin({
                parallel:threads,//开启多进程和设置进程数量
            }),
           
        ],
        //代码分割配置
        splitChunks:{
            chunks:"all",
            //其他都用默认值
        }
    },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    2.按需加载：需要哪个文件就加载哪个文件。
    main.js 动态引入按需加载

    import count from "./js/count";
import sum from "./js/sum";

//想要webpack打包资源，必须引入该资源
import './css/index.css'
import './css/iconfont.css'
console.log(count(2,1));
console.log(sum(1,2,3,4,5));

document.getElementById('btn').onclick=function(){
    //动态引入按需加载
    //eslint不能识别动态导入需要，需要额外追加配置
    import("./js/math").then(({mul})=>{
         console.log(mul(3,1));
    })
}

if(module.hot){
    //判断是否支持热模块替换功能
    module.hot.accept("./js/count")
    module.hot.accept("./js/sum")
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    .eslintrc.js 解决动态语法导入报错

    module.exports={
    //继承Eslint规则
    extends:['eslint:recommended'],
    env:{
        node:true,//启用node中全局变量
        browser:true,//启用浏览器中全局变量
    },
    parserOptions:{
        ecmaVersion:6, //语法环境ES6
        sourceType:'module' //es  module
    },
    rules:{
        "no-var":2 ,//不能使用var定义变量
    },
    plugins:['import']  //解决动态语法导入报错
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    给模块命名
    1.main.js

    import count from "./js/count";
import sum from "./js/sum";

//想要webpack打包资源，必须引入该资源
import './css/index.css'
import './css/iconfont.css'
console.log(count(2,1));
console.log(sum(1,2,3,4,5));

document.getElementById('btn').onclick=function(){
    //动态引入按需加载
    //eslint不能识别动态导入需要，需要额外追加配置
    // /* webpackChunkName:"math" */  webpack魔法命名
    import(/* webpackChunkName:"math" */ "./js/math").then(({mul})=>{
         console.log(mul(3,1));
    })
}

if(module.hot){
    //判断是否支持热模块替换功能
    module.hot.accept("./js/count")
    module.hot.accept("./js/sum")
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    2.配置webpack.prod.js文件

    //输出
    output:{
        //所有文件的输出路径
        //__dirname  nodejs的变量，代表当前文件的文件夹目录
        path:path.resolve(__dirname,'../dist'),//绝对路径
        //入口文件打包输出文件名
        filename:'static/js/main.js',
        //给打包输出的其他文件命名
        chunkFilename:"static/js/[name].js",
        //原理，在打包前，将path整个目录内容清空，再进行打包
        clean:true, //自动清空上次打包内容
    },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    统一命名 webpack.prod.js

    const path=require('path');//nodejs核心模块，专门用来处理路径问题
//安装的插件需要引入
const ESLintPlugin=require('eslint-webpack-plugin')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const MiniCssExtractPlugin=require("mini-css-extract-plugin")
const CssMinimizerPlugin=require("css-minimizer-webpack-plugin")
const TerserWebpackPlugin=require("terser-webpack-plugin")
// const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin")

//nodejs核心模块，直接使用
const os=require('os');
//cpu核数
const threads=os.cpus().length;
//定义一个函数抽取重复的代码  用来获取处理样式的loader
function getStyleLoader(pre){
    return [ //执行顺序，从右到左（从下到上）
                MiniCssExtractPlugin.loader, //提取css成单独文件
                "css-loader",  //将css资源编译成commonjs的模块到js中
                {
                    loader:"postcss-loader",
                    options:{ //配置项
                        postcssOptions:{
                            plugins:[
                                "postcss-preset-env",//能解决大多数兼容性问题
                            ]
                        }
                    }
                },
                pre,
            ].filter(Boolean);
}


module.exports={
     //入口
    entry:'./src/main.js', //相对路径
     //输出
    output:{
        //所有文件的输出路径
        //__dirname  nodejs的变量，代表当前文件的文件夹目录
        path:path.resolve(__dirname,'../dist'),//绝对路径
        //入口文件打包输出文件名
        filename:'static/js/[name].js',
        //给打包输出的其他文件命名
        chunkFilename:"static/js/[name].chunk.js",
        //图片，字体等通过type：asset处理资源命名方式
        assetModuleFilename:"static/media/[hash:10][ext][query]",
        //原理，在打包前，将path整个目录内容清空，再进行打包
        clean:true, //自动清空上次打包内容
    },
     //加载器
    module:{
        rules:[
            //loader的配置
           {
              //每个文件只能被其中一个loader配置处理
            oneOf:[
                {
                    test:/\.css$/i, //只检测.css结尾的文件
                    use:getStyleLoader(),
                },
                {
                    test: /\.less$/i,
                    use:getStyleLoader('less-loader'),
                },
                {
                    test:/\.(png|jpe?g|glf|webp|svg)$/,
                    type:"asset",
                    parser:{
                        dataUrlCondition:{
                            //小于10kb的图片转base64
                            //优点，减少请求数量，缺点，体积会更大
                            maxSize:10 * 1024,//10kb
                        }
                    },
                    // generator:{
                    //     //输出图片名称
                    //     //[hash:10] hash值取前10位
                    //     filename:"static/images/[hash:10][ext][query]"
                    // }
                },
                {
                    test:/\.(ttf|woff2?|mp3|mp4|avi)$/,  //处理字体图标资源或者其他资源
                    type:"asset/resource",
                    // generator:{
                    //     //输出名称
                    //     filename:"static/media/[hash:10][ext][query]"
                    // }
                },
                {
                    test:/\.js$/,  //处理字体图标资源或者其他资源
                    exclude:/node_modules/, //排除node_modules中的js文件（这些文件不处理）
                    //include:path.resolve(__dirname,"../src"),//只处理src下的文件，其他文件不出来
                    use:[
                        {
                            loader:"thread-loader", //开启多进程
                            options:{
                                works:threads, //进程数量
                            }
                        },
                        {
                            loader:'babel-loader',
                            //写这里也行，写外面babel.config.js里面也行
                            options:{
                                // presets:["@babel/preset-env"]
                                cacheDirectory:true,//开启babel缓存
                                cacheCompression:false,//关闭缓存文件压缩
                                plugins:['@babel/plugin-transform-runtime'],//减少代码体积
                            }
                        }
                    ]
                }
            ]
           }
        ]
    },
     //插件
    plugins:[
        //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context:path.resolve(__dirname,"../src"),
            exclude:"node_modules", //默认值  
            cache:true,//开启缓存
            cacheLocation:path.resolve(__dirname,"../node_modules/.cache/eslintcache"),  //指定缓存文件
            threads,//开启多进程和设置进程数量
        }),
        new HtmlWebpackPlugin({
            //模板。以public/index.html文件创建新的html文件
            //新的html文件特点：1，结构和原来一致，2.自动引入打包输出的资源
            template:path.resolve(__dirname,"../public/index.html")
        }),
        new MiniCssExtractPlugin({
            filename:'static/css/[name].css',
            chunkFilename:'static/css/[name].chunk.css'
        }),
        // new CssMinimizerPlugin(),
        // new TerserWebpackPlugin({
        //     parallel:threads,//开启多进程和设置进程数量
        // })
       
    ],
    optimization:{
        //压缩的操作
        minimizer:[
            //压缩css
            new CssMinimizerPlugin(),
            //压缩js
            new TerserWebpackPlugin({
                parallel:threads,//开启多进程和设置进程数量
            }),
            //压缩图片  以下代码打包报错  不知道哪里问题
        //     new ImageMinimizerPlugin({
        //         minimizer: {
        //           implementation: ImageMinimizerPlugin.imageminGenerate,
        //           options: {
        //             plugins: [
        //               ["gifsicle", { interlaced: true }],
        //               ["jpegtran", { progressive: true }],
        //               ["optipng", { optimizationLevel: 5 }],
        //               [
        //                 "svgo",
        //                 {
        //                   plugins: [
        //                     "preset-default",
        //                     "prefixIds",
        //                     {
        //                       name: "sortAttrs",
        //                       params: {
        //                         xmlnsOrder: "alphabetical",
        //                       },
        //                     },
        //                   ],
        //                 },
        //               ],
        //             ],
        //           },
        //         },
        //   }),
        ],
        //代码分割配置
        splitChunks:{
            chunks:"all",
            //其他都用默认值
        }
    },
     //模式
    mode:'production',
    devtool:"source-map"
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190

    preload(告诉浏览器立即加载资源) / prefetch（告诉浏览器在空闲时才开始加载资源）

    共同点: 都只会加载资源，并不执行。都有缓存
    区别：preload加载优先级高，prefetch加载优先级低。
    preload只能加载当前页面需要使用的资源，prefetch可以加载当前页面资源，也可以加载下一个页面需要使用的资源。

    下载包
    npm install --save-dev @vue/preload-webpack-plugin

    const PreloadWebpackPlugin=require("@vue/preload-webpack-plugin") 
//插件
    plugins:[
        new PreloadWebpackPlugin({
            // rel:'preload',
            // as:'script',
            rel:'prefetch',
        })
    ],

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    core-js(是专门用来做ES6以及以上的API的polyfill（垫片/补丁，就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性）)
    下载包
    npm i core-js

    main.js

    import count from "./js/count";
import sum from "./js/sum";
//完整引入
// import 'core-js'
//按需加载
// import 'core-js/es/promise'

//想要webpack打包资源，必须引入该资源
import './css/index.css'
import './css/iconfont.css'
console.log(count(2,1));
console.log(sum(1,2,3,4,5));

document.getElementById('btn').onclick=function(){
    //动态引入按需加载
    //eslint不能识别动态导入需要，需要额外追加配置
    // /* webpackChunkName:"math" */  webpack魔法命名
    import(/* webpackChunkName:"math" */ "./js/math").then(({mul})=>{
         console.log(mul(3,1));
    })
}

if(module.hot){
    //判断是否支持热模块替换功能
    module.hot.accept("./js/count")
    module.hot.accept("./js/sum")
}

new Promise((resolve)=>{
    setTimeout(()=>{
        resolve();
    },1000)
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    自动引入
    文档
    babel.config.js

    module.exports={
    //智能预设，能够编译ES6语法
    presets:[
        [
            "@babel/preset-env",
            {
                useBuiltIns:'usage',//按需加载自动引入
                corejs:3
            }
        ]
    ]
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    PWA(渐进式网络应用程序，在离线时应用程序能够继续运行功能) 兼容性比较差
    下载包
    npm i workbox-webpack-plugin -D
    文档
    配置main.js

    import count from "./js/count";
import sum from "./js/sum";
//完整引入
// import 'core-js'
//按需加载
// import 'core-js/es/promise'

//想要webpack打包资源，必须引入该资源
import './css/index.css'
import './css/iconfont.css'
console.log(count(2,1));
console.log(sum(1,2,3,4,5));

document.getElementById('btn').onclick=function(){
    //动态引入按需加载
    //eslint不能识别动态导入需要，需要额外追加配置
    // /* webpackChunkName:"math" */  webpack魔法命名
    import(/* webpackChunkName:"math" */ "./js/math").then(({mul})=>{
         console.log(mul(3,1));
    })
}

if(module.hot){
    //判断是否支持热模块替换功能
    module.hot.accept("./js/count")
    module.hot.accept("./js/sum")
}

new Promise((resolve)=>{
    setTimeout(()=>{
        resolve();
    },1000)
})

const arr=[1,2,3,4];
console.log(arr.includes(1));

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/service-worker.js').then(registration => {
        console.log('SW registered: ', registration);
      }).catch(registrationError => {
        console.log('SW registration failed: ', registrationError);
      });
    });
  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
     //插件
    plugins:[
        new WorkboxPlugin.GenerateSW({
            //这些选项帮助快速启用 ServiceWorkers
            //不允许遗留任何‘旧的’ ServiceWorkers
            clientsClaim:true,
            skipWaiting:true
        })
    ],

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    npm i serve -g 全局安装

    serve dist 运行

    Notwork——》开启 Offline 离线环境 看效果

    webpack.prod.js完整代码

    const path=require('path');//nodejs核心模块，专门用来处理路径问题
//安装的插件需要引入
const ESLintPlugin=require('eslint-webpack-plugin')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const MiniCssExtractPlugin=require("mini-css-extract-plugin")
const CssMinimizerPlugin=require("css-minimizer-webpack-plugin")
const TerserWebpackPlugin=require("terser-webpack-plugin")
// const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin")
const PreloadWebpackPlugin=require("@vue/preload-webpack-plugin")
const WorkboxPlugin=require('workbox-webpack-plugin')
//nodejs核心模块，直接使用
const os=require('os');
//cpu核数
const threads=os.cpus().length;
//定义一个函数抽取重复的代码  用来获取处理样式的loader
function getStyleLoader(pre){
    return [ //执行顺序，从右到左（从下到上）
                MiniCssExtractPlugin.loader, //提取css成单独文件
                "css-loader",  //将css资源编译成commonjs的模块到js中
                {
                    loader:"postcss-loader",
                    options:{ //配置项
                        postcssOptions:{
                            plugins:[
                                "postcss-preset-env",//能解决大多数兼容性问题
                            ]
                        }
                    }
                },
                pre,
            ].filter(Boolean);
}


module.exports={
     //入口
    entry:'./src/main.js', //相对路径
     //输出
    output:{
        //所有文件的输出路径
        //__dirname  nodejs的变量，代表当前文件的文件夹目录
        path:path.resolve(__dirname,'../dist'),//绝对路径
        //入口文件打包输出文件名
        filename:'static/js/[name].js',
        //给打包输出的其他文件命名
        chunkFilename:"static/js/[name].chunk.js",
        //图片，字体等通过type：asset处理资源命名方式
        assetModuleFilename:"static/media/[hash:10][ext][query]",
        //原理，在打包前，将path整个目录内容清空，再进行打包
        clean:true, //自动清空上次打包内容
    },
     //加载器
    module:{
        rules:[
            //loader的配置
           {
              //每个文件只能被其中一个loader配置处理
            oneOf:[
                {
                    test:/\.css$/i, //只检测.css结尾的文件
                    use:getStyleLoader(),
                },
                {
                    test: /\.less$/i,
                    use:getStyleLoader('less-loader'),
                },
                {
                    test:/\.(png|jpe?g|glf|webp|svg)$/,
                    type:"asset",
                    parser:{
                        dataUrlCondition:{
                            //小于10kb的图片转base64
                            //优点，减少请求数量，缺点，体积会更大
                            maxSize:10 * 1024,//10kb
                        }
                    },
                    // generator:{
                    //     //输出图片名称
                    //     //[hash:10] hash值取前10位
                    //     filename:"static/images/[hash:10][ext][query]"
                    // }
                },
                {
                    test:/\.(ttf|woff2?|mp3|mp4|avi)$/,  //处理字体图标资源或者其他资源
                    type:"asset/resource",
                    // generator:{
                    //     //输出名称
                    //     filename:"static/media/[hash:10][ext][query]"
                    // }
                },
                {
                    test:/\.js$/,  //处理字体图标资源或者其他资源
                    exclude:/node_modules/, //排除node_modules中的js文件（这些文件不处理）
                    //include:path.resolve(__dirname,"../src"),//只处理src下的文件，其他文件不出来
                    use:[
                        {
                            loader:"thread-loader", //开启多进程
                            options:{
                                works:threads, //进程数量
                            }
                        },
                        {
                            loader:'babel-loader',
                            //写这里也行，写外面babel.config.js里面也行
                            options:{
                                // presets:["@babel/preset-env"]
                                cacheDirectory:true,//开启babel缓存
                                cacheCompression:false,//关闭缓存文件压缩
                                plugins:['@babel/plugin-transform-runtime'],//减少代码体积
                            }
                        }
                    ]
                }
            ]
           }
        ]
    },
     //插件
    plugins:[
        //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context:path.resolve(__dirname,"../src"),
            exclude:"node_modules", //默认值  
            cache:true,//开启缓存
            cacheLocation:path.resolve(__dirname,"../node_modules/.cache/eslintcache"),  //指定缓存文件
            threads,//开启多进程和设置进程数量
        }),
        new HtmlWebpackPlugin({
            //模板。以public/index.html文件创建新的html文件
            //新的html文件特点：1，结构和原来一致，2.自动引入打包输出的资源
            template:path.resolve(__dirname,"../public/index.html")
        }),
        new MiniCssExtractPlugin({
            filename:'static/css/[name].css',
            chunkFilename:'static/css/[name].chunk.css'
        }),
        // new CssMinimizerPlugin(),
        // new TerserWebpackPlugin({
        //     parallel:threads,//开启多进程和设置进程数量
        // })
        new PreloadWebpackPlugin({
            // rel:'preload',
            // as:'script',
            rel:'prefetch',
        }),
        new WorkboxPlugin.GenerateSW({
            //这些选项帮助快速启用 ServiceWorkers
            //不允许遗留任何‘旧的’ ServiceWorkers
            clientsClaim:true,
            skipWaiting:true
        })
    ],
    optimization:{
        //压缩的操作
        minimizer:[
            //压缩css
            new CssMinimizerPlugin(),
            //压缩js
            new TerserWebpackPlugin({
                parallel:threads,//开启多进程和设置进程数量
            }),
            //压缩图片  以下代码打包报错  不知道哪里问题
        //     new ImageMinimizerPlugin({
        //         minimizer: {
        //           implementation: ImageMinimizerPlugin.imageminGenerate,
        //           options: {
        //             plugins: [
        //               ["gifsicle", { interlaced: true }],
        //               ["jpegtran", { progressive: true }],
        //               ["optipng", { optimizationLevel: 5 }],
        //               [
        //                 "svgo",
        //                 {
        //                   plugins: [
        //                     "preset-default",
        //                     "prefixIds",
        //                     {
        //                       name: "sortAttrs",
        //                       params: {
        //                         xmlnsOrder: "alphabetical",
        //                       },
        //                     },
        //                   ],
        //                 },
        //               ],
        //             ],
        //           },
        //         },
        //   }),
        ],
        //代码分割配置
        splitChunks:{
            chunks:"all",
            //其他都用默认值
        },
        runtimeChunk:{
            name:(entrypoint)=>`runtime~${entrypoint.name}.js`,
        }
    },
     //模式
    mode:'production',
    devtool:"source-map"
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204

    webpack.dev.js完整代码

    const path=require('path');//nodejs核心模块，专门用来处理路径问题
//安装的插件需要引入
const ESLintPlugin=require('eslint-webpack-plugin')
const HtmlWebpackPlugin=require('html-webpack-plugin')

//nodejs核心模块，直接使用
const os=require('os');
//cpu核数
const threads=os.cpus().length;
module.exports={
     //入口
    entry:'./src/main.js', //相对路径
     //输出
    output:{
        //所有文件的输出路径
        //__dirname  nodejs的变量，代表当前文件的文件夹目录
        path:path.resolve(__dirname,'../dist'),//绝对路径
        //入口文件打包输出文件名
        filename:'static/js/[name].js',
        //给打包输出的其他文件命名
        chunkFilename:"static/js/[name].chunk.js",
        //图片，字体等通过type：asset处理资源命名方式
        assetModuleFilename:"static/media/[hash:10][ext][query]",
        //原理，在打包前，将path整个目录内容清空，再进行打包
        clean:true, //自动清空上次打包内容
    },
     //加载器
    module:{
        rules:[
            //loader的配置
           {
            //每个文件只能被其中一个loader配置处理
             oneOf:[
                {
                    test:/\.css$/i, //只检测.css结尾的文件
                    use:[ //执行顺序，从右到左（从下到上）
                        "style-loader", //将js中css通过创建style标签添加html文件中生效
                        "css-loader"  //将css资源编译成commonjs的模块到js中
                    ]
                },
                {
                    test: /\.less$/i,
                    use: [
                      // 使用多个loader
                      'style-loader',
                      'css-loader',
                      'less-loader', //将less编译成css文件
                    ],
                },
                {
                    test:/\.(png|jpe?g|glf|webp|svg)$/,
                    type:"asset",
                    parser:{
                        dataUrlCondition:{
                            //小于10kb的图片转base64
                            //优点，减少请求数量，缺点，体积会更大
                            maxSize:10 * 1024,//10kb
                        }
                    },
                    // generator:{
                    //     //输出图片名称
                    //     //[hash:10] hash值取前10位
                    //     filename:"static/images/[hash:10][ext][query]"
                    // }
                },
                {
                    test:/\.(ttf|woff2?|mp3|mp4|avi)$/,  //处理字体图标资源或者其他资源
                    type:"asset/resource",
                    // generator:{
                    //     //输出名称
                    //     filename:"static/media/[hash:10][ext][query]"
                    // }
                },
                {
                    test:/\.js$/,  //处理字体图标资源或者其他资源
                    exclude:/node_modules/, //排除node_modules中的js文件（这些文件不处理）
                    //include:path.resolve(__dirname,"../src"),//只处理src下的文件，其他文件不出来
                    use:[
                        {
                            loader:"thread-loader", //开启多进程
                            options:{
                                works:threads, //进程数量
                            }
                        },
                        {
                            loader:'babel-loader',
                            //写这里也行，写外面babel.config.js里面也行
                            options:{
                                // presets:["@babel/preset-env"]
                                cacheDirectory:true,//开启babel缓存
                                cacheCompression:false,//关闭缓存文件压缩
                                plugins:['@babel/plugin-transform-runtime'],//减少代码体积
                            }
                        }
                    ]
                }
             ]
           }
        ]
    },
     //插件
    plugins:[
        //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context:path.resolve(__dirname,"../src"),
            exclude:"node_modules", //默认值  
            cache:true,//开启缓存
            cacheLocation:path.resolve(__dirname,"../node_modules/.cache/eslintcache"),  //指定缓存文件
            threads,//开启多进程和设置进程数量
        }),
        new HtmlWebpackPlugin({
            //模板。以public/index.html文件创建新的html文件
            //新的html文件特点：1，结构和原来一致，2.自动引入打包输出的资源
            template:path.resolve(__dirname,"../public/index.html")
        })
    ],
    //开发服务器:不会输出资源，在内存中编译打包
    devServer:{
        host:"localhost",//启动服务器域名
        port:"3000", //启动服务器端口号
        open:true,//是否自动打开浏览器
        hot:true,//开启HMR功能（只能用于开发环境，生成环境不需要了）默认值是true
    },
     //模式
    mode:'development',
    devtool:"cheap-module-source-map",
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128

    vueCli开发模式配置vue3

    npm init -y
    安装
    npm install -D vue-loader vue-template-compiler
    配置webpack.dev.js 开发模式

    const path=require('path');//nodejs核心模块，专门用来处理路径问题
//安装的插件需要引入
const {DefinePlugin} =require("webpack")
const ESLintPlugin=require('eslint-webpack-plugin')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const { VueLoaderPlugin}=require('vue-loader')
//定义一个函数抽取重复的代码  用来获取处理样式的loader
function getStyleLoader(pre){
    return [ //执行顺序，从右到左（从下到上）
                "vue-style-loader", //提取css成单独文件
                "css-loader",  //将css资源编译成commonjs的模块到js中
                {
                    loader:"postcss-loader",
                    options:{ //配置项
                        postcssOptions:{
                            plugins:[
                                "postcss-preset-env",//能解决大多数兼容性问题
                            ]
                        }
                    }
                },
                pre,
            ].filter(Boolean);
}
module.exports={
     //入口
    entry:'./src/main.js', //相对路径
     //输出
    output:{
        //所有文件的输出路径
        //__dirname  nodejs的变量，代表当前文件的文件夹目录
        path:undefined,//绝对路径
        //入口文件打包输出文件名
        filename:'static/js/[name].js',
        //给打包输出的其他文件命名
        chunkFilename:"static/js/[name].chunk.js",
        //图片，字体等通过type：asset处理资源命名方式
        assetModuleFilename:"static/media/[hash:10][ext][query]"
    },
     //加载器
    module:{
        rules:[
            //loader的配置
            {
                test:/\.css$/, //只检测.css结尾的文件
                use:getStyleLoader(),
            },
            {
                test: /\.less$/,
                use:getStyleLoader('less-loader'),
            },
            {
                test: /\.s[ac]ss$/,
                use:getStyleLoader('sass-loader'),
            },
            {
                test: /\.styl$/,
                use:getStyleLoader('stylus-loader'),
            },
            {
                test:/\.(png|jpe?g|glf|webp|svg)$/,
                type:"asset",
                parser:{
                    dataUrlCondition:{
                        //小于10kb的图片转base64
                        //优点，减少请求数量，缺点，体积会更大
                        maxSize:10 * 1024,//10kb
                    }
                },
            },
            {
                test:/\.(ttf|woff2?|mp3|mp4|avi)$/,  //处理字体图标资源或者其他资源
                type:"asset/resource",
            },
            {
                test:/\.js$/,  //处理字体图标资源或者其他资源
                include:path.resolve(__dirname,"../src"),//只处理src下的文件，其他文件不出来
                loader:'babel-loader',
                //写这里也行，写外面babel.config.js里面也行
                options:{
                    cacheDirectory:true,//开启babel缓存
                    cacheCompression:false,//关闭缓存文件压缩
                }
            },
            {
                test:/\.vue$/,
                loader:'vue-loader'
            }
        ]
    },
     //插件
    plugins:[
        //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context:path.resolve(__dirname,"../src"),
            exclude:"node_modules", //默认值  
            cache:true,//开启缓存
            cacheLocation:path.resolve(__dirname,"../node_modules/.cache/.eslintcache"),  //指定缓存文件
        }),
        new HtmlWebpackPlugin({
            //模板。以public/index.html文件创建新的html文件
            //新的html文件特点：1，结构和原来一致，2.自动引入打包输出的资源
            template:path.resolve(__dirname,"../public/index.html")
        }),
        new VueLoaderPlugin(),
        //定义环境变量 cross-env定义的环境变量给打包工具使用
        //DefinePlugin定义环境变量给源代码使用，从而解决vue3页面警告的问题
        new DefinePlugin({
            __VUE_OPTIONS_API__:true,
            __VUE_PROD_DEVTOOLS__:false
        })
    ],
    //开发服务器:不会输出资源，在内存中编译打包
    devServer:{
        host:"localhost",//启动服务器域名
        port:"4000", //启动服务器端口号
        open:true,//是否自动打开浏览器
        hot:true,//开启HMR功能（只能用于开发环境，生成环境不需要了）默认值是true
        historyApiFallback:true, //解决前端路由刷新404问题
    },
    optimization:{
       
        //代码分割配置
        splitChunks:{
            chunks:"all",
            //其他都用默认值
        },
        runtimeChunk:{
            name:(entrypoint)=>`runtime~${entrypoint.name}.js`,
        }
    },
    //webpack解析模块加载选项
    resolve:{
        //自动补全文件扩展名
        extensions:['.js','.json','.vue']
    },
     //模式
    mode:'development',
    devtool:"cheap-module-source-map",
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141

    安装依赖
    npm i eslint-webpack-plugin html-webpack-plugin vue-style-loader css-loader postcss-loader postcss-preset-env -D
    npm i less-loader sass-loader sass stylus-loader babel-loader vue-loader webpack webpack-cli webpack-dev-server -D

    .eslintrc.js 配置

    module.exports={
    root:true,
    env:{
        node:true,
    },
    extends:['plugin:vue/vue3-essential','eslint:recommended'],
    parserOptions:{
        parser:'@babel/eslint-parser'
    }
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    npm i @babel/eslint-parser -D
    babel.config.js 配置

    module.exports={
    presets:["@vue/cli-plugin-babel/preset"]
}

    • 1
    • 2
    • 3

    npm i @vue/cli-plugin-babel -D
    npm i vue (默认是vue3的版本)

    npm i cross-env -D
    npm i eslint-plugin-vue -D
    npm i vue-router

    生产模式 webpack.prod.js

    npm i mini-css-extract-plugin css-minimizer-webpack-plugin copy-webpack-plugin -D
    下载图片
    npm i image-minimizer-webpack-plugin imagemin -D
    无损下载
    npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
    不知道为什么，下载图片老是下载失败

    const path=require('path');//nodejs核心模块，专门用来处理路径问题
//安装的插件需要引入
const ESLintPlugin=require('eslint-webpack-plugin')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const MiniCssExtractPlugin=require("mini-css-extract-plugin")
const CssMinimizerPlugin=require("css-minimizer-webpack-plugin")
const TerserWebpackPlugin=require("terser-webpack-plugin")
// const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin")
const CopyPlugin=require('copy-webpack-plugin')
const { VueLoaderPlugin}=require('vue-loader')
const {DefinePlugin} =require("webpack")
//定义一个函数抽取重复的代码  用来获取处理样式的loader
function getStyleLoader(pre){
    return [ //执行顺序，从右到左（从下到上）
                MiniCssExtractPlugin.loader, //提取css成单独文件
                "css-loader",  //将css资源编译成commonjs的模块到js中
                {
                    loader:"postcss-loader",
                    options:{ //配置项
                        postcssOptions:{
                            plugins:[
                                "postcss-preset-env",//能解决大多数兼容性问题
                            ]
                        }
                    }
                },
                pre,
            ].filter(Boolean);
}


module.exports={
     //入口
    entry:'./src/main.js', //相对路径
     //输出
    output:{
        //所有文件的输出路径
        //__dirname  nodejs的变量，代表当前文件的文件夹目录
        path:path.resolve(__dirname,'../dist'),//绝对路径
        //入口文件打包输出文件名
        filename:'static/js/[name].[contenthash:10].js',
        //给打包输出的其他文件命名
        chunkFilename:"static/js/[name].[contenthash:10].chunk.js",
        //图片，字体等通过type：asset处理资源命名方式
        assetModuleFilename:"static/media/[hash:10][ext][query]",
        //原理，在打包前，将path整个目录内容清空，再进行打包
        clean:true, //自动清空上次打包内容
    },
     //加载器
    module:{
        rules:[
            //loader的配置
            {
                test:/\.css$/, //只检测.css结尾的文件
                use:getStyleLoader(),
            },
            {
                test: /\.less$/,
                use:getStyleLoader('less-loader'),
            },
            {
                test: /\.s[ac]ss$/,
                use:getStyleLoader('sass-loader'),
            },
            {
                test: /\.styl$/,
                use:getStyleLoader('stylus-loader'),
            },
            {
                test:/\.(png|jpe?g|glf|webp|svg)$/,
                type:"asset",
                parser:{
                    dataUrlCondition:{
                        //小于10kb的图片转base64
                        //优点，减少请求数量，缺点，体积会更大
                        maxSize:10 * 1024,//10kb
                    }
                },
            },
            {
                test:/\.(ttf|woff2?|mp3|mp4|avi)$/,  //处理字体图标资源或者其他资源
                type:"asset/resource",
             
            },
            {
                test:/\.js$/,  //处理字体图标资源或者其他资源
                include:path.resolve(__dirname,"../src"),//只处理src下的文件，其他文件不出来
                loader:'babel-loader',
                //写这里也行，写外面babel.config.js里面也行
                options:{
                    cacheDirectory:true,//开启babel缓存
                    cacheCompression:false,//关闭缓存文件压缩
                }
            },
            {
                test:/\.vue$/,
                loader:'vue-loader'
            }
        ]
    },
     //插件
    plugins:[
        //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context:path.resolve(__dirname,"../src"),
            exclude:"node_modules", //默认值  
            cache:true,//开启缓存
            cacheLocation:path.resolve(__dirname,"../node_modules/.cache/.eslintcache"),  //指定缓存文件
         
        }),
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,"../public/index.html")
        }),
        new MiniCssExtractPlugin({
            filename:'static/css/[name].[contenthash:10].css',
            chunkFilename:'static/css/[name].[contenthash:10].chunk.css'
        }),
        new CopyPlugin({
            patterns:[
                {
                    from:path.resolve(__dirname,"../public"),
                    to:path.resolve(__dirname,"../dist"),
                    globOptions:{
                        //忽略index.html文件
                        ignore:["**/index.html"]
                    }
                }
            ]
        }),
        new VueLoaderPlugin(),
        //定义环境变量 cross-env定义的环境变量给打包工具使用
        //DefinePlugin定义环境变量给源代码使用，从而解决vue3页面警告的问题
        new DefinePlugin({
            __VUE_OPTIONS_API__:true,
            __VUE_PROD_DEVTOOLS__:false
        })
    ],
    optimization:{
        //压缩的操作
        minimizer:[
            //压缩css
            new CssMinimizerPlugin(),
            //压缩js
            new TerserWebpackPlugin(),
            //压缩图片  以下代码打包报错  不知道哪里问题
        //     new ImageMinimizerPlugin({
        //         minimizer: {
        //           implementation: ImageMinimizerPlugin.imageminGenerate,
        //           options: {
        //             plugins: [
        //               ["gifsicle", { interlaced: true }],
        //               ["jpegtran", { progressive: true }],
        //               ["optipng", { optimizationLevel: 5 }],
        //               [
        //                 "svgo",
        //                 {
        //                   plugins: [
        //                     "preset-default",
        //                     "prefixIds",
        //                     {
        //                       name: "sortAttrs",
        //                       params: {
        //                         xmlnsOrder: "alphabetical",
        //                       },
        //                     },
        //                   ],
        //                 },
        //               ],
        //             ],
        //           },
        //         },
        //   }),
        ],
        //代码分割配置
        splitChunks:{
            chunks:"all",
            //其他都用默认值
        },
        runtimeChunk:{
            name:(entrypoint)=>`runtime~${entrypoint.name}.js`,
        },
    },
     //模式
    mode:'production',
    devtool:"source-map",
     //webpack解析模块加载选项
     resolve:{
        //自动补全文件扩展名
        extensions:['.js','.json','.vue']
    },
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192

    package.json

     "scripts": {
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js"
  },

    • 1
    • 2
    • 3
    • 4
    • 5

    合并配置
    webpack.config.js

    const path=require('path');//nodejs核心模块，专门用来处理路径问题
//安装的插件需要引入
const ESLintPlugin=require('eslint-webpack-plugin')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const MiniCssExtractPlugin=require("mini-css-extract-plugin")
const CssMinimizerPlugin=require("css-minimizer-webpack-plugin")
const TerserWebpackPlugin=require("terser-webpack-plugin")
// const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin")
const CopyPlugin=require('copy-webpack-plugin')
const { VueLoaderPlugin}=require('vue-loader')
const {DefinePlugin} =require("webpack")

const isProduction=process.env.NODE_ENV==='production';


//定义一个函数抽取重复的代码  用来获取处理样式的loader
function getStyleLoader(pre){
    return [ //执行顺序，从右到左（从下到上）
                isProduction ?  MiniCssExtractPlugin.loader : 'vue-style-loader', //提取css成单独文件
                "css-loader",  //将css资源编译成commonjs的模块到js中
                {
                    loader:"postcss-loader",
                    options:{ //配置项
                        postcssOptions:{
                            plugins:[
                                "postcss-preset-env",//能解决大多数兼容性问题
                            ]
                        }
                    }
                },
                pre,
            ].filter(Boolean);
}


module.exports={
     //入口
    entry:'./src/main.js', //相对路径
     //输出
    output:{
        //所有文件的输出路径
        //__dirname  nodejs的变量，代表当前文件的文件夹目录
        path:isProduction ? path.resolve(__dirname,'../dist') : undefined,//绝对路径
        //入口文件打包输出文件名
        filename:isProduction ?  'static/js/[name].[contenthash:10].js' : 'static/js/[name].js',
        //给打包输出的其他文件命名
        chunkFilename:isProduction ?  "static/js/[name].[contenthash:10].chunk.js":"static/js/[name].chunk.js",
        //图片，字体等通过type：asset处理资源命名方式
        assetModuleFilename:"static/media/[hash:10][ext][query]",
        //原理，在打包前，将path整个目录内容清空，再进行打包
        clean:true, //自动清空上次打包内容
    },
     //加载器
    module:{
        rules:[
            //loader的配置
            {
                test:/\.css$/, //只检测.css结尾的文件
                use:getStyleLoader(),
            },
            {
                test: /\.less$/,
                use:getStyleLoader('less-loader'),
            },
            {
                test: /\.s[ac]ss$/,
                use:getStyleLoader('sass-loader'),
            },
            {
                test: /\.styl$/,
                use:getStyleLoader('stylus-loader'),
            },
            {
                test:/\.(png|jpe?g|glf|webp|svg)$/,
                type:"asset",
                parser:{
                    dataUrlCondition:{
                        //小于10kb的图片转base64
                        //优点，减少请求数量，缺点，体积会更大
                        maxSize:10 * 1024,//10kb
                    }
                },
            },
            {
                test:/\.(ttf|woff2?|mp3|mp4|avi)$/,  //处理字体图标资源或者其他资源
                type:"asset/resource",
             
            },
            {
                test:/\.js$/,  //处理字体图标资源或者其他资源
                include:path.resolve(__dirname,"../src"),//只处理src下的文件，其他文件不出来
                loader:'babel-loader',
                //写这里也行，写外面babel.config.js里面也行
                options:{
                    cacheDirectory:true,//开启babel缓存
                    cacheCompression:false,//关闭缓存文件压缩
                }
            },
            {
                test:/\.vue$/,
                loader:'vue-loader'
            }
        ]
    },
     //插件
    plugins:[
        //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context:path.resolve(__dirname,"../src"),
            exclude:"node_modules", //默认值  
            cache:true,//开启缓存
            cacheLocation:path.resolve(__dirname,"../node_modules/.cache/.eslintcache"),  //指定缓存文件
         
        }),
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,"../public/index.html")
        }),
        isProduction && new MiniCssExtractPlugin({
            filename:'static/css/[name].[contenthash:10].css',
            chunkFilename:'static/css/[name].[contenthash:10].chunk.css'
        }),
        isProduction && new CopyPlugin({
            patterns:[
                {
                    from:path.resolve(__dirname,"../public"),
                    to:path.resolve(__dirname,"../dist"),
                    globOptions:{
                        //忽略index.html文件
                        ignore:["**/index.html"]
                    }
                }
            ]
        }),
        new VueLoaderPlugin(),
        //定义环境变量 cross-env定义的环境变量给打包工具使用
        //DefinePlugin定义环境变量给源代码使用，从而解决vue3页面警告的问题
        new DefinePlugin({
            __VUE_OPTIONS_API__:true,
            __VUE_PROD_DEVTOOLS__:false
        })
    ].filter(Boolean),
    optimization:{
        minimize:isProduction,
        //压缩的操作
        minimizer:[
            //压缩css
            new CssMinimizerPlugin(),
            //压缩js
            new TerserWebpackPlugin(),
            //压缩图片  以下代码打包报错  不知道哪里问题
        //     new ImageMinimizerPlugin({
        //         minimizer: {
        //           implementation: ImageMinimizerPlugin.imageminGenerate,
        //           options: {
        //             plugins: [
        //               ["gifsicle", { interlaced: true }],
        //               ["jpegtran", { progressive: true }],
        //               ["optipng", { optimizationLevel: 5 }],
        //               [
        //                 "svgo",
        //                 {
        //                   plugins: [
        //                     "preset-default",
        //                     "prefixIds",
        //                     {
        //                       name: "sortAttrs",
        //                       params: {
        //                         xmlnsOrder: "alphabetical",
        //                       },
        //                     },
        //                   ],
        //                 },
        //               ],
        //             ],
        //           },
        //         },
        //   }),
        ],
        //代码分割配置
        splitChunks:{
            chunks:"all",
            //其他都用默认值
        },
        runtimeChunk:{
            name:(entrypoint)=>`runtime~${entrypoint.name}.js`,
        },
    },
     //模式
    mode:isProduction ? 'production' :'development',
    devtool:isProduction ? "source-map" :"cheap-module-source-map",
     //webpack解析模块加载选项
     resolve:{
        //自动补全文件扩展名
        extensions:['.js','.json','.vue']
    },
      //开发服务器:不会输出资源，在内存中编译打包
      devServer:{
        host:"localhost",//启动服务器域名
        port:"4000", //启动服务器端口号
        open:true,//是否自动打开浏览器
        hot:true,//开启HMR功能（只能用于开发环境，生成环境不需要了）默认值是true
        historyApiFallback:true, //解决前端路由刷新404问题
    },
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205

    package.json

     "scripts": {
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.config.js"
  },

    • 1
    • 2
    • 3
    • 4
    • 5

    优化配置

    npm install element-plus --save
    按需引入
    npm install -D unplugin-vue-components unplugin-auto-import

    报错解决
    报错 1：AutoImport is not a function
    解决：是 unplugin-auto-import版本高了，我用的0.17.3。后面降版本，改成0.16.7，这个问题就不报错了。

    报错2：Components is not a function
    解决：unplugin-vue-components 版本也高了，从0.27.0 降到了 0.25.2 ，就能正常运行了
    webpack.config.js

    const path=require('path');//nodejs核心模块，专门用来处理路径问题
//安装的插件需要引入
const ESLintPlugin=require('eslint-webpack-plugin')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const MiniCssExtractPlugin=require("mini-css-extract-plugin")
const CssMinimizerPlugin=require("css-minimizer-webpack-plugin")
const TerserWebpackPlugin=require("terser-webpack-plugin")
// const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin")
const CopyPlugin=require('copy-webpack-plugin')
const { VueLoaderPlugin}=require('vue-loader')
const {DefinePlugin} =require("webpack")

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

const isProduction=process.env.NODE_ENV==='production';


//定义一个函数抽取重复的代码  用来获取处理样式的loader
function getStyleLoader(pre){
    return [ //执行顺序，从右到左（从下到上）
                isProduction ?  MiniCssExtractPlugin.loader : 'vue-style-loader', //提取css成单独文件
                "css-loader",  //将css资源编译成commonjs的模块到js中
                {
                    loader:"postcss-loader",
                    options:{ //配置项
                        postcssOptions:{
                            plugins:[
                                "postcss-preset-env",//能解决大多数兼容性问题
                            ]
                        }
                    }
                },
                pre && {
                    loader:pre,
                    options:
                     pre === 'sass-loader'
                      ? {
                         additionalData : `@use "@/styles/element/index.scss" as *;`,
                      }
                      : {},
                },
            ].filter(Boolean);
}


module.exports={
     //入口
    entry:'./src/main.js', //相对路径
     //输出
    output:{
        //所有文件的输出路径
        //__dirname  nodejs的变量，代表当前文件的文件夹目录
        path:isProduction ? path.resolve(__dirname,'../dist') : undefined,//绝对路径
        //入口文件打包输出文件名
        filename:isProduction ?  'static/js/[name].[contenthash:10].js' : 'static/js/[name].js',
        //给打包输出的其他文件命名
        chunkFilename:isProduction ?  "static/js/[name].[contenthash:10].chunk.js":"static/js/[name].chunk.js",
        //图片，字体等通过type：asset处理资源命名方式
        assetModuleFilename:"static/media/[hash:10][ext][query]",
        //原理，在打包前，将path整个目录内容清空，再进行打包
        clean:true, //自动清空上次打包内容
    },
     //加载器
    module:{
        rules:[
            //loader的配置
            {
                test:/\.css$/, //只检测.css结尾的文件
                use:getStyleLoader(),
            },
            {
                test: /\.less$/,
                use:getStyleLoader('less-loader'),
            },
            {
                test: /\.s[ac]ss$/,
                use:getStyleLoader('sass-loader'),
            },
            {
                test: /\.styl$/,
                use:getStyleLoader('stylus-loader'),
            },
            {
                test:/\.(png|jpe?g|glf|webp|svg)$/,
                type:"asset",
                parser:{
                    dataUrlCondition:{
                        //小于10kb的图片转base64
                        //优点，减少请求数量，缺点，体积会更大
                        maxSize:10 * 1024,//10kb
                    }
                },
            },
            {
                test:/\.(ttf|woff2?|mp3|mp4|avi)$/,  //处理字体图标资源或者其他资源
                type:"asset/resource",
             
            },
            {
                test:/\.js$/,  //处理字体图标资源或者其他资源
                include:path.resolve(__dirname,"../src"),//只处理src下的文件，其他文件不出来
                loader:'babel-loader',
                //写这里也行，写外面babel.config.js里面也行
                options:{
                    cacheDirectory:true,//开启babel缓存
                    cacheCompression:false,//关闭缓存文件压缩
                }
            },
            {
                test:/\.vue$/,
                loader:'vue-loader',
                options:{
                    //开启缓存
                    cacheDirectory:path.resolve(__dirname,"../node_modules/.cache/vue-loader"),
                }
            }
        ]
    },
     //插件
    plugins:[
        //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context:path.resolve(__dirname,"../src"),
            exclude:"node_modules", //默认值  
            cache:true,//开启缓存
            cacheLocation:path.resolve(__dirname,"../node_modules/.cache/.eslintcache"),  //指定缓存文件
         
        }),
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,"../public/index.html")
        }),
        isProduction && new MiniCssExtractPlugin({
            filename:'static/css/[name].[contenthash:10].css',
            chunkFilename:'static/css/[name].[contenthash:10].chunk.css'
        }),
        isProduction && new CopyPlugin({
            patterns:[
                {
                    from:path.resolve(__dirname,"../public"),
                    to:path.resolve(__dirname,"../dist"),
                    globOptions:{
                        //忽略index.html文件
                        ignore:["**/index.html"]
                    }
                }
            ]
        }),
        new VueLoaderPlugin(),
        //定义环境变量 cross-env定义的环境变量给打包工具使用
        //DefinePlugin定义环境变量给源代码使用，从而解决vue3页面警告的问题
        new DefinePlugin({
            __VUE_OPTIONS_API__:true,
            __VUE_PROD_DEVTOOLS__:false
        }),
        //按需加载element-plus
        AutoImport({
             resolvers: [ElementPlusResolver()],
        }),
        Components({
             resolvers: [ElementPlusResolver({
                //自定义主题，引入sass
                importStyle:'sass'
             })],
        }),
    ].filter(Boolean),
    optimization:{
        minimize:isProduction,
        //压缩的操作
        minimizer:[
            //压缩css
            new CssMinimizerPlugin(),
            //压缩js
            new TerserWebpackPlugin(),
            //压缩图片  以下代码打包报错  不知道哪里问题
        //     new ImageMinimizerPlugin({
        //         minimizer: {
        //           implementation: ImageMinimizerPlugin.imageminGenerate,
        //           options: {
        //             plugins: [
        //               ["gifsicle", { interlaced: true }],
        //               ["jpegtran", { progressive: true }],
        //               ["optipng", { optimizationLevel: 5 }],
        //               [
        //                 "svgo",
        //                 {
        //                   plugins: [
        //                     "preset-default",
        //                     "prefixIds",
        //                     {
        //                       name: "sortAttrs",
        //                       params: {
        //                         xmlnsOrder: "alphabetical",
        //                       },
        //                     },
        //                   ],
        //                 },
        //               ],
        //             ],
        //           },
        //         },
        //   }),
        ],
        //代码分割配置
        splitChunks:{
            chunks:"all",
            //其他都用默认值
            cacheGroups:{
                vue:{
                   test:/[\\/]node_modules[\\/]vue(.*)?[\\/]/,
                   name:'vue-chunk',
                   priority:40,
                },
                elementPlus:{
                    test:/[\\/]node_modules[\\/]element-plus[\\/]/,
                    name:'elementPlus-chunk',
                    priority:30,
                },
                libs:{
                    test:/[\\/]node_modules[\\/]/,
                    name:'libs-chunk',
                    priority:20,
                },
            }
        },
        runtimeChunk:{
            name:(entrypoint)=>`runtime~${entrypoint.name}.js`,
        },
    },
     //模式
    mode:isProduction ? 'production' :'development',
    devtool:isProduction ? "source-map" :"cheap-module-source-map",
     //webpack解析模块加载选项
     resolve:{
        //自动补全文件扩展名
        extensions:['.js','.json','.vue'],
        //路径别名
        alias:{
            '@':path.resolve(__dirname,'../src'),
        }
    },
      //开发服务器:不会输出资源，在内存中编译打包
      devServer:{
        host:"localhost",//启动服务器域名
        port:"4000", //启动服务器端口号
        open:true,//是否自动打开浏览器
        hot:true,//开启HMR功能（只能用于开发环境，生成环境不需要了）默认值是true
        historyApiFallback:true, //解决前端路由刷新404问题
    },
    //关闭性能分析，提升打包速度
    performance:false,
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254

    自定义主题 styles/element/index.scss

    // styles/element/index.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
  • 相关阅读:
    手写验证码（附代码）
    mac解决//go:linkname must refer to declared function or variable
    IEEE Transaction期刊修改过程记录
    四、python基础——基本结构语句&&函数和模块
    企业电子招标采购系统源码Spring Boot + Mybatis + Redis + Layui + 前后端分离 构建企业电子招采平台之立项流程图
    git GUI的使用&SSH协议&IEDA使用git
    Java学习----泛型
    VMware Tanzu 和 Spring 更新
    【论文笔记】基于深度学习的移动机器人自主导航实验平台
    ⌈Linux_ 感受系统美学⌋ 剖释Linux操作系统 | 底层级操作增进Linux内功
  • 原文地址：https://blog.csdn.net/weixin_45086164/article/details/138568164