玩轉webpack系列之webpack核心概念(一)

Key.L發表於2020-04-04
Web

玩轉webpack系列之webpack核心概念(一)

webpack核心概念之entry用法

Entry用來指定打包入口

上方依賴圖的入口是entry,對於非程式碼，字型依賴也會不斷加入到依賴圖中。所有的模組之間會存在一些依賴關係， 因此webpack裡面會根據entry找到它的依賴，入口檔案的依賴也可能依賴其他的一些檔案，在這棵依賴樹上，只要遇到依賴，webpack就會將其加入到依賴圖中，最終遍歷完後才會生成一些打包資源。

Entry的用法

單入口：entry是一個字串

module.exports = {
    entry:'./path/src/index.js'
}
複製程式碼

多入口： entry是一個物件

module.exports = {
    entry:{
        app:'./src/app.js',
        myapp:'./src/myapp.js'
    }
}
複製程式碼

核心概念之Output

Output用來告訴webpack如何將編譯後的檔案輸出到磁碟

Output的用法:單入口配置

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}
複製程式碼

Output的用法：多入口配置

module.exports = {
    entry: {
        app:'./src/app.js',
        search:'./src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    }
}
複製程式碼

[name].js通過佔位符確保檔名稱的唯一 , 單個入口的檔名是可以寫死的，像這種多個入口就需要通過佔位符對他進行一個區分。

核心概念之Loaders

webpack原生只支援js和json兩種檔案型別，通過Loaders去支援其他如css型別並且把它們轉化成有效的模組，並且可以新增到依賴圖中。

loaders本身是一個函式，通過接收原始碼然後經過loaders這個函式轉換之後。會輸出一個結果給下一步去使用。

常見的Loaders有哪些？

babel-loader:轉換ES6,ES&等JS新特性語法 css-loader:支援.css檔案的載入和解析。 less-loader:將less檔案轉換成css
ts-loader:將TS轉換成JS
file-loader:進行圖片，字型等的打包

Loaders的用法

config.module
    .rule('css')
    .test(/\.css$/)
    .use('css')
    .loader('css-loader!')
module.export = config.toConfig();
複製程式碼

這裡用到的是webpack-chain的配置方案，.test指定匹配規則，.use指定檔案型別，.loader指定使用的loader名稱。

核心概念之Plugins

Plugins通常是用於打包輸出的js檔案的優化，資源的管理，和環境變數的注入，作用於整個構建過程。

常見的Plugins有哪些？

玩轉webpack系列之webpack核心概念(一)

module.exports = {
plugins:[
    new HtmlWebpackPlugin({
    template:'./src/index.html'
    })
]
複製程式碼

使用時只需要把你定義好的外掛，放入plugins陣列裡就可以了。

核心概念之Mode

Mode是用來指定當前的構建環境是：production,development還是none,預設情況下是production。

development:設定process.env.Node_ENV的值為development。

production: 設定process.env.Node_ENV的值為production。

none：不開啟任何優化選項。

寫在最後

筆者最近在學webpack,想跟大家一起交流分享。webpack系列會持續更新，歡迎關注，如果可以的話那就再點個贊吧~xixi

相關文章