webpack 最新版

　　以前說過老的版本，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 文件

　　　　　　　　　　templage:"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