webpack 學習筆記

學習資源來自前端工程化/webpack.html

課程專題/使用webpack搭建生產環境工作流.html

這兩個教程必須同時看著，互相補充。

(impot和 export是es6新語法，需要用babel轉一下，直接執行不了)

配置webpack.config.js時候，需要引入path模組。

1

例：console.log(path.resolve(__dirname));
2結果： d:\workspace\vue_demo\vue_start\vue_webpack_spa
3 例：console.log(path.resolve(__dirname,"src/index.js"));
4 結果：d:\workspace\vue_demo\vue_start\vue_webpack_spa\src\index.js

npm run build 看看package.json裡build對應的命令是webpack，相當於執行webpack，再看webpack的配置檔案webpack.config.js，裡面對應著輸入輸出，執行命令後，是把src資料夾下的靜態檔案編譯到build目錄下的build.js。

同理 npm run dev  看看package.json裡dev對應的命令是webpack-dev-server

import 和 require其實是一樣的，只是寫法不一樣

1

var react = require('react')//
這句等價於
2 import react from require('react')

這兩句，在功能上完全沒任何區別。

css檔案單獨載入外掛程式配置loaders時，上邊的

,

兩個就不能要了。換成

,

否則報錯。

14.將應用**和第三方**分離。
會生成乙個vendor.js和index.js，先引入vender.js因為它是第三方**比如jquery等，再引入index.js它是從src編譯過來的自己寫的js。

Webpack學習筆記

自我總結 如其名，一些入口處的引導檔案 定義 output 位於物件最頂級鍵 key 包括了一組選項，指示 webpack 如何去輸出 以及在 輸出你的 bundle asset 和其他你所打包或使用 webpack 載入的任何內容 自我總結 這個也沒什麼說的，如其名，定義了最終生成檔案的位址以及其...

webpack學習筆記

babel loader 它是使babel與webpack協同工作的模組 babel core 顧名思義，它是babel編譯器的核心模組 babel preset env 它是babel官方推薦的預置器，可根據使用者設定的目標環境自動新增所需的外掛程式和補丁來編譯es6 babel loader支援...

webpack學習筆記（四）

當前優化 配置本地開發環境 引入webpack dev server 區分開發環境和生產環境 tips node sass可能出現安裝不成功的情況，請使用cnpm並且刪除依賴重試 npm install npm run build 路徑.webpack.dev.config.js const pat...