往期回顧：

從0搭建自己的webpack開發環境（一）

從0搭建自己的webpack開發環境（二）

1.處理JS模組

1.1 將es6程式碼編譯成es5程式碼

程式碼的轉化工作要交給babel來處理

npm install @babel/core @babel/preset-env babel-loader --save-dev

@babel/core是babel中的核心模組，@babel/preset-env 的作用是es6轉化es5外掛的外掛集合，而babel-loader是webpack和loader的橋樑。

const sum = (a, b) => {
  return a + b;
};
 

增加babel的配置檔案 .babelrc

{
    "presets": [
       ["@babel/preset-env"]
    ]
}

配置loader

module: {
	rules: [{ test: /\.js$/, use: "babel-loader" }]
},

現在打包已經可以成功的將es6語法轉化成es5語法！

1.2 解析裝飾器

npm i @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators --save-dev
 

"plugins": [
  ["@babel/plugin-proposal-decorators", { "legacy": true }],
  ["@babel/plugin-proposal-class-properties",{"loose":true}]
]

legacy:true表示繼續使用裝飾器，loose為false時會採用Object.defineProperty定義屬性

• Plugin會執行在Preset之前
• Plugin 會從第一個開始順序執行，Preset則是相反的

1.3 polyfill

根據.browserslistrc檔案，轉化使用到的瀏覽器api

"presets": [
    ["@babel/preset-env",{
        "useBuiltIns":"usage", // 按需載入
        "corejs":2 // corejs 替代了以前的pollyfill
    }]
]

安裝corejs

npm install core-js@2 --save

使用transform-runtime A plugin that enables the re-use of Babel's injected helper code to save on codesize.可以幫我們節省程式碼。

npm install --save-dev @babel/plugin-transform-runtime @babel/runtime

在.babelrc中配置外掛

"plugins": [
    "@babel/plugin-transform-runtime"
]

1.4 新增eslint

安裝eslint

npm install eslint
npx eslint --init # 初始化配置檔案

{
    test:/\.js/,
    enforce:'pre',
    use:'eslint-loader'
},

配置eslint-loader可以實時校驗js檔案的正確性，pre表示在所有loader執行前執行

2.source-map

• eval：生成程式碼 每個模組都被eval執行，每一個打包後的模組後面都增加了包含sourceURL
• source-map：產生map檔案
• inline：不會生成獨立的 .map檔案，會以dataURL形式插入
• cheap：忽略打包後的列資訊，不使用loader中的sourcemap
• module：沒有列資訊，使用loader中的sourcemap(沒有列資訊)

devtool:isDev?'cheap-module-eval-source-map':false

每個庫中採用的sourcemap方式不一，可以根據自己的需要自行配置

3.resolve解析

想實現使用require或是import的時候，可以嘗試自動新增副檔名進行匹配

resolve: {
    extensions: [".js", ".jsx", ".json", ".css", ".ts", ".tsx", ".vue"]
},

4.拷貝靜態檔案

有時候在打包時希望將一些靜態資原始檔進行拷貝，可以使用copy-webpack-plugin外掛

安裝外掛

npm i copy-webpack-plugin --save-dev

使用拷貝外掛

const CopyWebpackPlugin = require('copy-webpack-plugin');
new CopyWebpackPlugin([
    {from:path.resolve('./src/static'),to:path.resolve('./dist')},
])

---

相關推薦