注意事項：
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

轉載于:https://www.cnblogs.com/DM428/p/7088667.html

總結

以上是生活随笔為你收集整理的入门学习webpack笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。