摘要:作者按因為教程所示圖片使用的是倉庫圖片,網速過慢的朋友請移步系列教程十五開發模式與原文地址。而開發模式就是指定為。在非開發模式下,需要關閉此選項,以減小打包體積。在單頁應用中,任何響應直接被替代為。
作者按:因為教程所示圖片使用的是 github 倉庫圖片,網速過慢的朋友請移步《webpack4 系列教程(十五):開發模式與 webpack-dev-server》原文地址。更歡迎來我的小站看更多原創內容:godbmw.com,進行“姿勢”交流 ?(^?^*)0. 課程介紹和資料
>>>本節課源碼
>>>所有課程源碼
本節課的代碼目錄如下:
本節課用的 plugin 和 loader 的配置文件package.json如下:
{ "scripts": { "dev": "webpack-dev-server --open" }, "devDependencies": { "clean-webpack-plugin": "^0.1.19", "html-webpack-plugin": "^3.2.0", "jquery": "^3.3.1", "webpack": "^4.16.1", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.4" } }1. 為什么需要開發模式?
在之前的課程中,我們都沒有指定參數mode。但是執行webpack進行打包的時候,自動設置為production,但是控制臺會爆出warning的提示。而開發模式就是指定mode為development。
在開發模式下,我們需要對代碼進行調試。對應的配置就是:devtool設置為source-map。在非開發模式下,需要關閉此選項,以減小打包體積。
在開發模式下,還需要熱重載、路由重定向、掛代理等功能,webpack4已經提供了devServer選項,啟動一個本地服務器,讓開發者使用這些功能。
2. 如何使用開發模式?根據文章開頭的package.json的配置,只需要在命令行輸入:npm run dev即可啟動開發者模式。
啟動效果如下圖所示:
雖然控制臺輸出了打包信息(假設我們已經配置了熱重載),但是磁盤上并沒有創建/dist/文件夾和打包文件。控制臺的打包文件的相關內容是存儲在內存之中的。
3. 編寫一些需要的文件首先,編寫一下入口的 html 文件:
Document This is Index html
然后,按照項目目錄,簡單封裝下/vendor/下的三個 js 文件,以方便app.js調用:
// minus.js module.exports = function(a, b) { return a - b; }; // multi.js define(function(require, factory) { "use strict"; return function(a, b) { return a * b; }; }); // sum.js export default function(a, b) { console.log("I am sum.js"); return a + b; }
好了,準備進入正題。
4. 編寫 webpack 配置文件 4.1 配置代碼由于配置內容有點多,所以放代碼,再放講解。
webpack.config.js配置如下所示:
const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const path = require("path"); module.exports = { entry: { app: "./app.js" }, output: { publicPath: "/", path: path.resolve(__dirname, "dist"), filename: "[name]-[hash:5].bundle.js", chunkFilename: "[name]-[hash:5].chunk.js" }, mode: "development", // 開發模式 devtool: "source-map", // 開啟調試 devServer: { contentBase: path.join(__dirname, "dist"), port: 8000, // 本地服務器端口號 hot: true, // 熱重載 overlay: true, // 如果代碼出錯,會在瀏覽器頁面彈出“浮動層”。類似于 vue-cli 等腳手架 proxy: { // 跨域代理轉發 "/comments": { target: "https://m.weibo.cn", changeOrigin: true, logLevel: "debug", headers: { Cookie: "" } } }, historyApiFallback: { // HTML5 history模式 rewrites: [{ from: /.*/, to: "/index.html" }] } }, plugins: [ new HtmlWebpackPlugin({ filename: "index.html", template: "./index.html", chunks: ["app"] }), new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), new webpack.ProvidePlugin({ $: "jquery" }) ] };4.2 模塊熱更新
模塊熱更新需要HotModuleReplacementPlugin和NamedModulesPlugin這兩個插件,并且順序不能錯。并且指定devServer.hot為true。
有了這兩個插件,在項目的 js 代碼中可以針對偵測到變更的文件并且做出相關處理。
比如,我們啟動開發模式后,修改了vendor/sum.js這個文件,此時,需要在瀏覽器的控制臺打印一些信息。那么,app.js中就可以這么寫:
if (module.hot) { // 檢測是否有模塊熱更新 module.hot.accept("./vendor/sum.js", function() { // 針對被更新的模塊, 進行進一步操作 console.log("/vendor/sum.js is changed"); }); }
每當sum.js被修改后,都可以自動執行回調函數。
4.3 跨域代理隨著前后端分離開發的普及,跨域請求變得越來越常見。為了快速開發,可以利用devServer.proxy做一個代理轉發,來繞過瀏覽器的跨域限制。
按照前面的配置文件,如果想調用微博的一個接口:https://m.weibo.cn/comments/hotflow。只需要在代碼中對/comments/hotflow進行請求即可:
$.get( "/comments/hotflow", { id: "4263554020904293", mid: "4263554020904293", max_id_type: "0" }, function(data) { console.log(data); } );4.4 HTML5--History
當項目使用HTML5 History API 時,任意的 404 響應都可能需要被替代為 index.html。
在 SPA(單頁應用)中,任何響應直接被替代為index.html。
在 vuejs 官方的腳手架vue-cli中,開發模式下配置如下:
// ... historyApiFallback: { rewrites: [{ from: /.*/, to: "/index.html" }]; } // ...5. 編寫入口文件
最后,在前面所有的基礎上,讓我們來編寫下入口文件app.js:
import sum from "./vendor/sum"; console.log("sum(1, 2) = ", sum(1, 2)); var minus = require("./vendor/minus"); console.log("minus(1, 2) = ", minus(1, 2)); require(["./vendor/multi"], function(multi) { console.log("multi(1, 2) = ", multi(1, 2)); }); $.get( "/comments/hotflow", { id: "4263554020904293", mid: "4263554020904293", max_id_type: "0" }, function(data) { console.log(data); } ); if (module.hot) { // 檢測是否有模塊熱更新 module.hot.accept("./vendor/sum.js", function() { // 針對被更新的模塊, 進行進一步操作 console.log("/vendor/sum.js is changed"); }); }6. 效果檢測
在命令行鍵入:npm run dev開啟服務器后,會自動打開瀏覽器。如下圖所示:
打開控制臺,可以看到代碼都正常運行沒有出錯。除此之外,由于開啟了source-map,所以可以定位代碼位置(下圖綠框內):
7. 參考資料dev-server 文檔: https://www.webpackjs.com/configuration/dev-server/
開發模式 文檔:https://www.webpackjs.com/guides/development/
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98554.html
摘要:全網最貼心系列教程和配套代碼歡迎關注個人技術博客。所以我花費了個多月整理了這份教程,一共分成節,每節都有講解,并且準備了配套代碼。奈何深感水平不夠,只有一腔熱情,所以直接開放了教程和源碼。 webpack-demos:全網最貼心 webpack 系列教程和配套代碼 歡迎關注個人技術博客:godbmw.com。每周 1 篇原創技術分享!開源教程(webpack、設計模式)、面試刷題(偏前...
摘要:課程地址全部課程地址立即進入課程源碼目錄截至按照知識點,目錄分成了個文件夾之后還會持續更新。個人網站原文鏈接系列教程前言 本文檔已經過時,最近內容請看:https://godbmw.com/passage/76。一共16節課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具,在它的幫助下,開發者可以輕松地實現加密代碼、多平臺兼容。而最重要的...
摘要:是一個現代應用程序的靜態模塊打包器,前端模塊化的基礎。作為一個前端工程師切圖仔,非常有必要學習。官網的文檔非常的棒,中文文檔也非常給力,可以媲美的文檔。建議先看概念篇章,再看指南,然后看和配置總覽。 webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器,前端模塊化的基礎。作為一個前端工程師(切圖仔),非常有必要學習。 showImg(https://segment...
摘要:它允許在運行時更新各種模塊,而無需進行完全刷新。構建生產環境開發環境和生產環境的構建目標差異很大。在開發環境中,我們需要具有強大的具有實時重新加載或熱模塊替換能力的和。 1. 構建開發環境 如果你一直跟隨我前面的博文,那么你對webpack的基礎知識已經有比較深刻的理解了。之前,我們一直執行著: npm run build 來打包編譯輸出我們的代碼,本文我們來看看如何構建一個開發環境,...
摘要:插件則可以用于執行范圍更廣的任務。插件的范圍包括,從打包優化和壓縮,一直到重新定義環境中的變量等。插件的使用一般是在的配置信息選項中指定。到這里基本配置已經告一段落了,所有配置我已經放在倉庫中第二期優化教程已出歡迎關注和提問 1、了解Webpack相關 什么是webpack Webpack是一個模塊打包器(bundler)。 在Webpack看來, 前端的所有資源文件(js/js...
閱讀 3940·2021-10-09 09:43
閱讀 2872·2021-10-08 10:05
閱讀 2734·2021-09-08 10:44
閱讀 883·2019-08-30 15:52
閱讀 2810·2019-08-26 17:01
閱讀 3017·2019-08-26 13:54
閱讀 1651·2019-08-26 10:48
閱讀 807·2019-08-23 14:41