webpack4入門配置
下面是抄過來的，方便自己翻越
webpack4.x入門配置
1、首先npm install webpack webpack-cli webpack-dev-server -g (mac電腦用超級管理員的形式進行安裝需要前面加上sudo,Windows 電腦不用加sudo)
image.png
1.1輸密文的密碼（也就是電腦登陸的密碼）安裝開始…………
image.png
2、輸入命令mkdir config dist src建立三個資料夾
image.png
2.1資料夾如下所示：
3、輸入命令
npm init -y
image.png
3.1細心的你應該發現編輯器裡面多了package.json這個檔案
image.png
package.json檔案裡面的內容是最初的樣子
{
"name": "study_webpack2",
"version": "1.0.0",
"description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } 4、輸入命令touch dist/index.html src/index.js分別dist和src資料夾下面建立一個index.html檔案和index.js檔案
image.png
專案目錄目前如下：
image.png
5、webpack4.x中打包預設找src/index.js作為預設入口，可以直接在終端中輸入命令
webpack 將當前的內容進行一個簡單的打包
image.png
這時候看下你的專案目錄dist檔案下是不是多了一個main.js檔案
image.png
5.1細心的小夥伴應該看到打包的時候終端中會出現黃色的警告提示
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/ mode是webpack中獨有的，有兩種打包環境，一個是開發環境：development另外一個是生產環境：production
打包的時候輸入webpack --mode=development或者webpack --mode=production就不會出現警告提示了
image.png
下面是
webapck --mode=production命令打包，這個是程式碼壓縮過的，細心的朋友應該也發現打包後小了很多
image.png
同時專案資料夾下面多了 一個node_modules資料夾
image.png
6、輸入命令
touch config/webpack.dev.js建立檔案
image.png
回車後，現在專案目錄如下：
image.png
7、輸入命令
rm dist/main.js src/index.js移除掉這兩個檔案我們自己來配置
image.png
專案目錄如下：
image.png
7.1 現在在src資料夾下面建立main.js檔案
image.png
7.2進入到webpack.dev.js檔案中進行配置，具體在程式碼中註釋（這裡簡單的一些，具體的下面會給大家）
image.png
7.3現在不能執行之前的webpack --mode="development"命令了會報下面的錯誤
image.png
這裡是因為webpack4打包預設找的src下面的index.js入口，我們前面已經刪除了，這裡src下面死main.js檔案，所以找不到就報
ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/yubo/Desktop/www/study_webpack2'錯誤，所以這裡我們到packsge.json裡面配置下命令，讓打包的時候執行我們在config/webpack.dev.js下面配置的入口。
image.png
這個時候我們在終端執行輸入命令
npm run build就可以了
image.png
8、現在配置打包時候的入口檔案以及出口檔案，很多朋友應該也看到webpack.dev.js中的註釋的，這裡的入口是
'./src/main.js'
//入口檔案的配置項
entry:{
//裡面的main是可以隨便寫的
main:'./src/main.js'
}
這個時候我們有兩個檔案入口這麼辦呢？現在我們再src資料夾下面建立main2.js
image.png
//入口檔案的配置項
entry:{
//裡面的main是可以隨便寫的
main:'./src/main.js',
main:'./src/main2.js' //這裡新新增一個入口檔案 }, 這個時候我們再使用之前配置的命令 npm run build 進行打包
image.png
我們會發現報錯提示 Conflict: Multiple assets emit to the same filename bundle.js 翻譯過來告訴我們 衝突:多個資產發出相同的檔名bundle.js。這個時候就需要我們來配置出口檔案了，下面是之前的出口檔案
//出口檔案的配置項
output:{
//打包的路徑
path:path.resolve(__dirname,'../dist'),
//打包的檔名稱
filename:'bundle.js' }, 現在我們將原來寫死的bundle.js給改成了 [name].js
image.png
這個時候我們再執行打包命令看下
image.png
已經打包好了，這個時候看下出口檔案dist下面也打包生成了兩個相同入口名字的檔案
image.png
注：[name]的意思是根據入口檔案的名稱，打包成相同的名稱，有幾個入口檔案，就可以打包出幾個檔案。
9 、設定webpack-dev-server，剛開始的時候我們就全域性下載這裡就不需要下載了，現在需要配置一下devServer。最簡單的devServer配置項只有四個
image.png
這個時候直接執行命令
webpack-dev-server會報錯
image.png
這個時候我們可以到packsge.json裡面配置下
image.png
這個時候我們終端輸入命令
npm run server就可以跑起來了
image.png
然後我們再到專案dist資料夾下面的index.html 檔案中引入打包的兩個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>Document</title> </head> <body> <div id="study"></div> <script src="./main.js"></script> <script src="./main2.js"></script> </body> </html> 儲存後再到src檔案下面分別給main.js和main2.js檔案裡面寫一些東西。
這個是src/main.js檔案下：
alert("11111")
這個是src/main2.js檔案下：
document.getElementById("study").innerHTML="hello webpack"
這個時候再再終端中輸入命令 npm run server 然後再開啟瀏覽器再位址列輸入locahost:8888 就可以看到效果了，注意這裡的 locahost:8888 是之前你在下面這個檔案配置的
devServer:{
//設定基本目錄結構,用於找到程式打包地址
contentBase:path.resolve(__dirname,'../dist'),
//伺服器的IP地址，可以使用IP也可以使用localhost
host:'localhost',
//服務端壓縮是否開啟 compress:true, //配置服務埠號 port:8888 } 10、CSS檔案打包
下面學習一下怎麼樣將我們的CSS檔案打包，在學習CSS打包之前，需要先對webpack.dev.config.js裡的Loaders配置項進行了解。
loaders可以把SASS檔案的寫法轉換成CSS,也可以把我們專案中寫的ES6、ES7等給編譯成瀏覽器能解析的css，下面我們先在src資料夾下面建立index.css檔案，並且寫一些css在裡面
專案路徑： /src/css/index.css 裡面編輯程式碼如下
image.png
這個時候需要在入口檔案中引入才可以進行打包
image.png
這個時候我們在終端中輸入命令進行打包，會看到這樣的報錯
image.png
這是因為我們要想用打包css需要下載配置css 的loader：
style-loader 和 css-loader
在終端輸入命令
npm install style-loader css-loader --save-dev下載依賴
image.png
現在到webpack.dev.config.js中對module屬性中的程式碼進行配置
image.png
這個時候我們的css . loader就配置好了，可以在命令終端中試著輸入
npm run server看下
image.png
打包成功了，然後再進入到瀏覽器發現已經有效果了
image.png
11、下面我們來配置JS壓縮
我的專案上線之前都會對程式碼進行壓縮，很多都是通過外掛的方式實現的，這裡我們就先來引入一個uglifyjs-webpack-plugin(JS壓縮外掛，簡稱uglify)。
這裡大家需要注意的：雖然uglifyjs是外掛，但是webpack版本里預設已經整合，不需要再次安裝。
我們需要在webpack.dev.config.js中引入uglifyjs-webpack-glugin外掛
const uglify = require('uglifyjs-webpack-plugin');
引入後在plugins配置裡new一個 uglify物件就可以了。
plugins:[
new uglify()
],
這個時候我們再終端執行命令 npm run bulid 進行打包會提示下載webpack-cli 命令輸入yes
image.png
然後下載一會，下載好了以後，看下dist下面的出口main.js檔案裡面的js都被壓縮了
image.png
12、打包HTML檔案
現在我們來對html進行打包，這個時候我們需要將之前手動再dist資料夾下面寫的index.html檔案移到src資料夾下面，並去掉我們的JS引入程式碼並去掉我們的JS引入程式碼（webpack會自動為我們引入JS），然後讓打包的時候自動再dist資料夾下面生成
image.png
然後我們對webpack.dev.config.js檔案進行配置，先引入html-webpack-plugin外掛，然後在終端下載
npm install --save-dev html-webpack-plugin
這個時候再到webpack.dev.config.js的plugins裡面進行配置
//外掛，用於生產模版和各項功能
plugins:[
new uglify(), //js壓縮外掛
new htmlPlugin({
minify:{ //是對html檔案進行壓縮 removeAttributeQuotes:true //removeAttrubuteQuotes是卻掉屬性的雙引號。 }, hash:true, //為了開發中js有快取效果，所以加入hash，這樣可以有效避免快取JS。 template:'./src/index.html' //是要打包的html模版路徑和檔名稱。 }) ], 此時我們在終端輸入 npm run build 看見dist檔案下面自動為我們生成了一個index.html檔案裡面自動為我們引入了js如下：
<!DOCTYPE html>
<html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content="width=device-width,initial-scale=1"> <meta http-equiv=X-UA-Compatible content="ie=edge"> <title>Document</title> </head> <body> <div id=study></div> <script type=text/javascript src=main.js?5a6cef00acf20ba2a991></script><script type=text/javascript src=main2.js?5a6cef00acf20ba2a991></script></body> </html> 13、CSS中的圖片處理
在這裡我們首先在網上找一張圖片，然後在src檔案下面的index.html檔案中建立一個div然後給一個clss名，然後在css中新增背景圖，專案目錄：
image.png
./src/index.html檔案裡面
<!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>Document</title> </head> <body> <div id="study"></div> <div class="img"></div> </body> </html> ./ src/css/index.css檔案裡面
.img{
background-image: url(../images/photo.jpeg);
width:466px; height:453px; } 打包看下會有報錯
image.png
這裡是因為我們缺少loader的解析,現在需要下載兩個解析圖片的loader
file-loader 和 url-loader
npm install --save-dev file-loader url-loader
解釋下：
file-loader：解決引用路徑的問題，拿background樣式用url引入背景圖來說，我們都知道，webpack最終會將各個模組打包成一個檔案，因此我們樣式中的url路徑是相對入口html頁面的，而不是相對於原始css檔案所在的路徑的。這就會導致圖片引入失敗。這個問題是用file-loader解決的，file-loader可以解析專案中的url引入（不僅限於css），根據我們的配置，將圖片拷貝到相應的路徑，再根據我們的配置，修改打包後文件引用路徑，使之指向正確的檔案。
url-loader：如果圖片較多，會發很多http請求，會降低頁面效能。這個問題可以通過url-loader解決。url-loader會將引入的圖片編碼，生成dataURl。相當於把圖片資料翻譯成一串字元。再把這串字元打包到檔案中，最終只需要引入這個檔案就能訪問圖片了。當然，如果圖片較大，編碼會消耗效能。因此url-loader提供了一個limit引數，小於limit位元組的檔案會被轉為DataURl，大於limit的還會使用file-loader進行copy。
現在需要我們去webpack.dev.config.js檔案配置下
//圖片 loader
{
test:/\.(png|jpg|gif|jpeg)/, //是匹配圖片檔案字尾名稱
use:[{
loader:'url-loader', //是指定使用的loader和loader的配置引數 options:{ limit:500 //是把小於500B的檔案打成Base64的格式，寫入JS } }] } 此刻我們在終端中輸入 npm run build 打包的時候就不會報錯了，也可以看到我們的圖片被打包了
image.png
注意：為什麼只使用了url-loader
有的小夥伴會發現我們並沒有在webpack.dev.config.js中使用file-loader，但是依然打包成功了。我們需要了解file-loader和url-loader的關係。url-loader和file-loader是什麼關係呢？簡答地說，url-loader封裝了file-loader。url-loader不依賴於file-loader，即使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader，因為url-loader內建了file-loader。通過上面的介紹，我們可以看到，url-loader工作分兩種情況：
1.檔案大小小於limit引數，url-loader將會把檔案轉為DataURL（Base64格式）；
2.檔案大小大於limit，url-loader會呼叫file-loader進行處理，引數也會直接傳給file-loader。
也就是說，其實我們只安裝一個url-loader就可以了。但是為了以後的操作方便，我們這裡就順便安裝上file-loader。
14、css分離和圖片路徑處理
這裡我們主要學習把CSS從JavasScript程式碼中分離出來，還有一個是如何處理分離出來後CSS中的圖片路徑不對問題。
現在我們要下載一個css分離的外掛： extract-text-webpack-plugin
我們在輸入命令 npm install extract-text-webpack-plugin --save-dev
image.png
14.1下載完外掛後，需要我們配置一下
image.png
14.2配置後需要在plugins屬性中進行配置
new extractTextPlugin("css/index.css") //這裡的/css/index.css 是分離後的路徑
14.3現在還需要修改一下配置裡面css的loader的配置
{
test:/\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader", use: "css-loader" }), // css分離後這裡需要重新配置，下面就註釋了 // use:[ // {loader: "style-loader"}, // {loader:"css-loader"} // ] },
14.4這個時候打包會報錯
image.png
是因為我們用的是webpack4.0.0以上版本
現在看下package.json檔案
"devDependencies": {
"css-loader": "^0.28.11",
extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "style-loader": "^0.21.0", "url-loader": "^1.0.1", "webpack": "^4.6.0", "webpack-cli": "^2.0.15" } 解決辦法：
npm install --save-dev [email protected]
會下載到+ [email protected]0.0-beta.0
這個時候看下package.json檔案
image.png
然後在打包就正常了
image.png
14.5現在配置下我們的路徑問題
publicPath：是在webpack.dev.config.js檔案的output選項中，主要作用就是處理靜態檔案路徑的。
在處理前，我們在webpack.dev.config.js 上方宣告一個物件，叫website。
var website ={
publicPath:"http://localhost:8888/"
// publicPath:"http://192.168.1.103:8888/"
}
這裡的IP和埠，是你本機的ip或者是你devServer配置的IP和埠。
然後在output選項中引用這個物件的publicPath屬性。
output:{
//打包的路徑
path:path.resolve(__dirname,'../dist'),
//打包的檔名稱
filename:'[name].js', //這裡[name] 是告訴我們入口進去的檔案是什麼名字，打包出來也同樣是什麼名字 publicPath:website.publicPath //publicPath：主要作用就是處理靜態檔案路徑的。 },
配置完成後，你再使用webpack命令進行打包，你會發現原來的相對路徑改為了絕對路徑，這樣來講速度更快。
image.png
15、處理HTML中的圖片
在webpack中是不喜歡你使用標籤<img>來引入圖片的，但是我們作前端的人特別熱衷於這種寫法，國人也為此開發了一個：html-withimg-loader。他可以很好的處理我們在html 中引入圖片的問題，如何把圖片放到指定的資料夾下
//圖片 loader
{
test:/\.(png|jpg|gif|jpeg)/, //是匹配圖片檔案字尾名稱
use:[{
loader:'url-loader', //是指定使用的loader和loader的配置引數 options:{ limit:500, //是把小於500B的檔案打成Base64的格式，寫入JS outputPath:'images/', //打包後的圖片放到images資料夾下 } }] } 現在下載 html-withimg-loader 解決的問題就是在hmtl檔案中引入<img>標籤的問題.
首先安裝
npm install html-withimg-loader --save-dev
到webpack.dev.config.js中配置loader
{
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
}
這個時候打包會發現已經生成了images資料夾和圖片的檔案
image.png
16、Less檔案的打包和分離
下面主要說下Less檔案如何打包