合理使用webpack提升開發效率

時間 2019-11-21

標籤合理使用 webpack 提升開發效率简体版

原文原文鏈接

雖然公司有提供現成的腳手架工具，可是做爲開發人員懂得必要的相關知識仍是很重要的。這樣有利於提升咱們的開發效率，優化咱們的代碼。html

關於npm scripts

什麼是npm scripts

npm 容許在package.json文件裏面，使用scripts字段定義腳本命令。
在咱們工做的時候使用的npm start, npm build. 就是 npm 腳本命令。合理的使用npm腳本可讓咱們避免輸入一大串的繁瑣命令。webpack

我對start命令和build命令的理解

"scripts": {
    "start": "webpack-dev-server --env=dev --open --host 192.168.1.84", 
    // webpack-dev-server 打開開發環境
    // --env=dev 定義env變量爲dev，用來區分生產環境和開發環境
    // --open 自動在瀏覽器當中打開項目
    // --host 192.168.1.84 使用ip地址打開項目，主要做用是能夠用來讓手機或者別人的電腦可以訪問到開發環境的項目
    "build": "webpack --env=prod --progress --profile --colors"
    // webpack 打包命令
    // --env=prod 定義env變量爲prod,用來區分生產環境和開發環境
    // --progress 顯示打包進度
    // profile 性能監控,輸出性能數據
    // --colors 讓打包時的代碼帶點顏色

 },

定製本身的npm腳本

好比我但願個人打包過程簡單一點,我只想簡單的打包，我不關心打包進度，也不關注性能，什麼五光十色的打包信息我更不care，這個時候個人npm scrpis能夠寫成這樣。web

"scripts": {
   "liujp": "webpack --env=prod"
}

這個時候我能夠執行我本身的npm scripts來打包個人項目了。npm

cmd當中輸入：  npm run liujp

文檔

npm scripts文檔json

利用webpack配置代理，解決跨域問題

在先後端分離的項目當中，經常碰到跨域問題。當只有開發環境存在跨域的時候咱們徹底能夠不用麻煩到後端大佬。咱們徹底能夠本身配置代理來解決這個問題。後端

devServer.proxy 的使用

這裏我簡單說下，具體的看文檔進行詳細瞭解。api

devServer: {
    proxy: {
        '/': {
           target: "http://192.168.1.84/test",
        }
    },
}

如上代碼，進行這樣簡單的配置，當我在項目當中調用數據的時候跨域

// 接口管理文件
const API = {
  userInfo: "/userInfo"
}
module.exports = API;
// 項目文件
const API = require("api");
$http.get(api.userInfo).then(({data})=>{
  console.log("獲取用戶數據===>",data)
})

如上，這樣咱們就能夠獲取到 http://192.168.1.84/test/userInfo 這個接口的數據了。瀏覽器

文檔

webpack代理配置文檔網絡

配置經常使用的功能模塊，提升開發效率

好比經常使用的網絡請求模塊 $http.js, 接口管理文件 api.js, 本身封裝的經常使用工具方法類。
利用webpack給咱們提供的插件ProvidePlugin能夠減小咱們頻繁的引入這些模塊，從而提升咱們的開發效率，它可使咱們在用到配置模塊的時候幫咱們節省 import 的過程。
例如：

// webpack配置
plugins: [
    new webpack.ProvidePlugin({
         "api": path.resolve(__dirname,"../src/static/lib/api.js"),
         "$http": path.resolve(__dirname,"../src/static/lib/http.js"),
         "utils": path.resolve(__dirname,"../src/static/lib/utils.js")
     })
],
// 項目當中使用,咱們能夠直接使用相關模塊，而不須要引入, 這個操做webpack會默認幫咱們作了
$http.get(api.test).then(({data})=>{
    console.log(data)
})

文檔

ProvidePlugin文檔

使用resolve.alias簡化咱們的模塊引入

在項目過程中，文件的嵌套可能會十分複雜，致使引入的路徑很長，這個時候，就可使用這個api，來簡化咱們的代碼。

webpack配置示例

...
resolve: {
    extensions: ['.ts', '.js', '.json', '.jsx'], // 容許省略後綴
    alias: {
        "@": path.resolve(__dirname,"../src/components"), // 通用組件地址
     }
}

項目當中使用

// 使用前的引入 
import TestComponents from "../../../components/ExportComponents/TestComponents";
// 簡化後
import TestComponents from "@/ExportComponents/TestComponents";