先看下專案目錄：
entry: __dirname + '/../src/main.js' //__dirname是當前檔案所在資料夾目錄const path = require('path');
entry: path.resolve(__dirname, '../src/main.js')
function resolve(dir)
module.exports =
output: ,js：
},
}]
},
},
},
//require的依賴要先npm安裝
),],
},},
'less-loader' //這裡使用了less
],},
]
},
mode: 'development' //生產環境 'production'devserver:
},
plugins: [
new webpack.namedmodulesplugin(), //當開啟 hmr 的時候使用該外掛程式會顯示模組的相對路徑，建議用於開發環境。，webpack4+ mode為development時預設加了這個外掛程式，可以不用寫
new webpack.hotmodulereplacementplugin(), //啟用hmr
new htmlwebpackplugin(),
],new copywebpackplugin([ //複製你的靜態檔案，就是僅僅是複製那些你不需要處理的檔案
])
"start": "webpack-dev-server --inline --progress --config config/webpack.dev.conf.js",完整版本請移步：
最後附上完整的webpack.dev.conf.js檔案：
'use strict'
const webpack = require('webpack');
const path = require('path');
const htmlwebpackplugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const copywebpackplugin = require('copy-webpack-plugin');
function resolve(dir)
module.exports = ,
devtool: "eval-source-map",
module: ]
},}]
},},
},},
),],
},}, 'less-loader'
],},
],},
devserver:
},mode: "development",
plugins: [
new webpack.namedmodulesplugin(),
new webpack.hotmodulereplacementplugin(),
new htmlwebpackplugin(),
new copywebpackplugin([
])],
}
webpack之構建日誌
當我們執行構建命令時候，會出現如下效果 事實上，很多時候我們並不關注這些，只關注是否構建成功和錯誤資訊。下面我們就一起來解決這個需求，讓我們的命令列清爽整潔 通過在webpack.config.js中設定stats 統計資訊stats 只是通過這種方式來設定，當我們構建成功後，命令列什麼都沒有輸出，...
雜談之webpack篇
預留個空位，待上線。先學習react，回來補上。又看了webpack的文件不知道該怎麼下筆好，還是先寫react 吧，對webpack理解加深了在補。現在補一點webpack的知識。之前之所以不知道怎麼寫是因為把react和webpack當成離散的知識點了，而實際應用應該把離散的知識貫穿起來。首先應...
webpack打包構建之效能優化
1 寫es6時需要轉換工具babel，我們可以只需src目錄上轉換 rules 2 靜態資源優化，如果靜態資源不大，建議用位元組處理 module plugins loaders babel loader?cachedirectory 開啟4個執行緒 threads 4 4 使用splitchunk...