注意事项:
1.预热知识:前端模块化、commonJS最好提前了解。commonJS语法最好熟悉。
2.commonJS中,module表示当前模块,module.exports(或者exports)代表外部引用包时,实际所引用的对象。
步骤:
1.安装webpack:cnpm install webpack -g。
2.使用node命令行定位到需要开发的目录下,使用cnpm init初始化目录。
3.在某个路径下书写模块(一系列js文件)。
4.配置webpack配置文件webpack.config.js(类似gulp的gulpfile.js配置文件),指定入口文件,输出文件以及输出路径等。
5.在node命令行下直接webpack打包(依赖于配置文件),最终生成一个js文件。
6.在HTML中引用这个js文件即可实现之前的功能。
第4步中webpack配置文件的写法:
单入口文件:
1 var path = require('path'); 2 3 module.exports = { 4 entry:{ 5 ab:'./component/ab.js', //入口文件,引用其他模块的文件 6 }, 7 output:{ 8 filename:'bundle.js', //输出文件 9 path:path.resolve(__dirname,'dist'), //指定输出路径 10 }, 11 }
多入口文件:
1 var path = require('path'); 2 module.exports = { 3 entry:{ 4 ab:'./component/ab.js', 5 cd:'./component/cd.js' 6 }, 7 output:{ 8 filename:'[name].js', //这里的name代表entry里的对象名字,表示占位 9 path:path.resolve(__dirname,'dist'), 10 }, 11 }
推荐入门教程: