對于一個(gè)新手雹熬，怎么寫代碼不是最重要的敬惦，先理清楚思路會事半功倍臣镣。本人也是一個(gè)新手场仲，埋頭苦啃多個(gè)技術(shù)博客和官方文檔之后和悦，決定用一些最接地氣的語言描述一下心得。
首先webpack拿來擼開發(fā)環(huán)境渠缕，怎么叫拿它擼一個(gè)開發(fā)環(huán)境呢鸽素？說白了你還記得你剛學(xué)習(xí)前端的時(shí)候是怎么寫界面的嗎，html文件里面引入css和js亦鳞。就是這么耿直的操作馍忽，webpack搭建開發(fā)環(huán)境有什么區(qū)別？webpack搭建的開發(fā)環(huán)境就是把這些我們以前寫的各種文件分的更細(xì)更雜燕差。我們來梳理一下思路遭笋，當(dāng)初我們寫js，有可能一個(gè)H5的活動(dòng)項(xiàng)目的js全部都寫在一個(gè)js文件中了（反正我是干過這事的）徒探，然后在html文件中引用瓦呼，對吧？那么在webpack中测暗，我們可以把一個(gè)頁面的js分成若干個(gè)js文件來寫央串，為什么要這樣呢，因?yàn)槲覀兊膆tml文件現(xiàn)在喜歡分模塊來寫了碗啄，不再像以前一樣整個(gè)項(xiàng)目只有一個(gè)html文件了质和，那么打個(gè)比方說一個(gè)頁面我們分成三個(gè)模塊（之后統(tǒng)稱組件）來寫，這個(gè)頁面我們就能對應(yīng)有三個(gè)css文件三個(gè)js文件稚字，這樣做的好處也成為組件式開發(fā)的好處就是維護(hù)和修改比之前簡單多了饲宿。那么，好胆描，這樣的開發(fā)環(huán)境自然跟以前的不一樣了瘫想，所以現(xiàn)在這種webpack拿來搭建開發(fā)環(huán)境之后我們怎么開發(fā)呢，首先這種開發(fā)手法我們把文件分為最基本的三大類：
1.html文件必不可少昌讲，但是它已經(jīng)不是從前那個(gè)密密麻麻h5標(biāo)簽代碼的那個(gè)它了殿托，它甚至可以空的（有meta，body之類的基本開頭）剧蚣，它現(xiàn)在起的作用就是一個(gè)載體模板支竹，因?yàn)闉g覽器跟這個(gè)文件最熟，沒辦法所以別的文件夾利用某種渠道將內(nèi)容都添加到這個(gè)文件鸠按，才在瀏覽器上打開看到效果礼搁。
2.index.js（或者***.js自己命名）入口文件，這就是上面提到的“某種渠道”目尖。所有的文件夾想把自己的東西給別人用都要經(jīng)過入口同意馒吴，這里就拿最基本的（所有文件夾都想把自己的內(nèi)容拿給html用），入口文件require了也就是同意了，你的內(nèi)容在能在html上得到體現(xiàn)饮戳。
3.module.js模塊文件豪治，說的通俗一點(diǎn)就是你想要在頁面上加點(diǎn)東西，那你就定義一個(gè)模塊文件去裝它扯罐，完了之后再通過入口文件的同意负拟，在html模板上得到體現(xiàn)。module就是各種模塊組件歹河。它必須是以要輸出的的形勢來寫的掩浙，怎么理解呢？就是你后臺不夠硬要想出人投地就要卑躬屈曲秸歧，你自己要先寫成輸出的形勢厨姚，別人才會來要你，所以module.js中都要有module.exports=[
......
]?
完了之后你只需要啟動(dòng)一下webpack就行了键菱，頁面上就可以看到效果谬墙。命令行：
webpack index.js bundle.js（我這里只是把入口文件打了一下包再在html中引用）
理解這三個(gè)東西你就能看到效果了，但是经备，webpack理論上只能打包處理js類型的文件拭抬，那么我們的樣式css文件就處理不了了！所以webpack中還用到一個(gè)必須掌握的東西叫做 loader弄喘，它就是幫webpack打下手玖喘，webpack處理不了的事它來做甩牺，安裝了loader入口文件才能有效的引用js文件之外的其他文件蘑志，讓css生效的loader的命令行：
npm install css-loader style-loader
這就安裝好了，入口文件可以引用了贬派，require（'!style!css!./style.css'）這是loader的標(biāo)準(zhǔn)引用急但，只是看起來有點(diǎn)太麻煩，那我們就換成了另一個(gè)方便的寫法require('./style.css')這樣寫的前提是搞乏，命令行得改成這樣：
webpack index.js bundle.js --module-bind 'css=style-loader!css-loader'
新人剛上手波桩，理解有失的望大佬指點(diǎn)。至于webpack其他插件的使用请敦，和package.json文件中的配置我還要細(xì)細(xì)研究一番镐躲。
