入门学习webpack笔记

注意事项：
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配置文件的写法：
单入口文件：

　　var path = require('path')；

　　module.exports = {
　　entry:{
　　　　ab:'./component/ab.js', //入口文件，引用其他模块的文件
　　},
　　output:{
　　　　filename:'bundle.js',    //输出文件
　　　　path:path.resolve(__dirname,'dist'),    //指定输出路径
　　},
}

 

多入口文件：

var path = require('path')；
　　module.exports = {
　　entry:{
　　　　ab:'./component/ab.js',
　　　　cd:'./component/cd.js'
　　},
　　output:{
　　　　filename:'[name].js',    //这里的name代表entry里的对象名字，表示占位
　　　　path:path.resolve(__dirname,'dist'),
　　},
}

推荐入门教程：

该篇笔记太过简陋，推荐入门Webpack教程：从这里开始入门Webpack