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

在代碼實(shí)踐之前，先說(shuō)一寫(xiě)webpack的基礎(chǔ)知識(shí)。

1、為什要使用WebPack

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

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

2、什么是Webpack

WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。

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

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

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

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

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

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

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

接下來(lái)我們簡(jiǎn)單為大家介紹
Webpack如何將多個(gè)js文件合并（注意這里只是文件的合并，即將多個(gè)寫(xiě)好的js合成一個(gè)js文件，以減少http請(qǐng)求）。

安裝webpack

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

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

$ npm install webpack -g

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

在項(xiàng)目中使用webpack

使用以下命令在項(xiàng)目根目錄下生成package.json文件。

$ npm init

安裝webpack到項(xiàng)目中

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

$ npm install --save-dev webpack

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

webpack打包的兩種方式

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

使用命令行打包js

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

創(chuàng)建app.js, sum.js，sum.js導(dǎo)出一個(gè)加法的函數(shù)，app.js使用這個(gè)函數(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命令打包

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

創(chuàng)建一個(gè)html文件運(yùn)行，引入bundle.js運(yùn)行，控制臺(tái)會(huì)打印：sum(21, 22) 43 。

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

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

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

module.exports = {

  // 入口，是一個(gè)對(duì)象
  entry: {
    app: './app.js'
  },

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

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

webapck配合babel打包ES6、7

在項(xiàng)目根目錄安裝bable-loader和babel-core，babel-preset

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

webpack配置文件

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

  // 入口，是一個(gè)對(duì)象
  entry: {
    app: './app.js' // 相對(duì)路徑
  },

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

  // 指定loader
  module: {

    // rules中的每一項(xiàng)是一個(gè)規(guī)則
    rules:[
      {
        test: /\.js$/, // 值一個(gè)正則，符合這些正則的資源會(huì)用一個(gè)loade來(lái)處理
        use: {
          loader: 'babel-loader', // 使用bable-loader來(lái)處理
          options: { // 指定參數(shù)
            presets: [
              ['babel-preset-env', {
                targets: {
                  browsers: ['> 1%', 'last 2 version'] //具體可以去babel-preset里面查看
                } 
              }]
              
            ] // 指定哪些語(yǔ)法編譯
          }
        },
        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ù)組每一項(xiàng)*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ù)組每一項(xiàng)*2

console.log(newArr);

babel的兩個(gè)插件：Babel Polyfill 和 Babel Runtime Transform

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

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

app.js里面新增代碼

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

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

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

webpack配置

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

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

  // 指定loader
  module: {

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

.babelrc文件配置

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論