初學(xué)webpack

學(xué)習(xí)web之前現(xiàn)要知道require引入的相關(guān)知識(shí)，最好有一點(diǎn)node.js的相關(guān)基礎(chǔ)

然后你要先下載node，安裝git ?想要了解webpack的小伙伴應(yīng)該都有這個(gè)node。安裝git的基礎(chǔ)

這里就不介紹。下面我們開(kāi)始web初識(shí)：

1.在我們的demo的里面打開(kāi)git

2.然后我們用那npm安裝webpack ??

? ? 2.1 ? ? ? ? ? ?npm install -g webpack ? ?//全局安裝 ? ? ? ? ? ?比較慢小伙伴們可以cnpm 淘寶鏡像功能（這里就不展示了）

? ? 2.2? ? ? ? ? ? npm install --save-dev webpack ? ? ?//安裝到項(xiàng)目里面 ??

為了讓愚蠢的學(xué)弟們看的懂，我就多截圖

項(xiàng)目結(jié)構(gòu)

3.創(chuàng)建一個(gè)page.json的配置文件

? ? ?3.1 ? npm ?init ? ?//這個(gè)創(chuàng)建

? ? ?3.2 ? 后面我們要給他一個(gè)名字 ? 然后一路回車

? ? 3.3? 我們的配置文件已經(jīng)創(chuàng)建好了要安裝webpack?

? ? ? ? ? ?npm install --save-dev webpack ? ?//安裝wenpck

page.json

安裝完我們會(huì)看到我們的配置page.json里面就配置好了webpack

? ? ? 3.4然后我們創(chuàng)建2個(gè)文件夾一個(gè)app文件夾放javascript,里面放min.js和greeter.js

? ? ? ? 一個(gè)public文件夾放我們的index.html

我們的項(xiàng)目結(jié)構(gòu)

greeter寫(xiě)入這個(gè)我們基于node的一個(gè)框架CommonJS

>打個(gè)廣告node框架之前試了一下很好用‘koa’的新的框架想了解的小伙伴去百度

? ? ? 3.5我們?cè)趍ain.js里面引入greeter.js

main.js

? ? ? ? 3.6我們?cè)趇ndex.html里面寫(xiě)入

index.html

我們?cè)趃it命令行輸入node_modules/.bin/webpack app/main.js public/exit.js

我們看到已經(jīng)對(duì)我們的這個(gè)js進(jìn)行了編譯并生成了exit.js的文件打開(kāi)index,html

已經(jīng)出來(lái)了有沒(méi)有很開(kāi)心。開(kāi)心就回復(fù)個(gè)233

已經(jīng)顯示出來(lái)了

我們看下編譯的exit的這個(gè)編譯好的js文件

exit.js

我們上面的都不用管，就看下面的這2個(gè) ?上面的這個(gè)是main.js ?下面的這個(gè)是我們的greeter.js

4.通過(guò)文件配置webpack我們來(lái)編譯

? 我們先創(chuàng)建一個(gè)webpack.config.js的webpack的配置文件

webpack.config.js

這樣我們就可以直接輸入webpack(非全局安裝需使用node_modules/.bin/webpack)

就可以直接進(jìn)行編譯（通過(guò)我們node.js下面的webpack插件進(jìn)行的）

5.通過(guò)我們的npm 來(lái)進(jìn)行編譯

我們?cè)谖覀兊膒age.json里面

page.js

新增加這個(gè)start的這個(gè) ?我們就可以直接npm start 就可以直接的進(jìn)行編譯

6.webpack自動(dòng)刷新顯示修改后的結(jié)果功能

6.1 ? ? ? ?npm install --save-dev webpack-dev-server ? ?//安裝依賴

6.2 ? ? 在我們的webpack.config.js里面添加依賴

webpack.config.js

page.js

7.編譯配置（重要）（sass轉(zhuǎn)換css。ES6轉(zhuǎn)換ES5。。。）Loaders

添加一個(gè)json的文件tsconfig.json ?在APP文件下

greeter文件修改

然后我們安裝編譯的依賴

然后我們npm run server ? （前面加有加過(guò)自動(dòng)刷新的功能）

1.npm install --save-dev style-loader css-loader ?// 安裝我們的css

2.使用插件Plugins

刪除我們的public整個(gè)文件夾，之后我們會(huì)直接打包出來(lái)css文件會(huì)直接打包到j(luò)s里面

在app文件下創(chuàng)建一個(gè)index.tmpl.html文件模版

新建一個(gè)名字為helloword的文件夾做為我們的入口文件夾

npm install --save-dev html-webpack-plugin ? //使用添加依賴

然后我們? 運(yùn)行 ?npm start ? ? 就會(huì)發(fā)現(xiàn)我們的helloword文件下面就已經(jīng)生成了我們的js和html

我們運(yùn)行npm run server 就可以看到我們執(zhí)行結(jié)果了

我們看下編譯后的js

基本上開(kāi)發(fā)環(huán)境就可以了 ?

剩下的周日會(huì)更新css 壓縮 以及js壓縮 小伙伴們可以看下我們的出口文件里面 ?之后我們會(huì)把css也壓縮到exit.js ?里面