入門學習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配置文件的寫法：
單入口文件：

 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 }

推薦入門教程：

該篇筆記太過簡陋，推薦入門Webpack教程：從這裏開始入門Webpack