之前說過老的版本，webpack@3.8.1 這個版本，現在我們來看看，新版本和老版本的區別
webpack 4 以上的版本
npm 全稱 node package manager （node 包管理工具）
webpack 是 node 的，所以他遵循 node 語法
webpack 安裝
1. 本地安裝
npm i webpack webpack-cli -D
2. 全局安裝
npm i webpack webpack-cli -g -D
webpack-cli ， webpack 的腳手架，實現了部分功能的優化
1. 可以 0 配置（也就是說我們可以不建 webpack.config.js 文件，自帶了一些功能的實現）
比如：我們可以直接使用 npx webpack 指令之后，將當前 src 目錄下的 index.js 文件 打包成 在dist 目錄下的 main.js 文件
但是，由於只實現了部分優化，一是功能少，二是不夠靈活，所以還是需要我們來對環境的配置
2. 我們如何分辨開發環境，還是生產環境？
看文件屬於什么類：工具類的一般都屬於開發環境，插件類的一般都屬於生產環境
3. 我們如何分辨 舊版本 和 新版本的 webpack
通過 npx 指令 npx webpack 代表新版本的 webpack webpack 代表舊版本的 webpack
4. 自己手動的配置 webpack.config.js 文件
var path=require("path"); // node 自帶的插件 用於對路徑的處理
var Htmlwebpackplugin=require("html-webpack-plugin"); // 對 html 文件處理的插件
module.exports={
entry:{
index:"./index.js",
app:"./app.js"
}, // entry 代表入口文件，（也就是要被打包的文件）
// 屬性值 可以是代表一個文件的 字符串，也可以是代表對象來表示多個文件
output:{
filename:"[name].js" // filename 代表出口的文件名，（就是打包后的文件）， 如果是多個文件，我們一定要這么寫
path:path.resolve("dist") // 路徑 因為是絕對路徑，所以我們需要使用 node 中自帶的模板，path.resolve 就會找到當前目錄下的絕對路徑
},
mode:"", // 這個是新版本 webpack 新增的配置屬性 如果不寫的話，就會給出警告，屬性值就兩個，porduction 壓縮， development 未壓縮版
module:{} // 我們模塊配置所依賴的包 如 在 npm 官網中 輸入 css-loader
plugins:[
new Htmlwebpackplugin({
filename:"./index.html", // 編譯后的 html 文件
template:"index.html", // 編譯前地 html 文件
minify:{
collapseWhitespace:true // 將 html 文件壓縮為一行
},
chunks:["index","app"] // 依賴的 js 文件 與 entry 中的屬性 保持一致
})
] // 開發過程中所依賴的插件 如：html-webpack-plugin 插件為例
devServer:{
open:true, // 自動打開瀏覽器
contentBase:"" // 配置根目錄
}
}
如果我們想使用 webpack 中的虛擬服務器，我們需要下載文件 webpack-dev-server
1. 下載：npm i webpack-dev-server -D
2. 啟動指令：webpack-dev-server
如果想使用 npm run 來啟動指令：
我們需要在 package.json 中的 script 中設置
"start":"webpack-dev-server" // start 隨意起名
"dev":"npx webpack" // dev 隨意起名
啟動指令
npm start
npm run dev