配置babel webpack 常用優化配置

2021-10-14 18:17:10 字數 1809 閱讀 7214

當使用 es6 的 import 來獲取模組時,webpack打包時會進行乙個叫 tree-shaking 的操作,會去掉沒有被呼叫的內容。

注:僅當知道某個包不依賴其他外部模組時使用。

防止 webpack 解析那些任何與給定正規表示式相匹配的檔案。忽略的檔案中不應該含有 import, require, define 的呼叫,或任何其他匯入機制。忽略大型的 library 可以提高構建效能。

,

}}

-noparse

依賴包中被匹配的路徑將忽略引用

const webpack = require('webpack');

)

]}

配置乙個單獨的config檔案用來編譯庫的**, 例 webpack.library,config.js

const path = require('path');

const webpack = require('webpack');

module.exports = () => ,

output: ,

plugins: [

new webpack.dllplugin(),]}}

在 package.json 中提交指令碼

scripts:
思考: 1. 這裡手動配置感覺有點坑,感覺 htmlwebpackplugin 應該能做點什麼。 2. 這裡應該同理可以直接使用cdn載入鏈結庫,然後再webpack中配置忽略載入相關的依賴估計也可以。

plugins: [

new webpack.dllreferenceplugin(),

]

適合中大型專案,小型專案分配多個程序反而會減慢編譯速度

宣告````

引用```js

, ]},

plugins: [

id: 'js',

loaders: [

], //es7 decorators語法

["@babel/plugin-proposal-class-properties", ], // es7 class 屬性定義語法處理

["@babel/plugin-transform-runtime"], // js 高階語法支援和簡單的優化],}

},],

}),id: 'css',

loaders: [

'style-loader',

'css-loader',

],}),

]}

optimization: ,

vendors:

}}},

利用 es6 草案中的語法來實現

新增 babel

yarn add @babel/plugin-syntax-dynamic-import -d
引用

use: [},]

devserver: ,

plugins: [

new webpack.hotmodulereplacementplugin(), // 熱替換

],

常成員,常函式,常物件

知識點1.常物件中的任何型別的資料成員 無論私有還是公有 的值都不能被改變。知識點2.常物件能呼叫的 1.公有的常成員函式 2.建構函式 3.公有的靜態函式 知識點3.常物件與常成員函式只有同時存在才都有意義 知識點4.普通物件既可以呼叫常成員函式,也可以呼叫非常成員函式 知識點5.常成員函式不能更...

常物件,常成員函式,常引用

宣告顯示 const 型別說明符 物件名 常物件的資料成員值在物件的整個生存期間不能被改變,即就是,常物件必須進行初始化,而且不能被更新。宣告形式 型別說明符 函式名 參數列 const 注意 1.在函式定義部分也需要帶const關鍵字。2.乙個常物件只能呼叫它的常成員函式,是常物件唯一的對外介面方...

this指標 常函式 常物件

this指標引入 類中物件的成員變數和成員函式是分開儲存的,sizeof 空class 1,另外示例中涉及到位元組對齊的問題,double本身的位元組為8,int為4,由於位元組對齊,int也為8,所以最終位元組數為16 1 class person 89 void test01 非靜態成員變數才屬...