今天繼續(xù)上一次學習的Webpack耳鸯。今天主要是自己的搭建以及實戰(zhàn)湿蛔,所以文字可能不多膀曾。
文章是這篇 入門Webpack,看這篇就夠了
鑒于我是按照這篇文章中的東西直接操作阳啥,具體的步驟我就不復制了添谊,只記錄一些自己的感受以及一些自己查詢到的東西。
- 文中下面這個命令行寫了重復兩邊察迟≌队可以不用執(zhí)行,如果執(zhí)行或告訴你報錯扎瓶,報錯的原因是因為重名了所踊,一般沒必要執(zhí)行兩遍。
npm install --save-dev webpack
- 我用的是mac概荷,右鍵(兩個手指點擊的事件秕岛,我習慣叫做右鍵)是沒有新建文件這個選項的,我查了一下乍赫,可以使用命令行瓣蛀,非常方便。
touch fileName.js
- 在文章中下面一段對package.json的配置中雷厂,注釋必須刪掉惋增,否則會報錯。
{
"name": "webpack-sample-project",
"version": "1.0.0",
"description": "Sample webpack project",
"scripts": {
"start": "webpack" //配置的地方就是這里啦改鲫,相當于把npm的start命令指向webpack命令
},
"author": "zhang",
"license": "ISC",
"devDependencies": {
"webpack": "^1.12.9"
}
}
- Webpack的特性之一是可以生成Source Maps(使調試更容易)
在webpack的配置文件中配置source maps诈皿,需要配置devtool,它有以下四種不同的配置選項像棘,各具優(yōu)缺點稽亏。
分別是source-map、cheap-module-source-map缕题、eval-source-map和cheap-module-eval-source-map截歉,這四者打包速度越來越快,不過同時也具有越來越多的負面作用烟零,較快的構建速度的后果就是對打包后的文件的的執(zhí)行有一定影響瘪松。
在學習階段以及在小到中性的項目上,eval-source-map是一個很好的選項锨阿,但是打包后輸出的JS文件的執(zhí)行具有性能和安全的隱患宵睦。不過在開發(fā)階段這是一個非常好的選項,但是在生產階段一定不要用這個選項墅诡。
今天先看這么多壳嚎。。剩下下次繼續(xù)~~