【工具】Webpack

遠程倉庫創建

碼雲建立組織項目

git clone ssh

切換到主分支mmall-fe後git remote add origin ssh

git pull origin master把master分支拉下來

創建git的忽略規則

git checkout -b xx_v1.0表示建立並切換分支

創建一個scr文件夾，裏面創建view、page、service、util、image的文件夾

測試

建立文件

git init

git status

git add .

git commit -am '測試'

git push

webpack和npm安裝使用

$ npm init

$ npm install webpack@1.15.0 --save-dev

$ webpack ./src/page/index/index.js ./dist/app.js

根目錄下建立一個webpack.config.js更改固定內容

webpack對腳本樣式處理

$ npm install css-loader style-loader --save-dev

$ npm install extract-text-webpack-plugin@1.0.1 --save-dev

$ npm install html-webpack-plugin --save-dev

$ npm install html-loader --save-dev

$ npm install url-loader --save-dev

webpack-dev-server的啓用

$npm install webpack-dev-server@1.16.5

$npm install webpack-dev-server -g

執行webpack-dev-server獲得能夠打開的地址

$ webpack-dev-server --inline --port 8088

在package.json中簡化命令

$npm run dev_win

、《Webpack深刻與實戰》

第一章 webpack基本介紹

1.1 webpack基本介紹

1.2 webpack安裝與命令行

第二章 webpack基本配置

2.1 創建項目的webpack配置文件

2.2 webpack配置文件的entry和output new

第三章 生成項目中的HTML頁面文件

3.1 自動化生成項目中的HTML頁面（上）

3.2 自動化生成項目中的HTML頁面（中）

3.3 自動化生成項目中的HTML頁面（下）

第四章 處理項目中的資源文件

4.1 什麼是loader以及它的特性

4.2 使用babel-loader轉換ES6代碼（上）

4.3 使用babel-loader轉換ES6代碼（下）

4.4 處理項目中的CSS

4.5 使用less及sass

4.6 處理模板文件

4.7 處理圖片以及其它文件

第一章 webpack基本介紹

1.1 webpack基本介紹

webpack是前端打包工具

將js、css等文件視爲一個模塊，將外部或者第三方文件也視爲一個模塊，實現按需加載；使瀏覽器可以在最短期打開項目；有一個代碼分割的特性；使用loader處理樣式、圖片、字體等；適合大型項目操做；具備模塊熱更新功能；官網教程齊全。

1.2 webpack安裝與命令行

一、安裝: （1）進入指定目錄 （2）新建文件夾：終端輸入：mkdir webpack-test （3）進入文件夾：終端輸入：cd webpack-test （4）文件夾下初始化npm：終端輸入：npm init 出現package.json （5）全局裝webpack:終端輸入：npm install webpack -g （注：第一次運行webpack項目時，若是沒有這一步，而直接執行下一步的話，會提示錯誤：webpack: command not found） （6）文件夾中裝webpack:終端輸入：npm install webpack --save-dev 出現 (參數-g的含義是表明安裝到全局環境裏面，參數--save-dev的含義是表明把你的安裝包信息寫入package.json文件的devDependencies字段中。) 二、項目操做 （1）用編輯器打開當前目錄：終端輸入：atom ./ （視頻中老師用的編輯器是atom） （2）編輯器中：新建一個目錄，命名爲hello.js （3）webpack打包：終端輸入：webpack hello.js hello.bundle.js（前面是要打包的文件名字，後面是打包後的文件名字） asset下是此次打包生成的文件，chunks此次打包的分塊，chunk Names此次打包的塊名稱。 三、webpack支持的三種模塊化方式：md，commonJs, es6. require(‘.world.js’)的寫法是commonJs的 四、webpack天生不支持css類型的文件，若是要處理這種文件，就要依賴Loader. 五、安裝loader （1）終端項目目錄輸入：npm install css-loader style-loader --save-dev （2）require('style-loader!css-loader!./style.css');表示引用文件以前，要引入loader

六、每一個css文件都要寫sloader的話很麻煩，能夠經過環境配置來避免這些重複的輸入： 終端項目目錄輸入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' （aSuncat: css-loader後面不要加！,mac下是單引號''，windows是雙引號""） 七、每次修改文件，都要從新輸入命令，讓文件自動更新，自動打包，能夠用--watch的參數 終端項目目錄輸入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch 八、打包過程的progress 終端輸入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress 九、引用的模塊 終端項目目錄輸入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules 十、爲何打包模塊的緣由 終端項目目錄輸入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules --display-reasons

第二章 webpack基本配置

2.1 創建項目的webpack配置文件

1、建立代碼源文件目錄：終端輸入：mkdir src. 建立代碼打包過之後的靜態資源目錄：終端輸入：mkdir dist. 2、配置文件 ① 配置文件是默認的文件名（webpack.config.js） 1. 在文件的根目錄下建立webpack.config.js文件 2. 配置參數 var path = require('path'); module.exports = { entry:'./src/script/main.js',//打包的入口 output:{ path: path.resolve(__dirname, 'dist/js'),//打包後的存放路徑 （絕對路徑） filename:'bundle.js'//打包後的文件名 } } 3. 在命令行 中運行：webpack ② 配置文件不是默認的文件名 1. 好比配置文件的文件名爲webpack.dev.config.js 2. 在命令行中運行時：webpack --config webpack.dev.config.js 3、設置webpack參數 1. 在npm腳本文件package.json文件中設置 2. 在scripts中添加："webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"，webpack便可替代後面代碼。

2.2 webpack配置文件的entry和output new

webpack的三種用法 1.直接命令行使用。若是是直接打包就是webpack文件名和打包後的文件名，加上打包緣由等這一類的本身所須要的命令。若是是css打包就再加上css-loader。 2.node.js API的使用方式。 3.webpack —config webpack.config.js 1、entry 一、三種輸入方式 （1）string，輸入字符串 entry:{ main:'./src/script/main.js' }, （2）array, 數組。適用狀況：兩個平行的，不相依賴的文件打包在一塊兒。 entry:{ main:['./src/script/main.js','./src/script/a.js'] }, （3）object, 適用狀況：多頁面應用程序。這裏要和output裏的[name]佔位符配合使用，威力才能最大。若是你要打包成多個js文件，那麼entry對象裏的key叫作chunk就是文件名，裏面的值就是須要打包的文件裏面包含的文件。 entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, 2、output 一、佔位符有3種：[name]、[hash]、[chunkhash] 二、output的filename （1）hash: 此次打包的hash 每次終端運行webpack命令，都會生成一段信息，這段信息的第一行就有一個hash （2）chunkhash:每個chunk本身的hash 三、output的path，//這裏配置的是輸出的文件地址

第三章 生成項目中的HTML頁面文件

3.1 自動化生成項目中的HTML頁面（上）

html中引入script，若是是hash或者chunkhash生成的js，則src每次都要修改，避免修改的方法就是用webpack的插件： 一、安裝webpack插件： 終端項目目錄輸入：npm install html-webpack-plugin --save-dev 二、配置文件中創建對插件的引用 webpack.config.js中 （1）引用插件 var htmlWebpackPlugin=require('htmll-webpack-plugin'); （2）以index.html爲模板 設置plugins:[ new htmlWebpackPlugin()// 初始化插件 ] 這裏的代碼只會讓webpack自動生成一個index.html，裏面自動把js代碼插入到index.html當中。//注意，這裏說的是webpack生成的index.html，不是你自定義的index.html。 要想讓生成的index.html是自定義的，那麼就要設置 plugins:[ new htmlWebpackPlugin({ template: ‘index.html’,//這裏的index.html就是根目錄下的index.html文件，是你本身寫的文件。 filename: ‘index-[hash].html’,//這裏指定的是生成的文件的名字 inject: 'body’,// 這裏能夠指定js文件是放在head仍是body標籤裏面具體還能夠放哪，請看文檔說明。https://github.com/jantimon/html-webpack-plugin#configuration })// 初始化插件 ] （4）webpack使用插件的地址是根據配置裏的context，上下文來決定的。 （5）文件生成在dist下，而不是一直在js下 output:{ path:path.resolve(__dirname,'./dist'), filename:'js/[name]-[chunkhash].js'//js文件生成到js文件夾中 },

3.2 自動化生成項目中的HTML頁面（中）

1、參數中傳參，模板中引用 config中的title設置，而後對index.html中用<%= %>進行取值 <%= %>表示：須要對什麼進行取值 通常引用htmlWebpackPlugin裏的值，好比 2、index.html中遍歷： <!--遍歷：獲得的htmlWebpackPlugin的key是files和options,再分別對這兩個key進行遍歷--> <% for (var key in htmlWebpackPlugin.files){ %> <%= key %>:<%= JSON.stringify(htmlWebpackPlugin.files[key]) %> <% } %> <% for (var key in htmlWebpackPlugin.options){ %> <%= key %>:<%= JSON.stringify(htmlWebpackPlugin.options[key]) %> <% } %> 注：JSON.stringify(htmlWebpackPlugin.files[key])對這一對象的內容字符串化 3、htmlWebpackPlugin.files.chunks[’main’].entry 就能夠拿到chunk main生成的文件名稱。 4、https://www.npmjs.com中搜索html-webpack-plugin能夠看到對插件的詳細解釋 5、path:輸出的時候把全部文件都放到合格目錄下 publicPath:佔位符，須要上線，設置時，若是設置爲http://cdn.com，這樣js的路徑就會替換爲絕對地址以http://cdn.com開頭的路徑，這樣就能知足上線需求了。 6、minify，對上線的html進行壓縮 https://www.npmjs.com，輸入html-webpack-plugin，而後搜索minify，找到html-minify的連接點進去，能看到minify的參數列表。 1.removeComments:true //刪除註釋 2. collapseWhitespace: true//刪除空格

3.3 自動化生成項目中的HTML頁面（下）

1、若是想用不一樣的模版生成不一樣的html文件，只用在plugins裏添加各類htmlWebpackPlugin的實例就行了。 2、頁面中引入inline的script github上，ampedandwired/html-webpack-plugin/examples/inline/template.jade中能夠看到代碼。 3、htmlWebpackPlugin.files.chunks.entry就是chunks輸出的地址 4、main以inline的形式引進，a,b,c之外鏈的形式引進 一、index.html中 （1）在htmlWebpackPlugin的配置中有一個有一個參數chunks能夠配置。 （2）head中 <script type="text/javascript"> <%=compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %></script> 重點：！！！compilation.assets是webpack暴露出來能夠獲取文件數據的方法。經過傳文件名路徑進這個對象，拿到這個文件的索引，經過調用source拿到文件內容。 compilation.assets須要的是不帶publicPath，htmlWebpackPlugin.files.chunks.main.entry帶publicPatch，因此用substr()截取。 （3）body中<%= htmlWebpackPlugin.files.chunks[k].entry %> （4）config.js中inject爲false 5、小結 一、html和動態生成的文件一一對應。 二、htmlWebpackPlugin，如何自定義html，而且經過模板，參數如何傳參。 三、多頁面時，如何經過htmlWebpackPlugin生成多個html 四、深刻探究經過htmlWebpackPlugin，結合模板的方式把生成的js，經過inline引入到html中。

第四章 處理項目中的資源文件

4.1 什麼是loader以及它的特性

1、新建一個組件（component），layer有本身的模版文件和css文件還有js文件。而後用export default導出去能夠給別人調用。這都是es6的寫法。 2、loader能夠生成額外的文件. (外注：Webpack 自己只能處理原生的 JavaScript 模塊，可是 loader 轉換器能夠將各類類型的資源轉換成 JavaScript 模塊。這樣，任何資源均可以成爲 Webpack 能夠處理的模塊。) 3、進入webpack網站的user loaders： 使用loader的三種方式 一、require的路徑前面加loader! 二、直接配置配置文件 loaders test：對資源的正則匹配，若是匹配到Loader，就會對其進行處理。 三、直接使用CLI webpack --module-bind jade --module-bind 'css=style!css',指定了2個loader，先是css loader，而後是style loader

4.2 使用babel-loader轉換ES6代碼（上）

1、babel 一、babel是一個轉換編譯器,它能將ES6轉換成能夠在瀏覽器中運行的代碼 二、安裝babel 終端目標文件夾輸入：npm install --save-dev babel-loader babel-core 三、loader:'babel-loader'能夠正常運行，視頻中的loader:'babel'不能正常運行。 四、babel的loader是一個很是耗時的轉換。改善以前的時間是8260ms。 2、query: ['kwɪərɪ]查詢 · presets:[priː'sets] 3、安裝plugin的latest 終端目標文件輸入：npm install --save-dev babel-preset-latest 4、改善： （1）webpack 的api的configuration loaders的參數5個：test,exclude,include,loader,loaders （2）改善方法：exclude,include參數 例如：exclude:'./node_modules/',//node_modules是已經引用過的，已經打包過的文件，其實這裏對速度沒有影響，這是告訴你若是是不相關的文件，能夠用exclude include:'./src/', 1）會報錯：-configuration.module.loaders[0].exclude: The provided value "./node_modules/" is not an absolute path! 2）報錯的解決方法： exclude:__dirname+'/node_modules/',//已經引用過的，已經打包過的文件 include:__dirname+'/src/', （3）這樣初步改善後時間是1210ms 5、給loader指定參數presets 一、直接Loader後跟問號 require('url-loader?mimetype=images/png!./file.png'); 二、配置文件中跟問號 三、配置文件中用query 四、項目根目錄創建babelrc配置文件，配置文件中一個對象，對象中參數爲presets. 五、config.js中指定babel，babel指定presets.

4.3 使用babel-loader轉換ES6代碼（下）

node中的對象path. var path = require(‘path’); 1、（改善）進一步加快解析速度： 一、path.resolve(__dirname,'app/src') node有個api：path，path有個方法：resolve（解析）。 __dirname：在運行環境下的變量，在當前環境的路徑， 'app/src':相對路徑 解析完了以後能夠獲得一個絕對路徑 二、改善方法： （1）改善的代碼：exclude:path.resolve(__dirname,'/node_modules/'), include:path.resolve(__dirname,'/src/') （2）這樣進一步改善後時間是618ms （3）注意，若是是'node_modules'（視頻中），而不是'/node_modules/'的話，也能運行。可是'/node_modules/'要更快，'/node_modules/')是618ms,而'node_modules'（視頻中）花的時間是1254ms

4.4 處理項目中的CSS

1、安裝style-loader和css-loader 終端目標文件輸入：npm i style-loader css-loader --save-dev 2、webpack能夠將任何資源視爲一個模塊。 3、這裏將css引用進來， 一、app.js:用的是es6的import語法 二、webpack.config.js: module的loaders 4、postcss-loader 對css進行瀏覽器兼容性考慮時，能夠用到這個loader 一、安裝postcss-loader 終端目標文件輸入：npm install postcss-loader --save-dev 二、是一個後處理器。 三、能夠加瀏覽器的前綴 （1）安裝autoprefixer 終端目標文件輸入：npm install autoprefixer --save-dev 四、loader處理方式是從右到左，即從數組的最後一項往前 五、webpack.config.js中， 視頻中的配置如今的postcss已經不支持了，個人配置是 { test: /\.css$/, loaders: [ "style-loader", "css-loader?importLoaders=1", //這裏是爲了把css裏的@import先執行第一個loader { loader: "postcss-loader」, options: { plugins: (loader)=>[ require('autoprefixer')({ broswers:['last 5 versions'] }) ] }, } ], }

4.5 使用less及sass

1、less-loader 一、安裝： 終端目標文件輸入：npm i less-loader --save-dev 錯誤提示：npm WARN less-loader@4.0.3 requires a peer of less@^2.3.1 but none was installed. 說明less沒有裝 二、安裝less 終端目標文件輸入：npm i less --save-dev 2、less-loader 基本配置是 loader: ‘style-lander!css-loader!postcss-loader!less-loader’ 3、sass-loader 一、安裝 終端目標文件輸入：npm i sass-loader --save-dev 出現錯誤提示： npm WARN sass-loader@6.0.3 requires a peer of node-sass@^4.0.0 but none was installed. 說明須要安裝node-sass，解決方法： 終端目標文件輸入：npm i node-sass -g --save-dev

4.6 處理模板文件

1、layer.html是模板文件 一、處理模板文件的作法：（1）webpack將模板文件當作一個字符串進行處理。（2）webpack將模板文件當成已經編譯好的的模板的處理函數。 對js模板語法，模板引擎，模板的做用的認識和了解再來看這章會比較容易理解。 2、要支持html文件，安裝html-loader 終端目標文件輸入：npm install html-loader --save-dev 3、要支持.ejs文件或者是.tpl文件，安裝ejs 終端目標文件輸入：npm install ejs-loader --save-dev layer.js載入ejs模板時，返回的是一個function，這時的import tpl from './layer.tpl';中的tpl表明的再也不是字符串，表示的是一個已經編譯過的函數 4、react——jsx vue——jsx

4.7 處理圖片以及其它文件

1、添加圖片 一、css中的背景圖片。 （1）安裝file-loader 終端目標文件輸入：npm install file-loader --save-dev 二、模板文件layer.tpl直接引用圖片。 （1）絕對路徑：直接寫絕對路徑就行。 （2）相對路徑： <img src="${require('../../assets/bg.jpg')}" 三、最根部的文件index.html引用圖片。 （1）絕對路徑：直接寫絕對路徑就行。 （2）相對路徑：file-loader 2、圖片打包後的輸出地址： 一、 query:{ name:'assets/[name]-[hash:5].[ext]' } 二、安裝url-loader url-loader和file-loader類似，可是url-loader能夠指定limit參數。 （1）終端目標文件輸入：npm install url-loader --save-dev url-loader能夠處理文件或者圖片，當文件/圖片大小大於指定的limit,就會丟給filel-loader去處理，當小於設定的limit，就會轉爲base64編碼，再也不是一個url(再也不是一個http請求)，圖片會被打包進html,css,js （2）兩種圖片引用方式：①經過http請求load進來。瀏覽器會有緩存，比較適用於重複性較高的圖片。②打包成base64。任何地方要用時，都會有base64編碼存在那裏，會形成代碼的冗餘，增長代碼的體積。 3、壓縮圖片 一、安裝image-webpack-loader 終端目標文件輸入：npm install image-webpack-loader --save-dev 二、先壓縮文件再傳給url-loader判斷。