1.在根目录新建一个webpack.config.js文件,而后开始配置:html
const path = require('path'); module.exports={ //入口文件的配置项 entry:{ entry:'./src/entry.js' }, //出口文件的配置项 output:{ //输出的路径,用了Node语法 path:path.resolve(__dirname,'dist'), //输出的文件名称 filename:'bundle.js' }, //模块:例如解读CSS,图片如何转换,压缩 module:{}, //插件,用于生产模版和各项功能 plugins:[], //配置webpack开发服务功能 devServer:{} }
entry:配置入口文件的地址,能够是单一入口,也能够是多入口。前端
output:配置出口文件的地址,在webpack2.X版本后,支持多出口配置。webpack
module:配置模块,主要是解析CSS和图片转换压缩等功能。web
plugins:配置插件,根据你的须要配置不一样功能的插件。babel
devServer:配置开发服务功能。模块化
2.而后在终端输入:webpack 进行打包post
3.多入口、多出口配置学习
const path = require('path'); module.exports={ //入口文件的配置项 entry:{ entry:'./src/entry.js', //这里咱们又引入了一个入口文件 entry2:'./src/entry2.js' }, //出口文件的配置项 output:{ //输出的路径,用了Node语法 path:path.resolve(__dirname,'dist'), //输出的文件名称 filename:'[name].js' }, //模块:例如解读CSS,图片如何转换,压缩 module:{}, //插件,用于生产模版和各项功能 plugins:[], //配置webpack开发服务功能 devServer:{} }
在入口文件中,新增了一个entry.js的入口文件,这个文件须要手动创建,出口文件的filename,咱们把原来的bundle.js修改为了[name].js优化
[name]的意思是根据入口文件的名称,打包成相同的名称,有几个入口文件,就能够打包出几个文件。ui
4.在终端输入 webpack 进行打包
上图:
想看效果,在终端输入live-server,点击dist文件夹,想要的效果就会出现
前端必学内容:webpack(模块打包器)
webpack3 学习内容,点击便可到达
若是个人内容对你有帮助,欢迎打赏