webpack
定義：webpack是前端資源加載或打包工具，
資源：img、css、js、json等；
用法：
打包JS文件：
第一步：
1.首先創建一個新的文件夾，注意要使用字母，為了方便往下編輯，再次是為了提升自己的知識涵養。
然后shift鍵加鼠標右擊，在當前創建目錄下打開powershell窗口
然后配置模塊說明文件···輸入指令：
npm init
然后生成一個package.json的模塊；
-
-
- name - 包名。
-
-
-
- version - 包的版本號。
-
-
-
-
-
- description - 包的描述。
-
-
-
-
- homepage - 包的官網 url 。
-
-
-
- author - 包的作者姓名。
-
-
-
- contributors - 包的其他貢獻者姓名。
-
-
-
- dependencies - 依賴包列表。如果依賴包沒有安裝，npm 會自動將依賴包安裝在 node_module 目錄下。
-
-
-
- repository - 包代碼存放的地方的類型，可以是 git 或 svn，git 可在 Github 上。
-
-
-
- main - main 字段指定了程序的主入口文件，require('moduleName') 就會加載這個文件。這個字段的默認值是模塊根目錄下面的 index.js。
-
-
-
- keywords - 關鍵字
-
第二步:
下載：
指令：
全局：npm install -g webpack@3.8.1
局部：Npm install webpack@3.8.1 --save -dev
盡量全局和局部都安裝
第三步：
打包js文件
指令 webpack 入口文件 出口文件
Webpack index.js rudle.js
第二種js打包方法：
（如果我們只想使用webpack這個指令 就玩好打包需要配置webpack.config.js）
Webpack會有一個默認的配置文件叫webpack.config.js
在創建的文件下配置一個webpack.config.js
內容為：
指令就是簡單的webpack，完成之后顯示
打包css文件：
Loader:依賴包
Css轉成js less轉成js
Json 轉成js png傳成js 而loader就就解決這些問題的。
Css文件打包到js中 需要css-loader style-loader
指令：npm install style-loader css-loader --save -dev
下載之后，在webpack.config.JS文件中添加：
注意： 這個虛擬js文件由配置文件決定的。但是他是和app.html同目錄同級別關系。所以引入關系需要注意
添加熱加載：
添加熱加載，改變文件內容，只要保存，就會自動刷新
指令：（注意:webpack是3.8.1 這個輕量服務器就得是2.9.4 如果webpack是4.0版本 這個dev-server就得是3.0版本）
全局：npm install -g webpack-dev-server@2.9.4
局部（開發環境下）：npm install webpack-dev-server@2.9.4
直接使用（啟動服務器，作用---只啟動服務器，不能自動刷新）：
指令：webpack-dev-serve
另一種啟動方式（既能啟動服務器，又能自動刷新）
指令：webpack-dev-server --hot --inline
配置啟動指令：
在當前項目下的package.json中將
注意的就是在這個服務器下生成的虛擬bunde.js
然后：在窗口輸入npm run dev就可以啟動了，結束配置
注意：此時的配置的bunde.js文件，已經是實體了。
最后：我們在瀏覽器中打開html文件，輸入localhost:8080/文件名稱(注意：8081為nodejs中啟動服務器時給出的地址)
