初學(xué)webpack
學(xué)習(xí)web之前現(xiàn)要知道require引入的相關(guān)知識政勃，最好有一點(diǎn)node.js的相關(guān)基礎(chǔ)
然后你要先下載node，安裝git ?想要了解webpack的小伙伴應(yīng)該都有這個(gè)node千扔。安裝git的基礎(chǔ)
這里就不介紹。下面我們開始web初識：
1.在我們的demo的里面打開git
2.然后我們用那npm安裝webpack ??
? ? 2.1 ? ? ? ? ? ?npm install -g webpack ? ?//全局安裝 ? ? ? ? ? ?比較慢小伙伴們可以cnpm 淘寶鏡像功能（這里就不展示了）
? ? 2.2? ? ? ? ? ? npm install --save-dev webpack ? ? ?//安裝到項(xiàng)目里面 ??
為了讓愚蠢的學(xué)弟們看的懂畦粮，我就多截圖
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里面就配置好了webpack
? ? ? 3.4然后我們創(chuàng)建2個(gè)文件夾一個(gè)app文件夾放javascript,里面放min.js和greeter.js
? ? ? ? 一個(gè)public文件夾放我們的index.html
>打個(gè)廣告node框架之前試了一下很好用‘koa’的新的框架想了解的小伙伴去百度
? ? ? 3.5我們在main.js里面引入greeter.js
? ? ? ? 3.6我們在index.html里面寫入
我們在git命令行輸入node_modules/.bin/webpack app/main.js public/exit.js
我們看到已經(jīng)對我們的這個(gè)js進(jìn)行了編譯并生成了exit.js的文件打開index,html
已經(jīng)出來了有沒有很開心绍填。開心就回復(fù)個(gè)233
我們看下編譯的exit的這個(gè)編譯好的js文件
我們上面的都不用管，就看下面的這2個(gè) ?上面的這個(gè)是main.js ?下面的這個(gè)是我們的greeter.js
4.通過文件配置webpack我們來編譯
? 我們先創(chuàng)建一個(gè)webpack.config.js的webpack的配置文件
這樣我們就可以直接輸入webpack(非全局安裝需使用node_modules/.bin/webpack)
就可以直接進(jìn)行編譯（通過我們node.js下面的webpack插件進(jìn)行的）
5.通過我們的npm 來進(jìn)行編譯
我們在我們的page.json里面
新增加這個(gè)start的這個(gè) ?我們就可以直接npm start 就可以直接的進(jìn)行編譯
6.webpack自動刷新顯示修改后的結(jié)果功能
6.1 ? ? ? ?npm install --save-dev webpack-dev-server ? ?//安裝依賴
6.2 ? ? 在我們的webpack.config.js里面添加依賴
7.編譯配置（重要）（sass轉(zhuǎn)換css内贮。ES6轉(zhuǎn)換ES5产园。。夜郁。）Loaders
添加一個(gè)json的文件tsconfig.json ?在APP文件下
然后我們安裝編譯的依賴
然后我們npm run server ? （前面加有加過自動刷新的功能）
1.npm install --save-dev style-loader css-loader ?// 安裝我們的css
2.使用插件Plugins
刪除我們的public整個(gè)文件夾什燕，之后我們會直接打包出來css文件會直接打包到j(luò)s里面
在app文件下創(chuàng)建一個(gè)index.tmpl.html文件模版
新建一個(gè)名字為helloword的文件夾做為我們的入口文件夾
npm install --save-dev html-webpack-plugin ? //使用添加依賴
然后我們? 運(yùn)行 ?npm start ? ? 就會發(fā)現(xiàn)我們的helloword文件下面就已經(jīng)生成了我們的js和html
我們運(yùn)行npm run server 就可以看到我們執(zhí)行結(jié)果了
我們看下編譯后的js
基本上開發(fā)環(huán)境就可以了 ?
剩下的周日會更新css 壓縮 以及js壓縮 小伙伴們可以看下我們的出口文件里面 ?之后我們會把css也壓縮到exit.js ?里面
