生产模式:webpack main.js -o index.js
开发模式:webpack --mode development main.js -o index.js 或者webpack --mode development(如果main.js在src文件夹下,那么打包出来的文件是在dist文件夹下)
通过node中的模块操作,向外暴露了一个配置对象
const path = require(‘path‘); module.export={ //配置入口和出口 entry:path.join(__dirname,‘./src/main.js‘), //入口,表示要使用webpack打包哪个文件 output:{ path:path.join(__dirname,‘./dist‘), //指定打包好的文件,输出到哪个目录上去 filename:‘bundle.js‘ //指定输出文件的名称 }, mode:"development" //区分是开发者模式还是生产模式 //配置多个入口和出口 entry:{ home:‘./home.js‘, about:‘./about.js‘ }, output:{ path:path.resolve(__dirname,‘./dist‘), //指定打包好的文件,输出到哪个目录上去 filename:‘[name]bundle.js‘ //指定输出文件的名称 } }
当我们在控制台输入webpack时,webpack做了以下几步:
1、首先webpack发现我们并没有以命令的形式指定入口和出口
2、webpack就会去项目的根目录中去查找“webpack.config.js”的配置文件
3、当找到配置文件后,webpack就会去解析执行这个配置文件,当执行完配置文件后,就得到了配置文件中导出的配置对象
4、当webpack拿到配置对象后,就拿到了 配置对象中指定的 入口 和 出口 ,然后进行打包构建
原文:https://www.cnblogs.com/gao-xiaomeng/p/11218439.html