国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack 實(shí)踐筆記（一）--- 入門

bergwhite / 2824人閱讀

摘要：實(shí)踐筆記入門一官網(wǎng)文檔地址實(shí)踐工程地址本篇文章可切換到分支查看源代碼。簡(jiǎn)單分步實(shí)踐創(chuàng)建一個(gè)空文件夾，進(jìn)入全局安裝創(chuàng)建文件創(chuàng)建執(zhí)行命令這個(gè)時(shí)候項(xiàng)目中多了一個(gè)文件，使用標(biāo)簽將其引入到中在瀏覽器中打開(kāi)文件，頁(yè)面出現(xiàn)文字。

webpack 實(shí)踐筆記入門（一） [webpack官網(wǎng)文檔地址]:（http://webpack.github.io/docs...） [實(shí)踐工程地址]: (https://github.com/silence717... )

本篇文章可切換到分支 step1查看源代碼。

what is webpack?

官網(wǎng)對(duì)webpack的定義是MODULE BUNDLER，目的就是把有依賴關(guān)系的各種文件打包成一系列的靜態(tài)資源。

簡(jiǎn)單分步實(shí)踐 創(chuàng)建一個(gè)空文件夾，進(jìn)入 
cd /Users/silence/code/personal/webpack-practice
全局安裝 webpack 
npm install webpack -g
創(chuàng)建index.html文件 



    
    webpack-practice
創(chuàng)建app.js 
document.write("hello world!");
console.log("App loaded");
執(zhí)行webpack命令 
webpack ./app.js ./bundle.js

這個(gè)時(shí)候項(xiàng)目中多了一個(gè)bundle.js文件，使用script標(biāo)簽將其引入到index.html中

在瀏覽器中打開(kāi)index.html文件，頁(yè)面出現(xiàn) hello world! 文字。

動(dòng)態(tài)打包文件

在正常開(kāi)發(fā)過(guò)程中我們不斷在修改app.js文件，所以得不斷執(zhí)行打包命令，這樣及其不方便。
我們需要針對(duì)我們的修改及時(shí)作出響應(yīng)處理。

為此創(chuàng)建一個(gè)webpack.config.js文件。

module.exports = {
    entry: ["./app.js"],
    output: {
        filename: "bundle.js"
    }
};

entry： 入口文件 使用哪個(gè)文件作為項(xiàng)目的入口

output： 出口文件 打包后的文件放在哪里

一、 使用watch模式：

webpack 提供了一個(gè)命令--watch，一直監(jiān)聽(tīng)文件，只要有變化就自動(dòng)執(zhí)行打包命令。這樣會(huì)有兩個(gè)問(wèn)題：

* 1. 我們?cè)L問(wèn)的地址為本地文件地址。
* 2. 瀏覽器不能自動(dòng)刷新。
二、 webpack-dev-server

為了在開(kāi)發(fā)過(guò)程中優(yōu)化開(kāi)發(fā)體驗(yàn)，webpack提供了一個(gè)webpack-dev-server

全局安裝
npm install webpack-dev-server
使用webpack-dev-server啟動(dòng)
webpack-dev-server

命令行出現(xiàn)

http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /Users/silence/code/personal/webpack
Hash: 3786f12b06517d34cf85
Version: webpack 1.13.2

按照提示在瀏覽器中訪問(wèn)： http://localhost:8080/webpack... ，
如愿出現(xiàn)hello world！字樣。

在app.js中隨意更改輸出內(nèi)容并保存，會(huì)看到瀏覽器自動(dòng)刷新并輸出更改后的內(nèi)容。

build多個(gè)文件

有兩種解決方案

1 使用require.js，引入新模塊到app.js中

創(chuàng)建login.js，文件內(nèi)容：

console.log("login in");

在app.js中引入

require("./login");

備注一下，webpack原生支持commonJs規(guī)范。
運(yùn)行dev-server，console中輸出login.js的文件內(nèi)容.

2. 在webpack-config.js中更改entry

創(chuàng)建utils.js文件，內(nèi)容為：

console.log("utils.js file ...");

修改entry的配置為：

entry: ["./app.js", "./utils.js"],

運(yùn)行dev-server，console中輸出utils.js的文件內(nèi)容。

這就是webpacj的入門級(jí)使用，個(gè)人體驗(yàn)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/80372.html

相關(guān)文章

  • AI開(kāi)發(fā)書籍分享

    摘要：編程書籍的整理和收集最近一直在學(xué)習(xí)深度學(xué)習(xí)和機(jī)器學(xué)習(xí)的東西，發(fā)現(xiàn)深入地去學(xué)習(xí)就需要不斷的去提高自己算法和高數(shù)的能力然后也找了很多的書和文章，隨著不斷的學(xué)習(xí)，也整理了下自己的學(xué)習(xí)筆記準(zhǔn)備分享出來(lái)給大家后續(xù)的文章和總結(jié)會(huì)繼續(xù)分享，先分享一部分的 編程書籍的整理和收集 最近一直在學(xué)習(xí)deep learning深度學(xué)習(xí)和機(jī)器學(xué)習(xí)的東西，發(fā)現(xiàn)深入地去學(xué)習(xí)就需要不斷的去提高自己算法和高數(shù)的能力然后...

    huayeluoliuhen 評(píng)論0 收藏0

  • 2017-07-07 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選了解中的全局對(duì)象和全局作用域張?chǎng)涡聆慰臻g鑫生活子進(jìn)程你應(yīng)該知道的一切直出內(nèi)存泄露問(wèn)題的追查實(shí)踐我他喵的到底要怎樣才能在生產(chǎn)環(huán)境中用上模塊化騰訊前端大會(huì)大咖說(shuō)大咖干貨，不再錯(cuò)過(guò)發(fā)布發(fā)布中文翻譯在使用進(jìn)行本地開(kāi)發(fā)代碼 2017-07-07 前端日?qǐng)?bào) 精選 了解JS中的全局對(duì)象window.self和全局作用域self ? 張?chǎng)涡?鑫空間-鑫生活Node.js 子進(jìn)程：你應(yīng)該知道...

    import. 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<