Webpack 是一個前端資源加載/打包工具。它將根據(jù)模塊的依賴關系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應的靜態(tài)資源。

在代碼實踐之前，先說一寫webpack的基礎知識。

1、為什要使用WebPack

現(xiàn)今的很多網(wǎng)頁其實可以看做是功能豐富的應用，它們擁有著復雜的JavaScript代碼和一大堆依賴包。為了簡化開發(fā)的復雜度，前端社區(qū)涌現(xiàn)出了很多好的實踐方法

1. 模塊化，讓我們可以把復雜的程序細化為小的文件;
2. 類似于TypeScript這種在JavaScript基礎上拓展的開發(fā)語言：使我們能夠?qū)崿F(xiàn)目前版本的JavaScript不能直接使用的特性，并且之后還能能裝換為JavaScript文件使瀏覽器可以識別；
3. Scss，less等CSS預處理器
4. …

2、什么是Webpack

WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。

3、WebPack和Grunt以及Gulp相比有什么特性

其實Webpack和另外兩個并沒有太多的可比性，Gulp/Grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優(yōu)點使得Webpack可以替代Gulp/Grunt類的工具。

Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，這個工具之后可以自動替你完成這些任務。

這些改進確實大大的提高了我們的開發(fā)效率，但是利用它們開發(fā)的文件往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常反鎖的，這就為WebPack類的工具的出現(xiàn)提供了需求。

Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個瀏覽器可識別的JavaScript文件。

從圖中我們可以看出，Webpack 可以將多種靜態(tài)資源 js、css、less 轉(zhuǎn)換成一個靜態(tài)文件，減少了頁面的請求。

如果實在要把二者進行比較，Webpack的處理速度更快更直接，能打包更多不同類型的文件。

接下來我們簡單為大家介紹
Webpack如何將多個js文件合并（注意這里只是文件的合并，即將多個寫好的js合成一個js文件，以減少http請求）。

安裝webpack

在安裝 Webpack 前，你本地環(huán)境需要支持 node.js。安裝node.js可以參考node官方文檔。

使用如下命令在全局安裝webpack。

$ npm install webpack -g

webpack已經(jīng)安裝到計算機上，現(xiàn)在可以使用webpack命令了。

在項目中使用webpack

使用以下命令在項目根目錄下生成package.json文件。

$ npm init

安裝webpack到項目中

將webpack加入到pageage.json配制文件中，使用以下命令：

$ npm install --save-dev webpack

此時再看package.json文件，對比package.json剛剛創(chuàng)建時，新增加了一段代碼。

webpack打包的兩種方式

1. webpack entry<entry> output （命令行）
2. webpack -config webpack.conf.js (指定webpack的配置文件)

使用命令行打包js

一：創(chuàng)建兩個js文件

創(chuàng)建app.js, sum.js，sum.js導出一個加法的函數(shù)，app.js使用這個函數(shù)。

// app.js

import {sum} from './sum';
console.log('sum(21, 22)', sum(21, 22));

// sum.js
export function sum(a, b) {
  return a + b;
}

二：使用webpack命令打包

在當前目錄下使用： webpack app.js bundle.js ; 這里入口是app.js, 輸出文件是bundle.js，這樣就會看到文件中多出一個bundle.js文件。

創(chuàng)建一個html文件運行，引入bundle.js運行，控制臺會打?。簊um(21, 22) 43 。

使用webapck的配置文件打包（還是上面的兩個js文件）

創(chuàng)建一個webpack.conf.js，編寫wepack的配置文件

// 配置文件使用commonjs規(guī)范

module.exports = {

  // 入口，是一個對象
  entry: {
    app: './app.js'
  },

  // 輸出
  output: {
    // 帶五位hash值的js
    filename: '[name].[hash:5].js'
  }
}

1. 在命令行輸入：webpack --config webpack.conf.js，發(fā)現(xiàn)生成了一個app.dd1c6.js帶hash的js文件。將這個js文件引入HTML里面發(fā)正常輸出：sum(21, 22) 43
2. 配置文件的命名為webpack.config.js，則直接在命令行輸入webpack就可以。

webapck配合babel打包ES6、7

在項目根目錄安裝bable-loader和babel-core，babel-preset

1. 使用npm init生成一個配置文件
2. npm install babel-loader babel-core --save-dev
3. 新建app.js，index.html，webpack.config.js等文件
4. 編寫webpack.config.js
5. 安裝babel-preset來指定編譯的版本：npm install babel-preset-env --save-dev
6. 在app.js里面隨便寫一些ES6的語法
7. 使用命令行輸入webpack進行編譯

webpack配置文件

// 配置文件使用commonjs規(guī)范
module.exports = {

  // 入口，是一個對象
  entry: {
    app: './app.js' // 相對路徑
  },

  // 輸出
  output: {
    // 帶五位hash值的js
    filename: '[name].[hash:8].js'
  },

  // 指定loader
  module: {

    // rules中的每一項是一個規(guī)則
    rules:[
      {
        test: /\.js$/, // 值一個正則，符合這些正則的資源會用一個loade來處理
        use: {
          loader: 'babel-loader', // 使用bable-loader來處理
          options: { // 指定參數(shù)
            presets: [
              ['babel-preset-env', {
                targets: {
                  browsers: ['> 1%', 'last 2 version'] //具體可以去babel-preset里面查看
                } 
              }]
              
            ] // 指定哪些語法編譯
          }
        },
        exclude: '/node_module/' // 排除在外
      }
    ]
  }
}

app.js和編譯之后帶hash的js

// app.js
let func = () => {};
const num = 30;
let arr = [3, 4, 5, 6];

let newArr = arr.map(item => item * 2); // 將以前數(shù)組每一項*2

console.log(newArr);

// ==================//
// 編譯之后（直接截取了編譯的代碼）
"use strict";


var func = function func() {};
var num = 30;
var arr = [3, 4, 5, 6];

var newArr = arr.map(function (item) {
 return item * 2;
}); // 將以前數(shù)組每一項*2

console.log(newArr);

babel的兩個插件：Babel Polyfill 和 Babel Runtime Transform

用來處理一些函數(shù)和方法（Genertor,Set,Map,Array.from等未被babel處理，需要上面的兩個插件）

1. Babel Polyfill（全局墊片），npm install babel-polyfill --save, 使用：import "babel-polyfill";
2. Babel Runtime Transform（為開發(fā)框架準備），npm install babel-plugin-transform-runtime --save, npm install babel-runtime --save
3. 新建一個.babelrc來進行配置

app.js里面新增代碼

import "babel-polyfill";
let func = () => {};
const num = 30; 
let arr = [3, 4, 5, 6];
let newArr = arr.map(item => item * 2); // 將以前數(shù)組每一項*2

console.log(newArr);
// 需要babel-polyfill
arr.includes(8);

// Genertor 函數(shù)
function* func2() {
}

webpack配置

// 配置文件使用commonjs規(guī)范
module.exports = {
  // 入口，是一個對象
  entry: {
    app: './app.js' // 相對路徑
  },

  // 輸出
  output: {
    // 帶五位hash值的js
    filename: '[name].[hash:8].js'
  },

  // 指定loader
  module: {

    // rules中的每一項是一個規(guī)則
    rules:[
      {
        test: /\.js$/, // 值一個正則，符合這些正則的資源會用一個loade來處理
        use: {
          loader: 'babel-loader', // 使用bable-loader來處理
          options: { // 指定參數(shù)
            
          }
        },
        exclude: '/node_module/' // 排除在外
      }
    ]
  }
}

.babelrc文件配置

{
  "presets": [
    ["babel-preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 version"]
      } 
    }] 
  ],
  "plugins": ["transform-runtime"]
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論