欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Webpack4教程-第六部分增強(qiáng)開發(fā)時(shí)體驗(yàn)

轉(zhuǎn)載請(qǐng)注明出處：葡萄城官網(wǎng)，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務(wù)，賦能開發(fā)者。
原文出處：https://wanago.io/2018/08/06/webpack-4-course-part-six-increasing-development-experience

長沙縣網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)于2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。

 

今天我們將介紹mode屬性的development值。它會(huì)自動(dòng)為你配置Webpack以簡化開發(fā)過程。除此之外，我們還會(huì)介紹webpack-dev-server——包括模塊熱替換。開始吧！

開發(fā)體驗(yàn)優(yōu)化的其中一步是讓W(xué)ebpack運(yùn)行在watch模式下。試試webpack --watch。現(xiàn)在每當(dāng)你對(duì)源碼做出修改，Webpack會(huì)重新編譯你的工程然后輸出。webpack-dev-server則做得更多。它不是把輸出文件寫到文件夾下，而是直接把它們寫入內(nèi)存。在構(gòu)建完之后，輸出可作為本地服務(wù)器資源被訪問。

運(yùn)行 webpack-dev-server

首先是安裝它。

1
npm install webpack-dev-server

 

然后是在你的package.json文件中加入它：

1
2
3
4
5
6
7
8
9
"scripts": {
  "build": "webpack",
  "start": "webpack-dev-server"
}
···
 
現(xiàn)在就可以使用`npm start`來啟動(dòng)它。你會(huì)看到下面的提示信息：
```bash
?wds?: Project is running at http://localhost:8080/

剩下的事情只是在瀏覽器中打開http://localhost:8080/了。

模塊熱替換

為進(jìn)一步優(yōu)化你的開發(fā)體驗(yàn)，可以使用模塊熱替換，你甚至跳過刷頁面的需求。比如，當(dāng)你對(duì)某些樣式做了修改，不必刷新整個(gè)頁面就可以看到效果。

在第四節(jié)教程我們?cè)褂昧?strong>MiniCssExtractPlugin。請(qǐng)注意，在寫文本時(shí)，對(duì)MiniCssExtractPlugin的熱模塊更新支持還沒有實(shí)現(xiàn)。更多信息請(qǐng)可查看Github上的此issue。在當(dāng)前開發(fā)環(huán)境，你可能需要使用的是style-loader。

當(dāng)你運(yùn)行webpack-dev-server時(shí)，它使用與正常構(gòu)建時(shí)相同的配置文件。你可以在webpack.config.js中加入一個(gè)叫devServer的參數(shù)來進(jìn)行額外的配置。我們需要它來開啟模塊熱替換。

1
2
3
4
5
6
7
8
9
10
11
// webpack.config.js
const webpack = require('webpack');
 
module.exports = {
  devServer: {
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

注意，當(dāng)開啟 -hot 標(biāo)志以運(yùn)行 webpack-dev-server 時(shí)也會(huì)在plugins里加入HotModuleReplacementPlugin。如果你添加了兩次，可能會(huì)出現(xiàn)問題。

這對(duì)于我們的CSS調(diào)試是很有吸引力的。但當(dāng)修改是JavaScript時(shí)，還需點(diǎn)額外步驟。

1
2
3
4
5
6
7
8
9
10
11
12
// index.js
import { divide } from "./divide";
 
console.log(`6 / 2 = ${divide(6,2)}`);
 
if(module.hot) {
  module.hot.accept();
}
// divide.js
export function divide(a, b) {
  return a / b;
}

運(yùn)行module.hot.accept()會(huì)讓模塊可熱替換。這同樣適用于它引入的所有其他模塊。上面的代碼意味著，index.js中的accept()讓divide模塊能夠被熱替換。

運(yùn)行module.hot.accept()函數(shù)時(shí)可以傳參，如果你感興趣，請(qǐng)查看文檔。

當(dāng)使用HotModuleReplacementPlugin插件時(shí)，如果輸出文件名中使用了chunkhash字段，就可能會(huì)出現(xiàn)一些問題。這種情況下，只在開發(fā)環(huán)境下使用HotModuleReplacementPlugin是個(gè)好主意（而且避免使用chunckhash）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
const isDevServer = require.main.filename.includes('webpack-dev-server');
const plugins = [
  new HtmlWebpackPlugin({ template: './src/index.html' }),
];
if(isDevServer) {
  plugins.push(new webpack.HotModuleReplacementPlugin());
}
 
module.exports = {
  output: {
    filename: isDevServer ? '[name].bundle.js' : '[name].[chunkhash].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins,
    devServer: {
      hot: true
  }
}

webpack-serve

譯者注：由于webpack-serve其實(shí)已經(jīng)不再維護(hù)了。推薦仍然使用上面所說的webpack-dev-sever。

mode: "development"

在之前的課程，我們介紹了mode屬性的production值。現(xiàn)在該輪到development了。讓我們看看它為我們做了我們。

DefinePlugin

如之前所說，這個(gè)插件允許你創(chuàng)建編譯時(shí)的全局常量。

因?yàn)檫@個(gè)插件也在mode: produnction中使用，更多信息可查看教程的第五部分。

這次它的值為process.env.NODE_ENV: JSON。stringify("development")：

1
2
3
4
5
6
7
8
9
module.exports = {
  mode: "development",
  // 使用 mode: "development" 會(huì)添加以下配置：
  plugins: [
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify("development")
    }),
  ]
}

NamedModulesPlugin

這是在使用mode: "development"時(shí)默認(rèn)加入的另一個(gè)插件。它在使用模塊熱替換時(shí)很有用。有了NamedModulesPlugin，我們能夠看到被替換模塊的相對(duì)路徑。

1
2
3
4
5
6
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./src/style.css
[HMR] App is up to date

否則我們只會(huì)看到一個(gè)id，而不是像./src/style.css這樣的路徑。

NamedChunksPlugin

它的左右和NamedModulesPlugin類似。有了它，不僅模塊能看到名字，chunk也能。當(dāng)應(yīng)用在瀏覽器中運(yùn)行起來是，你可以在window.webpackJsonp屬性中查看它們。

使用NamedModulesPlugin和NamedChunksPlugin的一個(gè)額外好處是,當(dāng)添加和刪除依賴時(shí)，打包不再需要使用模塊的順序id。因?yàn)檫@些id和名字會(huì)在最終的輸出產(chǎn)物中使用，修改它們會(huì)導(dǎo)致文件哈希值的變化，即使這些文件使用的模塊本身并沒有改變。使用以上兩個(gè)插件會(huì)幫助你處理瀏覽器的緩存問題。讓我們來比較一下代碼：

沒使用NamedModulesPlugin和NamedChunksPlugin：

1
2
3
4
5
6
7
8
// 輸出產(chǎn)物
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
  /***/ 6:
  (...) // divide.js module output code
 
  /***/ 7:
  (...) // substract.js module output code
]);

使用了NamedModulesPlugin和NamedChunksPlugin：

1
2
3
4
5
6
7
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["utilities~main"],{
  /***/ "./src/utilities/divide.js":
  (...) // divide.js module output code
 
  /***/ "./src/utilities/substract.js":
  (...) // substract.js module output code
]);

Devtool

除了添加插件，設(shè)置mode: "development"還做了一件事，即通過設(shè)置devtool的值為eval開啟了源碼映射（Source Map）。

1
2
3
4
5
6
// webpack.config.js
module.exports = {
  mode: "development",
  // 使用 mode: "development:" 添加了以下配置
  devtool: "eval"
}

轉(zhuǎn)譯、壓縮和打包你的代碼能讓你的用戶有更好的體驗(yàn)。經(jīng)過這些步驟之后，代碼變得更精簡和高效。而調(diào)試這樣的代碼則變得非常困難。因此，引入了源碼映射（Source Map）。它們把輸出后的的代碼與源碼對(duì)應(yīng)起來。有了它，相對(duì)于瀏覽器真正運(yùn)行的打包后的輸出，你能看到其對(duì)應(yīng)的源碼，從而更加容易地使用調(diào)試工具和設(shè)置斷點(diǎn)。我們會(huì)在接下來的課程中對(duì)源碼映射做進(jìn)一步介紹，但如果你需要現(xiàn)在就定制它，可查看它的文檔。

總結(jié)

Webpack是開發(fā)現(xiàn)代Web應(yīng)用的強(qiáng)大工具。它不僅讓你優(yōu)化生產(chǎn)環(huán)境的代碼，而且還可以并定制，用以增強(qiáng)開發(fā)時(shí)的體驗(yàn)。這次我們介紹了如何運(yùn)行開發(fā)時(shí)服務(wù)器，以及把mode屬性設(shè)成development的一些作用。我們還學(xué)習(xí)使用了模塊的熱替換。所有這些組合起來，能幫你更容易和更快地開發(fā)應(yīng)用。

 

本文是由葡萄城技術(shù)開發(fā)團(tuán)隊(duì)發(fā)布，轉(zhuǎn)載請(qǐng)注明出處：葡萄城官網(wǎng)

了解開放易用的 Web 生成平臺(tái)，請(qǐng)前往活字格Web應(yīng)用生成平臺(tái)

了解可嵌入您系統(tǒng)的在線 Excel，請(qǐng)前往SpreadJS純前端表格控件

當(dāng)前標(biāo)題：Webpack4教程-第六部分增強(qiáng)開發(fā)時(shí)體驗(yàn)
新聞來源：http://chinadenli.net/article14/jpsjge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、服務(wù)器托管、微信公眾號(hào)、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)