webpack常见配置作用

什么是webpack

静态模块打包工具

webpack作用

分析、压缩、打包代码

webpack好处

减少文件体积、减少文件数量

提高网页加载速度

mode:打包模式

默认值production:生产模式(压缩，混淆，加密.......不可读)

development:开发模式(代码不会压缩混淆)

output: 出口文件(对象类型)

path:设置出口文件夹(必须是绝对路径)

         默认值: ${ __dirname }/dist

filename:设置出口is文件名(相对于path路径)

         默认值: main.js

.entry:出口文件

默认值(相当于项目根目录): ./src/index.js

module.exports = {

    mode: "production",//生产模式     development  //开发模式

    output: {//出口文件

        path: `${__dirname}/dist`,//出口文件夹

        filename: `main.js`//出口文件名
    },

    entry: `./src/index.js`, //入口文件
}

webpack默认流程

(1)初始化npm: npm init -y

(2)安装webpack : npm i webpack webpack-cli -D

(3)写代码:要有 src/index,js            //入口文件

(4)打包命名: npx webpack          //会输出dist/main.js

lv

npm run build原理

检查你的package,json里面有没有build配置             // 这里我设置了两种配置  有两种指令

                                                //  npm run build  真正执行webpack命令 : npx webpack

                                     

检查你的配置文件                      

有 : 按照你的配置文件来加载

无:加载默认配置

找到入口文件   

默认 src/index.js

根据模块之间的依赖关系，生成依赖图并编译

打包好的文件输出到出口文件  默认 dist/main.js