webpack的基礎入門

時間 2019-11-08

標籤 webpack 基礎入門简体版

原文原文鏈接

webpack的基礎入門

這裏對於 webpack 的基礎入門進行一些總結，能夠參考 github 上的 webpack-demo ，連接是 https://github.com/RealAndMe/webpack-demojavascript

1. 簡介

webpack是前端資源加載/打包工具。它將根據模塊的依賴關係將一些靜態資源 js , less , css 等進行靜態分析，而後轉化爲靜態文件，減小頁面請求，實現頁面的優化。css

2. 如何使用webpack

在安裝webpack以前，你的本地環境必需要有 node.js 。能夠參考以前的博客《npm使用指南》和《node.js的安裝配置——前端配置》。html

全局安裝webpack和webpack-dev-server

//全局安裝webpack 和 webpack-dev-server
$ npm install webpack -g
$ npm install webpack-dev-server -g

webpack 是用來讀取配置文件 webpack.config.js ，並構建捆綁包的。前端

webpack-dev-server 是用來啓動服務器的，綁定 localhost:8080，當更新入口文件時，瀏覽器會自動刷新。java

`git clone` 克隆github上的代碼，並安裝依賴項

//克隆代碼
$ git clone git@github.com:RealAndMe/webpack-demo.git
//目錄下有一個webpack-demo文件夾，切換工做目錄到webpack-demo
$ cd webpack-demo
//安裝項目運行所依賴的模塊
$ npm install

在對應的demo文件夾下面運行源文件

//切換目錄，好比demo01
$ cd demo01
//啓動服務器
$ webpack-dev-server

啓動服務器後，瀏覽器輸入 localhost:8080 就能看到 demo01 的頁面內容了。node

//webpack打包構建
$ webpack

命令執行以後，會看到 demo01 目錄下，生成一個 bundle.js 文檔。react

下面根據 github 上的 demo 來進行講解。webpack

demo01: 入口文件（entry file）

查看demo01git

main.js 是入口文件，webpack 讀取和分析入口文件以及項目的依賴項，而後構建成捆綁文件boundle.js 輸出。github

index.html HTML文檔， main.js 入口的js文件， webpack.config.js 是 webpack 的配置文件。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo01</title>
<link rel="stylesheet" href="">
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

mian.js

document.write("<h1>hello world!</h1>");

webpack.config.js

module.exports = {
    entry: "./main.js",
    output: {
        filename: "bundle.js"
    }
};

代碼寫好後，在 demo01 目錄下，執行命令：

//啓動服務器，實現更新入口文件時瀏覽器自動刷新
$ webpack-dev-server

當 mian.js 文件更新時，執行上面命令行，瀏覽器自動刷新。瀏覽器的訪問網址：localhost:8080

執行構建命令：

//運行構建
$ webpack

執行完後，會生成一個boundle.js 。

demo02: 多個入口文件

查看demo02

容許有多個入口文件。entry 能夠有多個值。執行上述命令，啓動服務器瀏覽內容。執行構建命令，打包入口文件。多個入口文件輸出文件也對對應有幾個。

webpack.config.js

module.exports = {
    entry: {
        bundle1: './main1.js',
        bundle2: './main2.js'
    },
    output: {
        filename: '[name].js'
    }
};

執行構建命令後，會生成兩個文檔，分別是bundle1.js 和bundle2.js

demo03: babel-loader

查看demo03

babel-loader 能夠將 JSX 和 ES6 轉換爲 JS 文件。

須要的插件依賴有 babel-loader ，babel-core ，babel-preset-es2015 ，babel-preset-react ，react-dom ，react ，這些必須在 package.json 文檔中配置好，能夠經過命令 $ npm install express -save-dev 安裝，其中 express 是須要安裝的依賴名稱。

webpack.config.js

module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react',
      },
    ]
  }
};

代碼寫好後，在 demo03 目錄下執行命令：

$ webpack-dev-server  //啓動服務器，localhost:8080打開
$ webpack //編譯構建

exclude:/node_modules/ 用來排除 npm 包，提升編譯速度。

loaders 字段分配加載器， test 用正則表達式匹配不一樣後綴的文件，而後 loader 定義不一樣的加載器，

注意：問號？ 是經過字符串傳遞查詢參數的，查詢字符串格式取決與加載的程序。也能夠用另一種方式來寫查詢參數。

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'react']
      }
    }
  ]
}

demo04: css-loader

查看demo04

webpack 容許 js 中請求 CSS 代碼。

須要的插件依賴有 style-loader , css-loader

配置信息中須要兩個加載器，style-loader 將 style 插入到 index.html 頁面中。 css-loader 讀取 CSS 文件。

注意：loader: "style-loader!css-loader" 兩個加載器之間用感嘆號 ！ 鏈接，二者順序不要更換！

main.js

require("./app.css");

webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.css$/,
      loader: 'style-loader!css-loader',
      exclude: /node_modules/
    }, ]
  }
};

代碼寫好後，啓動服務器，打開控制檯，能夠看到 index.html 有內聯的樣式表。

demo05: url-loader

查看demo05

webpack 容許 js 中請求圖片。

須要的插件依賴有 file-loader , url-loader 。

url-loader 轉換圖像文件。後面加了查詢參數若是圖像尺寸小於8192字節，則將其轉換爲數據URL; 不然，它將被轉換成普通的URL。

main.js

//建立新的元素
var img1 = document.createElement("img");
img1.src = require("./small.png");
//添加
document.body.appendChild(img1);

//建立新的元素
var img2 = document.createElement("img");
img2.src = require("./big.png");
//添加
document.body.appendChild(img2);

webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
  }
};

注意：問號（？）用於將參數傳遞給裝載機。

啓動服務器後，打開控制檯，small.png 和 big.png 將具備如下URL。

//small.png
<img src="data:image/png;base64,iVBOR...uQmCC">
//big.png
<img src="4853ca667a2b8b8844eb2693ac1b2578.png">

demo06: CSS Module

查看demo06

css-loader?modules 能夠啓動 CSS 模塊的規範。

在默認狀況下，模塊的 CSS 是局部做用域範圍的 CSS ，能夠用 :global() 來關閉局部域的做用。

app.css

.h1 {
     color:red;
    }
    
:global(.h2) {
  color: blue;
}

index.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1 class="h1">Hello World</h1>
    <h2 class="h2">Hello Webpack</h2>
    <div id="contain"></div>
    <script src="bundle.js" type="text/javascript"></script>
</body>
</html>

main.jsx

var React = require('react');
var ReactDOM = require('react-dom');
var style = require('./app.css');

ReactDOM.render(
  <div>
    <h1 className={style.h1}>Hello World</h1>
    <h2 className="h2">Hello Webpack</h2>
  </div>,
  document.getElementById('contain')
);

啓動服務器，打開瀏覽器，能夠看到只有第二個h1是紅色的，由於它的CSS是局部範圍的，而且h2都是藍色的，由於它的CSS是全局範圍的。

demo07: UglifyJs Plugin

查看demo07

webpack 有許多擴展功能的插件，好比 uglifyjs plugin 是壓縮輸出的 boundle.js 的 JS 代碼。

webpack.config.js 用到的字段 plugins 用來放插件的。

webpack.config.js

var webpack = require('webpack');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new uglifyJsPlugin({})
  ]
}

啓動服務器，能夠看到瀏覽器頁面沒有多大的變化。

執行構建命令 $ webpack 能夠看到 boundle.js 被壓縮成一行，省去了全部的註釋，而且將 main.js 細化以下：

var t="Hello";t+=" World",document.write("<h1>"+t+"</h1>")

demo08: 加載第三方插件

查看demo08

不是內置的插件，能夠經過 npm install 安裝，webpack 容許加載第三方插件。

webpack.config.js

//建立html文檔
var htmlWepbackPlugin = require("html-webpack-plugin");
//自動打開瀏覽器
var openBrowserPlugin = require("open-browser-webpack-plugin");
module.exports = {
    entry: "./main.js",
    output: {
        filename: "boundle.js"
    },
    plugins: [
        new htmlWepbackPlugin(
            {
                title: "demo08",
                filename: "index.html"
            }
        ),
        new openBrowserPlugin(
            {
                url: "http://localhost:8080"
            }
        )
    ]
}

html-webpack-plugin 是建立一個 index.html 文檔。

須要的依賴是：html-webpack-plugin

npm 安裝插件，命令：

//建立.html文檔
$ npm install html-webpack-plugin -save-dev
//自動打開瀏覽器
 $ npm install open-browser-webpack-plugin -save-dev

手動啓動服務器，瀏覽器能夠看到效果。

構建打包命令：$ webpack ，能夠看到 demo 08 目錄下生成了一個 index.html 和 bundle.js

open-browser-webpack-plugin 是在啓動服務器命令webpack-dev-server時，會自動打開一個瀏覽器標籤。

須要的依賴是：open-browser-webpack-plugin

有了這兩個插件，就不用手寫 index.html ，也不用手動打開瀏覽器了。

demo09: 代碼分割

查看demo09

webpack 容許將代碼分割成不少塊，提升代碼的複用。

webpack.config.js

//CommonJS的： require.ensure進行代碼分割
require.ensure(['./a'], function(require) {　　//require做爲參數發送給該函數
  var content = require('./a');　　//函數體進一步調用require執行所須要的模塊。
  document.open();
  document.write('<h1>' + content + '</h1>');
  document.close();
});

使用 CommonJS 模塊語法的 require.ensure 來定義分割點。

require.ensure(dependencies, callback)

dependencies ：字符串，聲明 callback 要執行的代碼所須要的全部模塊。
callback 函數功能。將 require 做爲參數發送給此函數，函數體可使用它來進一步require()執行須要的模塊。

執行命令$ webpack ，構建打包，會生成兩個文檔，bundle.js 和 0.bundle.js 。HTML文檔根據須要，從bundle.js中加載0.bundle.js。

demo10: bundle-loader

查看demo10

代碼分割，用 bundle-loader ，與 demo09 類似。

webpack.config.js

var load = require('bundle-loader!./a.js');
load(function(file) {
  document.open();
  document.write('<h1>' + file + '</h1>');
  document.close();
});

須要安裝依賴： bundle-loader

demo11: 公共塊（CommonsChunkPlugin）

查看demo11

CommonsChunkPlugin 由多個入口點之間共享的公共模塊組成。

語法：

new webpack.optimize.CommonsChunkPlugin(options)

new webpack.optimize.CommonsChunkPlugin(options)再也不支持廢棄的webpack 1構造函數。改用相應的選項對象。

option 選項有：（具體能夠參考其官網）

{
  //公共塊的塊名稱
  name: string, 
  //公共塊的文件名名稱
  filename: string,
  minChunks: number|Infinity|function(module, count) -> boolean,
  chunks: string[],
  children: boolean,
  async: boolean|string,
  minSize: number,
}

執行命令後，目錄結構爲：（init.js 是公共塊）

demo12: 全局變量

查看demo11

若是你想要用一些全局變量，可是又不將它們包含在webpack捆綁包中，能夠在 webpack.config.js 中添加一個字段 externals

webpack.config.js

module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },
    ]
  },
  externals: {
    'data': 'data'
  }
};

mian.jsx

var data = require('data');
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>{data}</h1>,
  document.body
);