成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack2.x 中文文檔 翻譯 之 開發(fā)Development

GeekGhc / 1995人閱讀

摘要：下載完成之后你可以這樣啟動(dòng)它如果控制臺(tái)提醒這個(gè)指令無效，可以嘗試最好的方法是在中添加命令如下上述命令會(huì)使瀏覽器自動(dòng)打開到地址。下載完成，如下使用。

開發(fā)Development

在這篇中我們將說明怎樣開始開發(fā)，以及增從三個(gè)工具中擇一進(jìn)行開發(fā)。
假使你已經(jīng)設(shè)置了webpack.config.js設(shè)置文件。

該文檔已在webpack2.x中存在，點(diǎn)擊這里

永遠(yuǎn)不要再生產(chǎn)產(chǎn)品中使用這些工具，絕對(duì)不要

調(diào)整你的編輯器 Adjusting Your Text Editor

一些編輯器有安全模式，導(dǎo)致文件在保存時(shí)不能編譯。

不同的編輯器有不同的方式，一些常用的是:

Sublime Text 3 -添加"atomic_save":false到你的用戶設(shè)置中

intelliJ 搜索"safe write" 并且設(shè)置成無效。

Vim 設(shè)置:set backupcopy=yes到你的設(shè)置中

Source Mpas

當(dāng)javascript出錯(cuò)時(shí)，你總是想知道到底是哪一行出錯(cuò)，但是因?yàn)閣ebpack是編譯輸出
的文件，所以導(dǎo)致這不是那么容易。

Source mpas就是用來解決這個(gè)問題。這里有很多的設(shè)置每一種都有他們自己的優(yōu)點(diǎn)
和缺點(diǎn)。開始之前，我們需要這樣設(shè)置。

devtool:"cheap-eval-source-map
選擇一個(gè)工具 Choosing a Tool

webpack可以使用一個(gè)監(jiān)視模式（watch mode),在這種模式下，當(dāng)你所監(jiān)視的文件發(fā)生變化時(shí)
就會(huì)重新編譯文件。webpack-dev-server提供了一個(gè)簡(jiǎn)單的開發(fā)服務(wù)器，能夠?qū)崿F(xiàn)實(shí)時(shí)預(yù)覽功能。
如果你已經(jīng)有一個(gè)開發(fā)服務(wù)器，并且想更靈活些，·webpack-dev-middleware能夠作為中間件（middleware）。

webpack-dev-server和webpack-dev-miffffdleware使用內(nèi)存編譯（in-memory compilation),也就是說，
打包的文件不會(huì)保存到硬盤中。這使得變異速度更快，導(dǎo)致更少的文件錯(cuò)誤。

在大多數(shù)情況下,你將想要使用webpack-dev-server，因?yàn)樗_始項(xiàng)目最簡(jiǎn)單，并且提供了很多開箱即用的功能。

監(jiān)視模式 webpack Watch mode

該模式下，webpack監(jiān)視文件變化，如果檢測(cè)到變化，webpack將會(huì)重新編譯文件。
在編譯時(shí)我們可以添加個(gè)可視化的進(jìn)度條。命令如下

webpack --progress --watch

修改文件，并保存。你將看到重新編譯。

watch mode僅僅是個(gè)服務(wù)器，所以你需要提供一些東西。一個(gè)簡(jiǎn)單的服務(wù)器是serve.通過(npm i serve -g)下載。之后你就可以在輸出文件的目錄啟動(dòng)它。

serve
webpack-dev-server

webpack-dev-server提供了一個(gè)服務(wù)器兼實(shí)時(shí)預(yù)覽功能。很容易開始。
開始之前，確保你已經(jīng)創(chuàng)建了一個(gè)index.html文件，并且引入了編譯后的文件。假設(shè)這個(gè)變異后的文件(output.filename)是bundle.js.

在npm中下載webpack-dev-server。

npm install webpack-dev-server --save-dev

下載完成之后你可以這樣啟動(dòng)它

webpack-dev-server --open
如果控制臺(tái)提醒這個(gè)指令無效，可以嘗試
`node_modules/.bin/webpack-dev-server`.
最好的方法是在`package.json`中添加命令,如下：
`"script":{"start":"webpack-dev-server"}`

上述命令會(huì)使瀏覽器自動(dòng)打開到http://localhost:808地址。

修改項(xiàng)目的一個(gè)文件并保存?？刂婆_(tái)將會(huì)顯示重新編譯。做完這些，頁面會(huì)刷新。如果控制臺(tái)沒有變化，
或許是watchOptions需要修改下。

上述一切ok，你可以更進(jìn)一步: Hot Module Replacement。這是一個(gè)接口，能夠?qū)崿F(xiàn)頁面不刷新的情況下替換模塊。
查看怎樣設(shè)置HMR

默認(rèn)情況下使用的是"inline"模式。這種模式下——實(shí)時(shí)加載是必須的，并且顯示綁定文件中的錯(cuò)誤提示。開發(fā)時(shí)這種模式
會(huì)在控制臺(tái)現(xiàn)實(shí)編譯的錯(cuò)誤以及警告提醒。

webpack-dev-server能夠做很多事，例如代理請(qǐng)求到你的后臺(tái)服務(wù)器。更多使用和功能查看
開發(fā)服務(wù)器文檔（devSever documentation）

webpack 開發(fā)中間件 webpack-dev-middleware

webpack-dev-middleware 的作用是連接中間件。當(dāng)你已經(jīng)使用了node服務(wù)器時(shí)，或者想更多的控制服務(wù)器，這個(gè)是很有用的。

中間件(middleware)能夠保持webpack在內(nèi)存中編譯。當(dāng)變異進(jìn)行時(shí)，它能夠延遲訪問到編譯完成時(shí)。

從npm下載這個(gè)依賴。

npm install express webpack-dev-middleware --save-dev

下載完成，如下使用。

let express = require("express");
let webpackDevMiffffdleware = require("webpack-dev-middleware");
let webpack = require("webpack");
let webpackConfig = require("./webpack.config");

let app = express();
let compiler = webpack(webpackConfig);

app.use(webpackDevMiffffdleware(compiler,{
  publicPath:"/"  //與"output.publicPath"相同
}));

app.listen(3006,(){
  console.log("監(jiān)聽端口是3000!");
});

取決于你所設(shè)置的output.publicPath和output.filename，你的打包文件現(xiàn)在可以在http://localhost:3006/bundle.js訪問到。

默認(rèn)情況下使用的watch mode，也可以使用lazy mode，這個(gè)模式下僅當(dāng)訪問入口文件時(shí)才進(jìn)行編譯。

lazy mode設(shè)置如下

app.use(webpackDevMiffffdleware(compiler,{
  lazy:true,
  filename:"bundle.js"
}));

這里有更多你可用的設(shè)置。查看devServer decumentation

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

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

相關(guān)文章

  • webpack2.x 中文文檔 翻譯 之 公開路徑(pbulic path)

    摘要：公開路徑該條已在中文網(wǎng)存在點(diǎn)擊這里有一個(gè)非常有用的設(shè)置，允許你設(shè)置一個(gè)所有資源的基礎(chǔ)路徑在你的應(yīng)用中。使用案例這里有有些實(shí)際應(yīng)用中的案例，其中它使用的非常靈活。 公開路徑(pbulic path) 該條已在webpack2.x中文網(wǎng)存在,點(diǎn)擊這里 webpack有一個(gè)非常有用的設(shè)置，允許你設(shè)置一個(gè)所有資源的基礎(chǔ)路徑在你的應(yīng)用中。它叫做publicPath。 使用案例(Use cases...

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

  • webpack2.x 中文文檔 翻譯 之 依賴管理 Dependency Management

    摘要：依賴管理該條已在中文網(wǎng)存在，點(diǎn)擊這里表達(dá)式來調(diào)用當(dāng)你的請(qǐng)求包含表達(dá)式，那個(gè)一個(gè)上下文環(huán)境將被創(chuàng)建。一個(gè)包含所有父文件夾和子及后代文件夾中以結(jié)尾的文件的上下文。一個(gè)函數(shù)，返回一個(gè)數(shù)組，包含上下文模塊能夠處理的所有的請(qǐng)求。 依賴管理 Dependency Management 該條已在webpack2.x中文網(wǎng)存在，點(diǎn)擊這里 es6 modules commonjs amd 表達(dá)式...

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

  • webpack2.x 中文文檔 翻譯 之 出口Output

    摘要：出口影響編譯的輸出告訴怎樣編譯輸出的文件允許多個(gè)入口一個(gè)出口的情況。該選項(xiàng)實(shí)現(xiàn)跨域加載模塊可以的值是命名每個(gè)出口文件。不必明確絕對(duì)路徑。使用設(shè)置項(xiàng)，設(shè)置具體位置。僅僅命名文件名字即可。 出口Output 影響編譯的輸出告訴webpack怎樣編譯輸出的文件允許多個(gè)入口一個(gè)出口的情況。 用法 const config = { output: bundle.js }; module.e...

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

  • webpack2.x 中文文檔 翻譯 之 分離庫(kù)代碼Code Splitting - Librari

    摘要：瀏覽器需要重新下載打包后的文件，即使文件的絕大部分都沒有變化。分離并且以來命名新的入口能夠緩和當(dāng)前的問題?，F(xiàn)在運(yùn)行綁定的檢查結(jié)果是只是被綁定到這個(gè)綁定文件中。 分離庫(kù)代碼Code Splitting - Libraries 這個(gè)在webpack2.x中文網(wǎng)已存在，點(diǎn)擊這里 讓我們想一個(gè)簡(jiǎn)單的應(yīng)用——momentjs，他是一個(gè)事件格式化的庫(kù)。安裝moment. npm install -...

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

  • 代碼分離-import() webpack2.x 中文文檔 翻譯

    摘要：代碼分離使用中文文檔地址點(diǎn)擊這里動(dòng)態(tài)導(dǎo)入目前，類函模塊加載的語法建議整體交給。在中的是個(gè)分離點(diǎn)，用來把被請(qǐng)求的模塊獨(dú)立成一個(gè)單獨(dú)的模塊。被替代因?yàn)樵谥惺褂靡呀?jīng)不合建議規(guī)范，因此將在版本中啟用。 代碼分離-使用import() 中文文檔地址點(diǎn)擊這里 動(dòng)態(tài)導(dǎo)入 目前，類函模import()塊加載的語法建議——syntax proposal整體交給ECMAScript。ES2015(es6)...

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

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

0條評(píng)論

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