webpack 4.x一起學習（一）
最近在學習webpack第四個版本，相比大改版肯定有諸多不同，這邊進行重新學習順便排排BUG
安裝過程中難免有點慢，但是npm是慢 cnpm又可能出錯
npm install -g chajian --registry=http://registry.npm.taobao.org 推薦此方法安裝
npm init -y 初始化
npm install -D webpack webpack-cli --registry=http://registry.npm.taobao.org 4版本要求安裝webpack-cli 我們一步到位
安裝好之後可以通過 webpack -v 檢視版本號
建立webpack.config.js配置檔案
大家可以根據我的目錄進行測試webpack，也可以自行配置
index.js 注意js引入 此處是未生成的 待會我將要生成的js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>webpack</title> </head> <body> <div id="title"></div> <script src="./../dist/bundle.js"></script> =>引入我們即將通過webpack生成的js檔案 </body> </html>
entry.js寫的簡單一點 就一句程式碼
document.getElementById('title').innerHTML='Hello Webpack';
配置webpack.config.js 這個大家可能有點陌生 ,介紹一下基本配置
module.exports={ //入口檔案的配置項 entry:{}, //出口檔案的配置項 output:{}, //模組：例如解讀CSS,圖片如何轉換，壓縮 module:{}, //外掛，用於生產模版和各項功能 plugins:[], //配置webpack開發服務功能 devServer:{} }
這裡我用了3版本的配置 後續會跟進
來配置一下初步打包轉換
entry選項（入口配置）
這個選項就是配置我們要壓縮的檔案一般是JavaScript檔案（當然也可以是CSS……）。這裡要填寫的是src目錄下的entry.js檔案。
output選項（出口配置）
出口配置是用來告訴webpack最後打包檔案的地址和檔名稱的，根據我們的配置應該打包到dist目錄下
module.exports={
//入口檔案的配置項
entry:{
//裡面的entery是可以隨便寫的
entry:'./src/entry.js'
},
//出口檔案的配置項
output:{
//打包的路徑文職
path:path.resolve(__dirname,'dist'),
//打包的檔名稱
filename:'bundle.js'
},
//模組：例如解讀CSS,圖片如何轉換，壓縮
module:{},
//外掛，用於生產模版和各項功能
plugins:[],
//配置webpack開發服務功能
devServer:{}
}
webpack 打包的命令很簡單 就是webpack 接下來我們來打包一下
很顯然我們失敗了 這裡有個錯誤就是 path is not defined 我們這邊需要引入一下path
const path = require('path') =>在頭部 引入path
module.exports={
//入口檔案的配置項
entry:{
//裡面的entery是可以隨便寫的
entry:'./src/entry.js'
},
//出口檔案的配置項
output:{
//打包的路徑文職
path:path.resolve(__dirname,'dist'),
//打包的檔名稱
filename:'bundle.js'
},
//模組：例如解讀CSS,圖片如何轉換，壓縮
module:{},
//外掛，用於生產模版和各項功能
plugins:[],
//配置webpack開發服務功能
devServer:{}
}
好 我們再webpack一下 此時我們將會成功
dist目錄下自動生成了bundle.js 檔案 你可以開啟看一下啊 根本看不懂 這是打包之後的檔案，但是我們開啟瀏覽器執行html的時候，裡面會出現內容，就說明這個js是可以使用的
此時我們刪掉生成的js 配置一下mode屬性
const path = require('path')
module.exports={
mode: 'development', =>預設配置是 ‘production（生產環境）’
//入口檔案的配置項
entry:{
//裡面的entery是可以隨便寫的
entry:'./src/entry.js'
},
//出口檔案的配置項
output:{
//打包的路徑文職
path:path.resolve(__dirname,'dist'),
//打包的檔名稱
filename:'bundle.js'
},
//模組：例如解讀CSS,圖片如何轉換，壓縮
module:{},
//外掛，用於生產模版和各項功能
plugins:[],
//配置webpack開發服務功能
devServer:{}
}
此時我們再webpack 一下 可以做個對比 有什麼不同（此處不演示）
給大家介紹一下配置中的 _dirname
其實path.resolve(__dirname,’dist’)就是獲取了專案的絕對路徑 我給大家演示一下
在dist下新建dirname.js檔案 程式碼如下
const path =require('path')
console.log(path.resolve(__dirname,'dist'))
然後我們在下面輸入命令 cd dist 然後 node dirname.js
可以看到輸出來的 是dist的路徑
到這裡就是webpack最基本的配置了，希望小夥伴多練練，不練也多看看
多入口、多出口配置
在src下新建一個js 內容隨意 刪除dist目錄下的所有js
const path = require('path')
module.exports={
mode: 'development',
//入口檔案的配置項
entry:{
//裡面的entery是可以隨便寫的
entry:'./src/entry.js',
=>這裡我們又引入了一個入口檔案
entry2:'./src/entry2.js'
},
//出口檔案的配置項
output:{
//打包的路徑文職
path:path.resolve(__dirname,'dist'),
//打包的檔名稱
filename:'[name].js' =>注意此處 使用[name].js 表示打包出的檔名與進入名相同
=>也就是即將打包出 entry.js 與entry2.js 在dist下
},
//模組：例如解讀CSS,圖片如何轉換，壓縮
module:{},
//外掛，用於生產模版和各項功能
plugins:[],
//配置webpack開發服務功能
devServer:{}
}
改動一下index中的引入檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<div id="title"></div>
<script src="./entry.js"></script> 引入發生了改變
<script src="./entry2.js"></script>
</body>
</html
接下來webpack打包一下
此時dist下已生成了js檔案兩個 說明我們成功了