1 、webpack-dev-server基本使用
使用webpack-dev-server 這個工具，來實現自動打包編譯的功能
執行npm i webpack-dev-server -d把工具安裝到專案的安裝依賴
安裝完畢後，這個工具的用法與webpack一樣
由於是本地安裝，所以，無法把它當做指令碼命令，在終端執行。
注意：webpack-dev-server這個工具，如果想要正常執行，要求在本地安裝 webpack。
webpack-dev-server生成的檔案沒有放在實際的物理磁碟。
2、webpack-dev-server 啟動失敗解決方法
在package.json中加入以下**
"devdependencies":
npm i重新安裝
3、退出webpack-dev-serve
ctrl + c。
4、webpack-dev-serve打包生成的bundle.js並沒有放到物理磁碟，而是直接託管到電腦記憶體中。
即根目錄下。
5、啟動webpack-dev-serve的引數引數
含義–open
啟動伺服器自動開啟瀏覽器
–port
指定埠號
–contentbase 目錄名
開啟指定目錄
–hot
熱過載注意：引數前面是兩條槓
6、把html檔案打包到記憶體
當使用該外掛程式後就不需要處理bundle.js的引入路徑了
cnpm i html-webpack-plugin -d安裝外掛程式
const htmlwebpackplugin = require('html-webpack-plugin')匯入外掛程式
指定輸出目錄
new htmlwebpackplugin(）7、處理css檔案
安裝 style-loader 、css-loader 兩個檔案：cnpm i style-loader css-loader -d匹配規則
module:
,//配置處理css檔案的第三方loader
]}
import './css/index.css'（前提是該檔案已存在）
8、處理less檔案
在能夠處理css檔案的基礎上，安裝less,和less-loader兩個檔案：cnpm i less less-loader -d//配置處理.less的第三方loader規則
匯入css檔案：import './css/index.less'（前提是該檔案已存在）
9、處理scss檔案
在能夠處理css檔案的基礎上，安裝sass,和node-sass兩個檔案：cnpm i sass node-sass -d//配置處理.scss的第三方loader規則
匯入css檔案：import './css/index.scss'（前提是該檔案已存在）
要特別注意，scss與sass，不要搞錯了
10、處理檔案
安裝url-loader file-loader，兩個檔案：cnpm i url-loader file-loader -d,//配置處理檔案的第三方loader規則
11、webpack 處理 vue
安裝vue包 cnpm i vue -s
由於在 webpack 中，推薦使用 vue 這個模板檔案定義元件，所以，需要安裝 能解析這種檔案的 loader ，即cnpm i vue-loader vue-template-complier -d在main.js中，匯入vue模組import vue from '../node_modules/vue/dist/vue.js'（完整版）
定義乙個 vue 結尾元件，其中有三部分組成 template，script，style
使用import *** from '***'匯入這個元件
Webpack學習筆記
自我總結 如其名，一些入口處的引導檔案 定義 output 位於物件最頂級鍵 key 包括了一組選項，指示 webpack 如何去輸出 以及在 輸出你的 bundle asset 和其他你所打包或使用 webpack 載入的任何內容 自我總結 這個也沒什麼說的，如其名，定義了最終生成檔案的位址以及其...
webpack 學習筆記
學習資源來自前端工程化 webpack.html 課程專題 使用webpack搭建生產環境工作流.html 這兩個教程必須同時看著，互相補充。impot和 export是es6新語法，需要用babel轉一下，直接執行不了 配置webpack.config.js時候，需要引入path模組。1 例 co...
webpack學習筆記
babel loader 它是使babel與webpack協同工作的模組 babel core 顧名思義，它是babel編譯器的核心模組 babel preset env 它是babel官方推薦的預置器，可根據使用者設定的目標環境自動新增所需的外掛程式和補丁來編譯es6 babel loader支援...