玩轉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有哪些？

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