webpack2.x 中文文檔翻譯之開發Development

GeekGhc 發布于2019-08-20 14:40 / 1992人閱讀

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

開發Development

在這篇中我們將說明怎樣開始開發，以及增從三個工具中擇一進行開發。
假使你已經設置了webpack.config.js設置文件。

該文檔已在webpack2.x中存在，點擊這里

永遠不要再生產產品中使用這些工具，絕對不要

調整你的編輯器 Adjusting Your Text Editor

一些編輯器有安全模式，導致文件在保存時不能編譯。

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

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

intelliJ 搜索"safe write" 并且設置成無效。

Vim 設置:set backupcopy=yes到你的設置中

Source Mpas

當javascript出錯時，你總是想知道到底是哪一行出錯，但是因為webpack是編譯輸出
的文件，所以導致這不是那么容易。

Source mpas就是用來解決這個問題。這里有很多的設置每一種都有他們自己的優點
和缺點。開始之前，我們需要這樣設置。

devtool:"cheap-eval-source-map

選擇一個工具 Choosing a Tool

webpack可以使用一個監視模式（watch mode),在這種模式下，當你所監視的文件發生變化時
就會重新編譯文件。webpack-dev-server提供了一個簡單的開發服務器，能夠實現實時預覽功能。
如果你已經有一個開發服務器，并且想更靈活些，·webpack-dev-middleware能夠作為中間件（middleware）。

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

在大多數情況下,你將想要使用webpack-dev-server，因為它開始項目最簡單，并且提供了很多開箱即用的功能。

監視模式 webpack Watch mode

該模式下，webpack監視文件變化，如果檢測到變化，webpack將會重新編譯文件。
在編譯時我們可以添加個可視化的進度條。命令如下

webpack --progress --watch

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

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

serve

webpack-dev-server

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

在npm中下載webpack-dev-server。

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

下載完成之后你可以這樣啟動它

webpack-dev-server --open

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

上述命令會使瀏覽器自動打開到http://localhost:808地址。

修改項目的一個文件并保存。控制臺將會顯示重新編譯。做完這些，頁面會刷新。如果控制臺沒有變化，
或許是watchOptions需要修改下。

上述一切ok，你可以更進一步: Hot Module Replacement。這是一個接口，能夠實現頁面不刷新的情況下替換模塊。
查看怎樣設置HMR

默認情況下使用的是"inline"模式。這種模式下——實時加載是必須的，并且顯示綁定文件中的錯誤提示。開發時這種模式
會在控制臺現實編譯的錯誤以及警告提醒。

webpack-dev-server能夠做很多事，例如代理請求到你的后臺服務器。更多使用和功能查看
開發服務器文檔（devSever documentation）

webpack 開發中間件 webpack-dev-middleware

webpack-dev-middleware 的作用是連接中間件。當你已經使用了node服務器時，或者想更多的控制服務器，這個是很有用的。

中間件(middleware)能夠保持webpack在內存中編譯。當變異進行時，它能夠延遲訪問到編譯完成時。

從npm下載這個依賴。

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("監聽端口是3000!");
});

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

默認情況下使用的watch mode，也可以使用lazy mode，這個模式下僅當訪問入口文件時才進行編譯。

lazy mode設置如下

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

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

GPU云服務器云服務器 php中文開發文檔中文翻譯 webrtc中文翻譯源碼中文說明之

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81819.html

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

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

W4n9Hu1 2019-08-20 14:43 評論0 收藏0
webpack2.x 中文文檔翻譯之依賴管理 Dependency Management

摘要：依賴管理該條已在中文網存在，點擊這里表達式來調用當你的請求包含表達式，那個一個上下文環境將被創建。一個包含所有父文件夾和子及后代文件夾中以結尾的文件的上下文。一個函數，返回一個數組，包含上下文模塊能夠處理的所有的請求。依賴管理 Dependency Management 該條已在webpack2.x中文網存在，點擊這里 es6 modules commonjs amd 表達式...

raledong 2019-08-20 14:42 評論0 收藏0
webpack2.x 中文文檔翻譯之出口Output

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

weizx 2019-08-20 14:42 評論0 收藏0
webpack2.x 中文文檔翻譯之分離庫代碼Code Splitting - Librari

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

elva 2019-08-20 14:43 評論0 收藏0
代碼分離-import() webpack2.x 中文文檔翻譯

摘要：代碼分離使用中文文檔地址點擊這里動態導入目前，類函模塊加載的語法建議整體交給。在中的是個分離點，用來把被請求的模塊獨立成一個單獨的模塊。被替代因為在中使用已經不合建議規范，因此將在版本中啟用。代碼分離-使用import() 中文文檔地址點擊這里動態導入目前，類函模import()塊加載的語法建議——syntax proposal整體交給ECMAScript。ES2015(es6)...

jaysun 2019-08-20 15:18 評論0 收藏0