webpack得介紹

Webpack的介紹

Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader 的轉換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 CMD 模塊、ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

webpack安裝

命令:

npm install webpack -g

Webpack的使用

• 基本演示

命令:

webpack math.js build.js

會把基於模塊開發的math.js引用的外部模塊合併到build.js中。

在index.html頁面上直接引用build.js即可。

• 配置文件

在項目根目錄下新建webpack.config.js 文件。這是 webpack默認的配置文件。將來在命令行運行webpack就會自動執行配置文件中的內容

module.exports = {
     entry: './app.js',   //打包的入口文件
     //設置打包以後的文件存儲的位置
     output: {
         path: './bin',//打包文件存儲的目錄
         filename: 'build.js'   //文件名
     }
 };

webpack默認只能處理後綴 .js文件，想處理其他文件需要loader。

Webpack常用的Loader

1、打包css文件

• 初始化項目
  cnpm init，生成package.js，記錄開發依賴
• 下載style-loader和css-loader

cnpm install css-loader style-loader --save-dev 
//--save-dev 保存開發依賴

• 配置webpack.config.js文件

module.exports = {
     entry: './app.js',
     output: {
         path: './bin',   
         filename: 'build.js'
     },
     module: {
         loaders: [{
             test: /\.css$/,
             exclude: /node_modules/,//排除指定內容
        //css-loader 處理樣式文件中的url()，即加載一個圖片。把圖片當成模塊來處理  
        //style-loader把require(.css)代碼，插入到網頁中style
        //多個loader用!來做分割符
        
             loader: 'style-loader!css-loader'  //執行順序從右向左
         }]
     }
 };

• 執行打包

webpack

2、autoprefixer-loader自動添加css前綴

• 下載
  cnpm install autoprefixer-loader --save-dev

• 配置文件

 loader: 'style-loader!css-loader!autoprefixer-loader'

• 演示

• 添加私有前綴
  a {
  transition: transform 1s;
  }

• 去除過期的自由前綴
  -webkit-border-radius: 5px;
  border-radius: 5px;

打包less

• 下載
  cnpm install less-loader less --save-dev

• 配置文件

 loader: 'style-loader!css-loader!autoprefixer-loader!less-loader'

• 演示(.less文件)
  @color: yellow;

body {
background-color: @color;
}

打包sass

• 下載
  cnpm install sass-loader node-sass --save-dev

• 配置文件

 {
        test: /\.scss$/,   //配置後綴名
        loader: 'style-loader!css-loader!autoprefixer-loader!sass-loader'   //loader執行的順序從右到左
      }

• 演示(.scss)
  $color: red;

body {
background-color: $color;
}

url-loader

能處理任何類型的文件。一般是用來處理圖片和字體

• 下載
  cnpm install url-loader --save-dev

依賴file-loader
cnpm install file-loader --save-dev

• 配置文件

    
//如果不加limit參數設置，圖片默認編譯成base64的字符串(limit 單位 字節)但是如果圖片太大，會造成頁面內容負擔。所以limit能幫我完美解決~
  {
        //設置處理不同類型的文件
        test: /\.(jpg|gif|png|eot|svg|ttf|woff|otf)$/,
        loader: 'url-loader?limit=80000' 
         
        //limit的作用，如果圖片小於80k的文件，圖片會被編譯成base64的字符串，減少一次http請求
        //如果大於80000 不會編譯成base64字符串  並且依賴於file-loader 會把圖片複製到輸出目錄bin  
        
      }

!注意引用的路徑(樣式中引用的圖片路徑出問題)
運行index.html和打包的文件的路徑不一致
如何解決？？？

• 處理圖標字體
  {
  test: /.(png|jpg|eot|svg|ttf|woff|otf)/,
  loader: ‘url-loader?limit=80000’ //可以簡寫’url?limit=20000’ 單位是字節
  }

爲什麼要配置熱加載服務器
1 自動打包
2 開啓web服務器
3 自動在瀏覽器打開頁面—index.html
4 熱加載

實時打包和瀏覽器實時刷新

• 下載安裝webpack-dev-server

cnpm install webpack-dev-server --save-dev
cnpm install webpack-dev-server -g

• 運行

webpack-dev-server --inline --hot --open --port 3000
熱加載：代碼一改，自動刷新

• 配置

在package.json中配置

 "scripts": {
        "dev": "webpack-dev-server --inline --hot --open --port 3000"
     }

配置之後，只需要在命令行中輸入:npm run dev
方便快捷，當每次輸入的命令過長的時候，可以在package.json文件中配置。

• 參數

inline 自動刷新
hot 熱加載(代碼一改，自動刷新)
open 自動在默認瀏覽器中打開
port 指定端口

• 運行

npm run dev

安裝 html-webpack-plugin

在內存中生成打包內容index.html，並且自動打包編譯的文件(app.js中引用的文件)

• 下載html-webpack-plugin

cnpm install html-webpack-plugin --save-dev

• 配置 webpack.config.js

    var htmlWebpackPlugin = require('html-webpack-plugin');

    plugins: [
        new htmlWebpackPlugin({
            title: '頁面標題',  //生成頁面標題
            filename: 'index.html',
            template: 'index1.html'
        })
     ]

ES6轉ES5

• 下載

cnpm install babel-core babel-loader babel-preset-es2015 --save-dev
//包裝能夠轉換.vue文件中的es6語法
cnpm install babel-plugin-transform-runtime --save-dev

• 配置 webpack.config.js

    loader裏面配置
    {
        test: /\.js$/,
        exclude: /node_modules/,           //排除指定內容
        loader: 'babel-loader'
    }

    loader的同一級
    babel: {
        presets: ['es2015'],
        plugins: ['transform-runtime']   //爲了轉換.vue中的es6的語法
     }

常用到的ES6語法

• 導入外部文件，導入css文件

import './statics/css/style.scss';
import './statics/css/font-awesome.css';

• 導入一個js模塊，接受一個對象

import obj from './add.js';

• 模塊中導出對象

//ES6中導出模塊中的對象
export default {
    add: add, 
    sub: sub
}

//簡寫
export default {
    add, sub
}

//更簡潔的語法
export default {
    add(a, b) {
        return (a - 0) + (b - 0);
    },
    sub(a, b) {
        return (a - 0) + (b - 0);
    }
}

//ES6導入模塊中的對象
import obj from './math.js';


//commonjs中的寫法
module.exports = {
    add: add,
    sub: sub
}
//簡寫，屬性名和屬性值的名稱相同
module.exports = {
    add, sub
}

• 模塊中導出方法

//ES6導出方法
export function add() {}
export function sub() {}

//ES6中導入方法
import {add} from './math.js'


//commonjs中的寫法
module.exports = {
    add: function(x, y) {
        return x + y;
    }
}

//導出方法簡寫
module.exports = {
    add(x, y) {
        return x + y;
    }
}