從0搭建本身的webpack開發環境（三）

往期回顧：

從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')},
])
複製代碼

---