webpack學習筆記

整理學習資料, 就發上來了

 webpack啓程---

  歷史介紹
　　2009年，commonjs規範還未出來，此時前端開發人員編寫的代碼都是非模塊化的，那個時候開發人員常常須要十分留意文件加載順序所帶來的依賴問題, 與此同時 nodejs開啓了js全棧大門，而requirejs在國外也帶動着前端逐步實現模塊化, 同時國內seajs也進行了大力推廣
   
AMD 異步模塊定義 requirejs
CMD common module define seajs和nodejs很是類似

commonjs包含模塊定義，和CMD比較類似

 npm集中包管理的方式備受青睞，12年bower、browserify誕生
 此時爆發大量前端工具 webpack也在其中，其是一款模塊打包工具、systemjs跟angular抱大腿，angular4用了systemjs

 

 webpack優勢

　　1. 模塊來源普遍，支持包括npm/bower等等的各類主流模塊安裝／依賴解決方案
　　2. 模塊規範支持全面，amd/cmd以及shimming等一應具全
　　3. 瀏覽器端足跡小，移動端友好，卻對熱加載乃至熱替換有很好的支持
　　4. 插件機制完善，實現一樣模塊化，容易擴展

 webpack基本操做

　　 `npm i webpack -g `
　　　　 `webpack 原文件 新文件`
　　　　　經過命令行使用。首選找到入口文件是.js
　　　　　也就是你html中引入的js文件
　　　　 `webpack ./main.js ./build.js -p`
　　　　　 -p表明壓縮

　　1. 使用webpack打包解決文件依賴關係
　　　　 webpack 基本命令
　　　　 `webpack ./index.js ./build.js`
　　　　會以index.js做爲入口分析文件依賴關係，合併文件

　　2. 使用webpack配置文件
 　　　　 默認命令結構是 `webpack 入口文件(entry) 出口文件(output)`, 也可使用配置文件來操做, 當咱們`使用webpack命令`的時候, 該命令行工具會自動查找我當前目錄下的webpack.config.js, 文件內部是一整個被Module.exports導出的對象
　　

代碼: 
　　module.exports = {
　　　　entry:{
　　　　　　'main':'./main.js'
　　　　　　　　},
　　　　output:{
　　　　　　filename:'./build.js'
　　　　　　　　}
　　　　}

  關於文件的依賴問題，webpack會自動解析, 默承認以走commonjs模塊規範

3. 引入css問題
  　　因爲涉及到了css和style
　　　　 順序：咱們應該先處理一下css再處理style
　　　　 配置文件中的module屬性
　　　　他是一個對象，能夠有loaders屬性
　　　　 loaders:[是loader]
　　　　 loader的樣子是這樣{ test:/\.css$/,loader:'style-loader!css-loader'}
　　　　 因爲須要引入loader因此先須要下載而且配置
　　　　 npm i css-loader style-loader -D 
　　　　 webpack中你看到s複數，就是數組

 　　操做流程:
 　　　　 構建index.css
　　　　  經過require('./index.css');將其引入進來，告知webpack找到對應的依賴
　　　　　　安裝響應的依賴
　　　　　　 開發依賴凡是打包的 `npm i style-loader css-loader -D`
　　　　　　　在webpack.config.js文件中加入

　　　　代碼: 
　　　　module.exports = {
　　　　　　//設置入口文件
　　　　　　entry:{
　　　　　　　　'main':'./main.js' //默認main就會做爲啓動
　　　　　　},
　　　　　　//設置輸出文件
　　　　　　output:{
　　　　　　　　filename:'./build_new.js'
　　　　　　},
　　　　　　　module:{ //設置相關模塊的聲明
　　　　　　　　loaders:[ //每個元素都是對象
　　　　　　{
　　　　　　　　test:/\.css$/,//設置匹配文件
　　　　　　　　loader:'style-loader!css-loader' //設置依賴的加載器
　　　　　　　　}
　　　　　　]
　　　　　}
　　}
 

 

 sublime terminal配合
　　 preference-> package settings
　　 terminal -> settings default


　　{
　　　　// window下終端路徑
　　　　"terminal": "D:\\cmder\\Cmder.exe", //你的文件解壓路徑
　　　　// window下終端參數
　　　　"parameters": ["/START", "%CWD%"]
　　}

 es6

　　 import 不能再函數中使用，必定頂層中,習慣性都寫在最上方
　　 import和commonjs不同 是import 和export
　　沒有用default 的export 你怎麼導出的，我就得怎麼導入，叫作按需加載，能夠導入部分
　　 沒有默認導出的：
　　導出方: 聲明式` export var num1 = 1; //{num1} export var num2 =2; {num1,num2}`
　　 以上語句最終至關於 `向外暴露了 {num1,num2}`
　　 導入方: 就得和其寫法一致，固然能夠選擇部分 `import {num1,num2} from './cal.js`
　　有默認導出的__能夠在引入的時候沒必要名稱徹底一致__
　　 導出方 : `export default obj;`
　　 導入方：`import 別名 from './cal.js'; `
　　默認導出也還有使用* 號的方式，那麼就表明着被導出的內容全拿

　　 webpack-ES6的處理

　　　　 webpack.config.js文件中
　　　　loaders下加入一個對象
　　　　 test:指定是.js文件後綴的進行處理
　　　　 loader:'babel-loader', //須要下載，依賴babel-core
　　　　 exclude:/node_modules/,排除路徑
　　　　 options: 對象
　　　　 內部: presets:['es2015'],預設解析es6關鍵字
　　　　 plugins:['transform-runtime'], //解析es6的函數
　　　　下載的名稱：
　　　　npm i babel-loader babel-core babel-preset-es2015 babel-plugin-transform-runtime　　
　　　　 須要自動補前綴: autoprefixer-loader

　　 less的使用

　　　　1:安裝對應包
　　　　　　編譯less-loader須要less的支持
　　　　　　 less沒必要寫入到loader中
　　　　　　 安裝 `npm i less less-loader -D`

　　　　 sass的使用
　　　　　　 1:安裝對應包
　　　　　　 加載器是sass-loader
　　　　　　 其依賴的是node-sass
　　　　　　 node-sass沒必要寫入到loader中
　　　　　　 安裝 `npm i sass-loader node-sass`

　　　　3.  處理圖片
　　　　　　 1:安裝對應包
　　　　　　　　加載器是url-loader
　　　　　　　　其依賴的是file-loader
　　　　　　　　 file-loader沒必要寫入到loader中
　　　　　　　　 安裝 `npm i url-loader file-loader`

　　　　4. 處理字體圖片

　　　　　　在url-loader中加入ttf的後綴名來處理
　　　　　　 ?limit=1,若是設置過於小，這個圖片就會生成一個文件，佔用一次請求
　　　　　　 包括字體圖片也是同樣

　　　　5.  base64編碼
　　　　　　 base64編碼郵件形式、將比較小的圖片能夠經過base64的形式放入到css中
　　　　　　 對於圖片自己來說，跟css共同用了一次
　　　　　　 使用的時候，圖片不宜過大，base64編碼會將原來的圖片大小增長三分之一
　　　　　　 由A-Za-Z0-9+/ 組成，以==結尾

　　　　6. 生成html文件插件

　　　　　　 安裝包
　　　　　　　　npm i html-webpack-plugin webpack -D 
　　　　　　　　 html-webpack-plugin 自動生成html文件到dist目錄
　　　　　　 webpack是其依賴

  ES6中的模塊

　　沒有默認導出的部分
　　導出方:` export var xxx = xxx;`　//這個就至關於導出一個{ xxx }
　　 `var xxx= xx; export = { xxx}`
　　以上兩種方式對應的獲取方式是同樣的
　　導入方: import { xxx } from './xxx.js';根據其暴露的空對象中的接口獲取
　　 簡單來講，就是和他們導出的樣子同樣便可
　　 有默認導出的時候
　　 導出方: `export default obj;`
　　 導入方: `import objCal from './xxx.js';`
　　 注意: ES6中規定import不能再函數中，建議要放在代碼上方
　　 比較前面二者的不一樣: 有默認導出，名字你隨意，若是不是默認導出 必定要和導出方暴露接口的形式一致才行

　　 ES6中的代碼變化

　　　 函數聲明

　　　　var obj = {
　　　　　　add:function(n1,n2){
　　　　　　　　return n1 + n2;
　　　　　　　　},
　　　　　　sub(n1,n2){ //ES6
　　　　　　　　return n1 - n2;
　　　　　　　　}
　　　　　　}

 對象聲明

　　　　var name = 123;
　　　　　var obj = {
　　　　　　　　name //這個時候有一個屬性名是name，value是123
　　　　　　　　}

base64 在node中的編碼解碼　　編碼base64:Buffer.from('javascript').toString('base64');　　 解碼成utf8:Buffer.from('amF2YXNjcmlwdA==','base64').toString();