首先我們的目標，可以讓**執行，對**除錯的時候方便一些
建立webpack.config.js
const = require('path'); // node 內建核心模組，用來處理路徑問題。
module.exports = ,
mode: 'development' //開發環境
};
// loader 配置
module: ,]},
外掛程式是使用先引用，然後再plugin中配置
/*
*/const = require('path');
const htmlwebpackplugin = require('html-webpack-plugin');
module.exports = ,
module: ,
plugins: [
// plugins的配置
// html-webpack-plugin
// 功能：缺省會建立乙個空的html，自動引入打包輸出的所有資源（js/css）
// 需求：需要有結構的html檔案
new htmlwebpackplugin()
],mode: 'development'
};
缺點：處理不了html中的
module: },]
},
注意：這裡的exclude是排除的意思，而真正的專案是一般不用這個的，到時候介紹vue-cli的時候他們就是按不用的場景去使用url還是file的不會說用反選
module: }]
},
"serve ":webpack serve --mode development", // 開發環境
"build":"webpack build --mode production" // 生產環境
**後續補上。。。
/*
開發環境配置：能讓**執行
執行專案指令：
webpack 會將打包結果輸出出去
npx webpack-dev-server 只會在記憶體中編譯打包，沒有輸出
*/const = require('path');
const htmlwebpackplugin = require('html-webpack-plugin');
module.exports = ,
module: ,,},
,,],}
}},
// ,}]
},plugins: [
// plugins的配置
new htmlwebpackplugin()
],// 開發伺服器 devserver：用來自動化（自動編譯，自動開啟瀏覽器，自動重新整理瀏覽器~~）
// 特點：只會在記憶體中編譯打包，不會有任何輸出
// 啟動devserver指令為：npx webpack-dev-server
devserver:
};
webpack學習總結 生產環境
要求上線的 穩定 js，css的相容處理 執行速度塊 將css改為單獨檔案用link引入 傳輸速度塊 壓縮 mini css extract plugin將取代style loader，作用 提取js中的css 為單獨檔案 乙個 防止html太大，所以弊端就是css檔案太大了 如果是單入口，所以vu...
webpack開發環境配置
node.js webpack npm install webpack webpack cli g 全域性安裝 npm install webpack webpack cli d 本地 當前目錄 安裝 各種loader 根據需要安裝loader npm i css loader style load...
webpack 學習總結
多頁應用單頁應用的打包 通過配置 entry 為單入口還是多入口來決定 乙個入口即乙個頁面 es5 新語法支援 通過babel loader 處理新語法 babel preset env babel 外掛程式預設 babel 外掛程式的集合，由於我們處理es5 需要配置很多外掛程式，單獨配置很麻煩 ...