1.webpack --mode development
原因：非全局安裝 ，全局安裝即可，npm i webpack webpack-cli -g
2. webpack --mode development
開發環境下打包，默認入口及出口文件。
3. webpack ./src/index.js -o ./build --mode development
通過命令指定入口文件及出口文件
4、webpack5打包圖片路徑
1）參考：
https://www.jianshu.com/p/36e972b19b28
2）webpack5打包圖片失敗原因：
if update css-loader ^5.2.7 → ^6.2.0 no longer loads font icons correctly solution downgrade to 5.2.7
https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#600-2021-07-14
不管如何修改publicPath和outputPath值都報下圖錯誤：
本機下載css-loader為^6.4.0，將css-loader版本改為^5.2.7后解決
5、webpack打包css時排除某一個css文件配置方法？？？
webpack.config.js中配置所有css文件都放置在css文件夾下
方法一：使用插件將fontawesome-4.2.0文件夾下的所有文件復制到dist文件夾下
webpack.config.js在build文件夾下，因此復制時需要到父級目錄
獲取__dirname的父級目錄：path.resolve(__dirname,'..');
6、如何打包公共部分（公共css、js、html代碼）？？？
7、添加devServer后運行npx webpack serve報錯
提示static heartbeatInterval = 1000;
解決方法：版本兼容問題
https://www.cnblogs.com/zhaomeizi/p/15370903.html
更新版本后運行報錯：
原因：devServet下的contentBase屬性不要設置，新版本默認會自帶，設置了就會報錯
參考：https://www.bilibili.com/video/BV1e7411j7T5?p=9 【泥煤啊的123 】 評論
8. eslint檢查js語法時報錯：
webpack.config.js中配置如下：
將eslint-loader修改為eslint-webpack-plugin后仍報錯：
參考：https://www.jianshu.com/p/fcdb336c8580
升級node版本，本地node版本為11.13.0（node -v）
升級后webpack運行報錯：
webpack : 無法將“webpack”項識別為 cmdlet、函數、腳本文件或可運行程序的名稱。
全局安裝webpack后：
webpack : 無法加載文件 C:\Users\hp\AppData\Roaming\npm\webpack.ps1，因為在此系統上禁止運行腳本。
參考：https://blog.csdn.net/qq_44255146/article/details/115246137
warning Unexpected console statement no-console
// eslint-disable-next-line console.log(sum(2,3));
9、壓縮js
將webpack.config.js中mode修改為"production"或者直接啟動 npm run build:pro（package.json）
10、壓縮html
minify: { // 壓縮HTML文件
removeComments: true, // 移除HTML中的注釋
collapseWhitespace: true // 刪除空白符與換行符
}
11、壓縮css
optimization:{ //壓縮css（只生產環境起作用，若開發環境也壓縮，要配置minimize:true） minimizer:[ new cssMinimizerWebpackPlugin() ], minimize: true,//開發環境下也壓縮css }
12、webpack中使用ProvidePlugin引入jquery，仍報jquery未定義
webpack.cofig.js：
plugins:[ new webpack.ProvidePlugin({//載入jq //$:require.resolve("jquery"),//doesn't work jQuery: require.resolve('jquery')//work well }), ... ]
參考 ： https://stackoverflow.com/questions/45899466/provideplugin-not-working-with-jquery-webpack
13、Uncaught Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ./src/entryjs/common/common.js
import { setCookie,getCookie } from '../common/cookie';
function getCommonHeader(){
....
}
function getCommonFooter(){
....
}
module.exports = { getCommonHeader,getCommonFooter }
common.js中代碼如上，打包后查看html報錯
module.exports為commonjs寫法，改為js寫法
export { getCommonHeader,showSubNav,hideSubNav,user_center,isLogin,getCommonFooter,getCommonHeaderUserCenter,getCommonRightNav,showMessage,closeFun,isIEFun,Appendzero,getRecentDate,GetQueryString,loadingToggle,closeByHand }
common.js中引入時：
// import '../common/common'; import { getCommonHeader,showSubNav,hideSubNav,user_center,isLogin,getCommonFooter,getCommonHeaderUserCenter,getCommonRightNav,showMessage,closeFun,isIEFun,Appendzero,getRecentDate,GetQueryString,loadingToggle,closeByHand } from '../common/common';
若方法為定義在原型上的方法：
Date.prototype.format = function(fmt){...}
可直接在js中使用，無需要再export 或 import
14、js中圖片打包問題
打包后html中未正確引入打包后的圖片地址
// import '../../image/top_logo.png'; //doesn't work // import '../../image/wordtwo.png'; //doesn't work import top_log from '../../image/top_logo.png'; import wordtwo from '../../image/wordtwo.png';
參考：https://juejin.cn/post/6844903954988580872
15、webpack5 Cannot find module ‘webpack-cli/bin/config-yargs‘
參考：
https://webpack.docschina.org/configuration/dev-server/#devserverlivereload
https://blog.csdn.net/qq_39816673/article/details/116133133
16、修改代碼后頁面不自動刷新
https://webpack.docschina.org/configuration/dev-server/#devserverlivereload