webpack--安裝，使用

1. webpack

1.1. webpack介紹

webpack是一個資源的打包工具，目前最新爲webpack3，能夠將 .js, .css , image等靜態資源當作一個模塊來進行打包，那麼每一種模塊都是有一個對應的 loader來實現

webpack版本官網：https://webpack.js.org/ 項目使用的是 webpack 3.4.0

node環境的安裝

webpack是基於nodejs運行的，因此在安裝webpack以前必須先安裝nodejs環境,

安裝步驟以下   若是用的是淘寶鏡像的話，請用rnpm

　　一、去 https://nodejs.org/en/ 中下載當前操做系統匹配的版本,windows下軟件名稱一般叫作 node.exe

　　二、雙擊node.exe一路安裝好，因爲node.exe已經包含了npm工具，因此npm也能正常使用了

　　三、因爲直接使用 npm install 安裝第三方包是去國外網站上下載，有可能會被牆而安裝失敗，因此咱們要將下載源切換到國內淘寶上所以須要利用 npm install nrm -g安裝一個全局的nrm

　　四、安裝好nrm之後，在cmd命令面板中輸入： nrm use taobao 將下載源切換到淘寶

　　     ，可使用 nrm ls 查看當前使用的下載源

　　五、也可安裝淘寶提供的相似於npm的工具 cnpm來替代npm安裝node包,安裝包命令和npm同樣，安裝cnpm命令： npm install cnpm -g

 

安裝webpack步驟：

 

1 第一種安裝方式：npm使用國外鏡像下載，速度慢 2 在cmd命令行面板中 執行： npm install webpack@3.4.0 -g 將webpack 3 安裝爲全局就可以在cmd命令行面板中使用webpack指令了 4  
5 第二種安裝方式：cnpm 使用淘寶做鏡像下載，速度快 6 在cmd命令行面板中 執行： cnpm install webpack@3.4.0 -g 將webpack 7 安裝爲全局就可以在cmd命令行面板中使用webpack指令了

 

1.1.1. webpack經常使用指令和webpack.config.js配置文件

• webpack經常使用指令

　　　　

1        webpack 入口文件.js 輸出文件.js
2 　　　　webpack // 最基本的啓動webpack的方法，默認查找名稱爲     
3        webpack.config.js文件
4 　　　　webpack --config webpack.config.js // 指定配置文件
5 　　　　webpack -p // 對打包後的文件進行壓縮        

 

• webpack.config.js配置文件的做用

      　　若是隻在cmd命令面板中輸入 webpack指令，後面不跟任何參數的話，則默認查找的是 webpack.config.js文件，在這個文件中能夠配置入口文件，輸出文件以及相關loader和插件等,以加強webpack的功能

• 一個經常使用webpack版本的webpack.config.js文件結構：

　　

// 導入html-webpack-plugin 包，用來根據模板自動生成index.html
var htmlwp = require('html-webpack-plugin');
 
module.exports={
entry:'./src/main.js', // 1.0 定義打包的入口文件路徑
output:{
path:'./dist', //打包之後的文件存放目錄
filename:'build.js' // 打包之後生成的文件名稱
},
module:{
loaders:[ //webpack2及其以上也可使用 rules:[]
{
// 打包 .css文件
test:/\.css$/,
loader:'style-loader!css-loader'
}
]
},
plugins:[
new htmlwp({
title: '首頁', //生成的頁面標題
filename: 'index.html', //webpack-dev-server在內存中生成的文件名稱，自動將build注入到這個頁面底部，才能實現自動刷新功能
template: 'index1.html' //根據index1.html這個模板來生成(這個文件請你本身生成)
})
]
}

 

例子：

 1 module.exports = {
 2     entry:"./main.js",//設置入口文件（目標文件）
 3     output:{
 4         // __dirname ：能夠獲得當前文件的絕對路徑
 5         path: __dirname +"/dist",//輸出文件的路徑(出口)
 6         filename:"build.js"//設置打包好之後的文件名
 7     },
 8     module:{
 9         loaders:[
10             {
11                 //配置打包css文件
12                 test: /\.css$/,// 匹配當前項目中全部以.css結尾的文件,將這些文件交給下面兩個第三方包進行打包
13                 loader:"style-loader!css-loader"// 實現css文件打包
14             },
15             {
16                 // 配置打包sass文件
17                 test: /\.scss$/,// 匹配當前項目中全部以.scss結尾的文件,將這些文件交給下面兩個第三方包進行打包
18                 loader:"style-loader!css-loader!sass-loader"// 實現sass文件打包
19             },
20             {
21                 // 配置打包less文件
22                 test: /\.less$/,// 匹配當前項目中全部以.less結尾的文件,將這些文件交給下面兩個第三方包進行打包
23                 loader:"style-loader!css-loader!less-loader" // 實現less文件打包
24             },
25             {
26                 // 配置打包url()請求的資源
27                 test: /\.(png|jpg|gif)$/,// 未來會將png,jpg,gif後綴的文件進行打包
28                 loader:"url-loader?limit=40000" //依賴整url-loader
29                 // limit用來設置文件的大小
30                 // 2097152 ---> 2M 在圖片大小爲小於2M的時候直接將圖片打包輸出文件中
31                 //                 在圖片大小爲大於2M的時候直接將圖片複製到當前的目錄下                                            
32             }
33         ]
34     }
35 }

 

1.1.2. webpack中loader介紹

loader介紹

webpack自己不支持css,less,sass,js,image等相關資源的打包工做的，它僅僅提供了一個基礎的框架，在這個框架上藉助於相關的loader才能夠實現css,less,sass,js,image等相關資源的打包工做

1.1.3. webpack相關配置

在使用loader以前須要在當前項目目錄下打開cmd命令面板，輸入: npm init 初始化一個 package.json文件來存放相關的 loader包

1.1.3.1. 打包css資源演示

webpack中使用css-loader和style-loader這兩個loader來處理css資源的打包工做，因此使用前必須在項目中先安裝這兩個包:

1 npm i css-loader style-loader --save-dev

 

在webpack.config.js中配置這兩個loader 

在項目中創建一個site.css文件，而且在main.js中導入 

在cmd中執行webpack命令 

1.1.3.2. 打包sass資源演示

webpack中使用sass-loader，css-loader，style-loader來處理.scss文件的打包工做,而sass-loader須要依賴於node-sass因此使用前必須在項目中先安裝這些包，

而且node-sass的某些文件下載是須要去google上的，爲了防止被牆而致使安裝失敗，因此建議使用cnpm來安裝：

1 cnpm install node-sass sass-loader css-loader style-loader --save-dev

 

在webpack.config.js中配置這兩個loader 

在項目中創建一個site1.scss文件，而且在main.js中導入 

在cmd中執行webpack命令

在項目根目錄下打開cmd命令面板，輸入：webpack 回車便可打包完成

此時檢查build.js文件的內容，sass語法是變成了css語法表示打包成功

1.1.3.3. 打包less資源演示

須要安裝的node包有：

css-loader： 編譯css

style-loader：編譯css

less-loader： 編譯less

less: less-loader的依賴包

 

在項目根目錄下打開cmd命令面板，輸入：

npm install less less-loader style-loader css-loader --save-dev 回車便可完成安裝

• 在webpack.config.js中配置這兩個loader

• 在項目中創建一個site1.scss文件，而且在main.js中導入

• 在cmd中執行webpack命令

在項目根目錄下打開cmd命令面板，輸入：webpack 回車便可打包完成

此時檢查build.js文件的內容，less語法是變成了css語法表示打包成功

1.1.3.4. 打包url()請求的資源

須要安裝的node包有：

url-loader：打包經過url()方式的請求資源

file-loader: url-loader的依賴loader

 

在項目根目錄下打開cmd命令面板，輸入：

npm install url-loader file-loader --save-dev 回車便可完成安裝

• 在webpack.config.js中配置這兩個loader

• 在site.css文件導入一個圖片

• 在cmd中執行webpack命令

在項目根目錄下打開cmd命令面板，輸入：webpack 回車便可打包完成

檢查是否成功分兩種狀況：

一、若是打包的圖片大小大於配置文件中 url-loader?limit= 中的limit值的話，則會在目錄下看到一張單獨的一個圖片

二、若是打包的圖片大小小於等於配置文件中 url-loader?limit= 中的limit值的話，則會將圖片以base64格式存儲在build.js中

 

請按照上述兩種狀況去驗證是否打包成功

1.1.3.5. ECMAScript6語法轉ECMAScript5語法

webpack2+已經可以不須要依賴於babel-loader 便可完成ES6語法的轉換，可是若是使用的是webpack1則還須要安裝相關包：

babel-core

babel-loader

babel-preset-es2015

babel-plugin-transform-runtime：這個包主要是使用webpack1.0打包.vue組件頁面中的es6語法須要,webpack2+中不須要

 

在項目根目錄下打開cmd命令面板，輸入：

npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev 回車便可完成安裝

• 在webpack.config.js中配置loader

• 在main.js中使用es6語法導入site.css

1 import '../statics/css/site.css'

 

• 在cmd中執行webpack命令

在項目根目錄下打開cmd命令面板，輸入：webpack 回車便可打包完成

檢查build.js文件中，若是出現了相似於 require('../statics/css/site.css');

可是看不到import '../statics/css/site.css' 表示轉換成功

1.1.3.6. 利用webpack-dev-server實現熱刷新配置

咱們在修改了代碼之後須要不斷的從新執行webpack命令從新打包而後回到瀏覽器刷新頁面去查看，這種開發效率很低下，

因此這裏使用webpack-dev-server當代碼更新的時候自動從新打包和刷新瀏覽器。

 

須要安裝的node包有：

webpack@3.4.0 : webpack-dev-server依賴於webpack

webpack-dev-server@2.6.1 ： webpack開發服務器

html-webpack-plugin@2.28.0 ：結合webpack在內存中自動生成index.html的入口文件

 

 

在項目根目錄下打開cmd命令面板，輸入：

npm install webpack@3.4.0 webpack-dev-server@2.6.1 html-webpack-plugin@2.28.0 --save-dev 回車便可完成安裝

 

須要注意的是：package.json中的name屬性不能是webpack，不然在執行 npm i webpack --save-dev的時候會報錯：

Refusing to install webpack as a dependency of itself

• 在package.json文件中配置webpack-dev-server命令

1 "scripts": {
2 　　"dev":"webpack-dev-server --inline --hot --open --port 5008"
3 }

參數說明：

--inline :自動刷新

--hot :熱加載

--port 指定監聽端口爲 5008

-- open : 自動在默認瀏覽器中打開

-- host： 能夠指定服務器的ip，不指定默認爲127.0.0.1(localhost)

• 配置html-webpack-plugin組件

webpack-dev-server要實現瀏覽器自動刷新，必需要利用html-webpack-plugin在內存中生成index.html頁面才能實現

html-webpack-plugin 配置步驟：

一、在webpack.config.js中加入以下代碼：

1 // 導入html-webpack-plugin 包,獲取到插件對象
2 var htmlwp = require('html-webpack-plugin');

 

1  
2 plugins:[
3 new htmlwp({
4 title: '首頁', //生成的頁面標題，須要在模板index1.html中的title中使用：<%= htmlWebpackPlugin.options.title %>
5 filename: 'index.html', //webpack-dev-server在內存中生成的文件名稱，自動將build注入到這個頁面底部，才能實現自動刷新功能
6 template: 'index1.html' //根據index1.html這個模板來生成(這個文件請程序員本身生成)
7 })
8 ]

 

 

• index1.html 模板頁面代碼

　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title><%= htmlWebpackPlugin.options.title %></title>
 6 <meta name="viewport"
 7 content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
 8 </head>
 9 <body>
10     <div id="app">
11     </div>
12 </body>
13 </html>

 

• 運行

在cmd中執行 npm run dev 命令開啓 webpack-dev-server服務器來運行vue項目

這時候能夠隨便修改一個css樣式，就會自動刷新看到效果

1.1.3.7. 利用webpack解析和打包 .vue組件頁面

Vue項目中的每一個頁面其實都是一個.vue的文件，這種文件，Vue稱之爲組件頁面，必須藉助於 webpack的vue-loader才能使用

因此必須安裝相關包：

vue : vuejs核心包

vue-loader ： .vue文件編譯loader

vue-template-compiler ： .vue模板編譯,被vue-loader所依賴

babel-plugin-transform-runtime : es6實時轉換成es5語法

 

一、在項目根目錄下打開cmd命令面板，輸入：

npm install vue-loader@11.3.4 vue-template-compiler@2.2.6 babel-plugin-transform-runtime@6.23.0 --save-dev 回車便可完成安裝

npm install vue@2.2.6 --save 回車便可完成安裝

 

注意：babel-plugin-transform-runtime 這個包主要是爲了兼容webpack1.x中使用，webpack2+中能夠不用

爲了兼容webpack1.x，2.x,3.x 拷貝上面的安裝命令所有安裝便可

 

二、在項目根目錄下新建 .babelrc文件，內容填寫以下：

1 {
2 　　presets: ['es2015'],
3 　　plugins: ['transform-runtime'] //這句代碼就是爲了解決webpack1.x中打包.vue文件不報錯，在webpack2+中正常
4 }
5  

 

 

三、在webpack.config.js中的loaders中增長

1 {
2     // 打包.vue文件
3     test:/\.vue$/, //表示當前要打包的文件的後綴正則表達式
4     loader:'vue-loader' //
5 }

 

• .vue組件頁面的寫法結構

一、<template><div class="tmpl"></div>因爲是 vue2.0 因此這個裏面必定要放一個根元素，能夠放vue的指令 v-</template>

 

二、<script> export default{data:{}} -> new Vue({data:{}}) 就是導出一個 Vue的實例 </script>

 

三、<style></style> 中的樣式是全局的

<style scoped></style> 中的樣式是當前組件的

• 將.vue中的內容解析編譯而且展現在瀏覽器中

一、npm install vue --save

二、在main.js中編寫解析.vue的代碼

// 1.0 導入vue這個包

import Vue from 'vue';

// 2.0 導入 App.vue文件

import App from './App.vue';

// 3.0 將App中的內容編譯解析出來替換index.html中的<div id="app"></div>

new Vue({
el:'#app',
// render:function(create){create(App);} es5語法
render:create=>create(App) //es6語法
});

 

 

1.2. 項目中使用的ECMAScript6語法總結

一、對象的寫法

es5中對象： {add:add,substrict:substrict}

es6中對象： {add,substrict} 注意這種寫法的屬性名稱和值變量是同一個名稱才能夠簡寫，不然要想es5那樣的寫法,例如： {addFun:add}

 

二、在對象中的方法的寫法

es5中對象： {add:function(){},substrict:function(){}}

es6中對象： {add(){},substrict(){}}

 

三、對象的導出寫法

es5兩種形式：

一、module.exports = fucntion (){};

二、exprots.add = fucntion (){};

 

es6中寫法：

一、export default{

add(){}

}

二、export fucntion add(){} 至關於 將add方法當作一個屬性掛在到exports對象

 

 

四、對象的導入

es5: var add = require('./calc.js');

es6:

若是導出的是：export default{ add(){}}

那麼能夠經過 import obj from './calc.js'

 

若是導出的是：

export fucntion add(){}

export fucntion substrict(){}

export const PI=3.14

 

那麼能夠經過按需加載 import {add,substrict,PI} from './calc.js'

 

五、es6中的箭頭函數的寫法

箭頭的演變過程：

//需求：利用函數實現倒序排列

[2,1,3].sort(function(x,y){return y - x;});

 

//用箭頭函數實現 =>讀 goes to

[2,1,3].sort((x,y)=>{return y - x;});

[2,1,3].sort((x,y)=> {x++;y++; y - x;});

[2,1,3].forEach(x=> {console.log(x)});

1.3. 將項目源碼利用git.oschina.net託管

碼雲（ http://git.oschina.net/）是一個相似於github的中國的源碼託管網站，能夠本身建立倉庫之後，使用git進行源碼的管理

使用步驟以下：

• 一、 去 https://git.oschina.net/signup 頁面註冊一個帳號，若是有則登陸
• 二、 建立倉庫和提交源碼

1.4. Vue 官方命令行工具快速搭建大型單頁應用

我們前面從0到1帶領你們一步步搭建了屬於本身的WebPack+Vue項目，但其實Vue官方提供了一個快速搭建大型單頁應用的工具Vue-cli

該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需幾分鐘便可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目

• Vue-cli使用步驟一、在cmd命令面板中執行：npm install --global vue-cli 全局安裝 vue-cli二、利用：vue init webpack projectName(自定義項目名稱) 建立一個基於webpack模板的新項目三、進入到項目名稱文件夾中執行 npm install 安裝項目所需依賴四、運行 npm run dev 運行項目