深入淺出Webpack

commonjs

require 同步載入依賴

module.exports

node.js

需通過工具轉為es5

amdasynchronous_module_definition

非同步載入模組

es6模組化

import xx , from 「」;

export default {};

export ()=>{}

樣式檔案

@import 「xx」

簡化dom操作

react

render

vue

es6bable

tsflow

scss

將原始碼轉化為可執行的 js,html,css

壓縮**分割，首屏不需要的非同步載入

模組合併

發布shell指令碼

基於strom流的自動化構建工具

管理，執行檔案，監聽，讀寫檔案

.task 註冊乙個任務

.run 執行任務

.watch 監聽檔案變化

.src 讀檔案

.dest 寫檔案

通過webpack可執行檔案啟動構建任務

npm init

yeoman 快速生成

npm i -d webpack

@beta 體驗版

深入淺出webpack

配置含義 配置 含義entry 配置模組的入口 output 配置如何輸出最終想要的 module 配置處理模組的規則 resolve 配置尋找模組的規則 plugins 配置擴充套件外掛程式 devserver 配置 devserver 型別例子 含義string 入口模組的檔案路徑，可以是相對路...

深入淺出webpack學習 6 Plugin

plugin用於擴充套件webpack功能，各種各樣的plugin幾乎讓webpack可以 做任何構建相關的事情。配置plugin plugin的配置很簡單，plugins配置項接受乙個陣列，陣列裡每一項都是乙個要使用的plugin的例項，plugin需要的引數通過建構函式傳入。const comm...

深入淺出webpack學習 2 Entry

現在介紹一下webpack配置中的entry entry是配置模組的入口，可以抽象成輸入，webpack執行構建的第一步將從入口開始搜尋及遞迴解析出所有入口依賴的模組。注意 entry是必填，若不填寫則將導致webpack報錯退出 webpack在尋找相對路徑的檔案時會以context為根目錄，co...