webpack01 簡介

什么是webpack

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

與gulp/grunt的區別

Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優點使得Webpack可以替代Gulp/Grunt類的工具。

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

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

安裝

初始化npm項目，創建package.json文件

npm init

安裝webpack

//全局安裝
npm install -g webpack
//安裝到你的項目目錄
npm install --save-dev webpack

一個簡單的例子

在項目中創建兩個文件夾和三個文件：

app文件夾：用來存放原始數據和我們將寫的JavaScript模塊
public文件夾：用來存放準備給瀏覽器讀取的數據（包括使用webpack生成的打包后的js文件以及一個index.html文件）
index.html：放在public文件夾中
Greeter.js：放在app文件夾中
main.js：放在app文件夾中

index.html文件只有最基礎的html代碼，它唯一的目的就是加載打包后的js文件（bundle.js）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

Greeter.js只包括一個用來返回包含問候信息的html元素的函數

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

main.js用來把Greeter模塊返回的節點插入頁面

var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());

準備工作至此完成。開始正式使用webpack。

第一種使用方法是在命令行中使用webpack

webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}

webpack app/main.js public/bundle.js

// 如果沒有全局安裝webpack，在終端使用命令時需要額外指定webpack在node_modules中的地址
// node_modules/.bin/webpack app/main.js public/bundle.js

執行完成后webpack就打包生成了bundle.js文件

Hash: c2083bed710216439706
Version: webpack 2.4.1
Time: 57ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.04 kB       0  [emitted]  main
   [0] ./app/Greeter.js 192 bytes {0} [built]
   [1] ./app/main.js 141 bytes {0} [built]

webpack還可以通過配置文件來使用。

通過配置文件使用webpack

Webpack擁有很多其它的比較高級的功能（比如loaders和plugins），這些功能其實都可以通過命令行模式實現，但是這樣不太方便且容易出錯的，一個更好的辦法是定義一個配置文件，這個配置文件其實也是一個簡單的JavaScript模塊，可以把所有的與構建相關的信息放在里面。

還是繼續上面的例子來說明如何寫這個配置文件，在當前練習文件夾的根目錄下新建一個名為webpack.config.js的文件，并在其中進行最最簡單的配置，如下所示，它包含入口文件路徑和存放打包后文件的地方的路徑。

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后輸出文件的文件名
  }
}

注：“__dirname”是node.js中的一個全局變量，它指向當前執行腳本所在的目錄。

現在如果你需要打包文件只需要在終端里你運行webpack命令就可以了，這條命令會自動參考webpack.config.js文件中的配置選項打包你的項目。

更快捷的執行webpack任務

npm可以引導任務執行，對其進行配置后可以使用簡單的npm start命令來代替這些繁瑣的命令。

在package.json中對npm的腳本部分進行相關設置即可，設置方法如下。

在其中的scripts中增加對應命令

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" //配置的地方就是這里啦，相當于把npm的start命令指向webpack命令
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.12.9"
  }
}

npm的start是一個特殊的腳本名稱，它的特殊性表現在，在命令行中使用npm start就可以執行相關命令，如果對應的此腳本名稱不是start，想要在命令行中運行時，需要這樣用npm run {script name}如npm run build

現在就可以直接在命令行中輸入下面的指令來運行webpack打包任務了。

npm start

生成Source Maps（使調試更容易）

開發總是離不開調試，如果可以更加方便的調試當然就能提高開發效率，不過打包后的文件有時候你是不容易找到出錯了的地方對應的源代碼的位置的，Source Maps就是來幫我們解決這個問題的。

通過簡單的配置后，Webpack在打包時可以為我們生成的source maps，這為我們提供了一種對應編譯文件和源文件的方法，使得編譯后的代碼可讀性更高，也更容易調試。

在webpack的配置文件中配置source maps，需要配置devtool，它有以下四種不同的配置選項，各具優缺點，描述如下：

上述選項由上到下打包速度越來越快，不過同時也具有越來越多的負面作用，較快的構建速度的后果就是對打包后的文件的的執行有一定影響。

在學習階段以及在小到中性的項目上，eval-source-map是一個很好的選項，不過記得只在開發階段使用它，繼續上面的例子，進行如下配置

module.exports = {
  devtool: 'eval-source-map',//配置生成Source Maps，選擇合適的選項
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

開發環境推薦：cheap-module-eval-source-map
生產環境推薦：cheap-module-source-map

使用webpack構建本地服務器

Webpack提供一個可選的本地開發服務器，這個本地服務器基于node.js構建，可以實現瀏覽器監測代碼修改，并自動刷新修改后的結果，不過它是一個單獨的組件，在webpack中進行配置之前需要單獨安裝它作為項目依賴

npm install --save-dev webpack-dev-server

devserver作為webpack配置選項中的一項，具有以下配置選項

繼續把這些命令加到webpack的配置文件中，現在的配置文件如下所示

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "./public",//本地服務器所加載的頁面所在的目錄
    colors: true,//終端中輸出結果為彩色
    historyApiFallback: true,//不跳轉
    inline: true//實時刷新
  } 
}

Loaders

Loaders是webpack中最讓人激動人心的功能之一了。通過使用不同的loader，webpack通過調用外部的腳本或工具可以對各種各樣的格式的文件進行處理，比如說分析JSON文件并把它轉換為JavaScript文件，或者說把下一代的JS文件（ES6，ES7)轉換為現代瀏覽器可以識別的JS文件。或者說對React的開發而言，合適的Loaders可以把React的JSX文件轉換為JS文件。

Loaders需要單獨安裝并且需要在webpack.config.js下的modules關鍵字下進行配置，Loaders的配置選項包括以下幾方面：

test：一個匹配loaders所處理的文件的拓展名的正則表達式（必須）
loader：loader的名稱（必須）
include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）；
query：為loaders提供額外的設置選項（可選）

//安裝可以裝換JSON的loader
npm install --save-dev json-loader

webpack的配置文件

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  module: {//在配置文件里添加JSON loader
    loaders: [
      {
        test: /\.json$/,
        loader: "json-loader"
      }
    ]
  },

  devServer: {
    contentBase: "./public",
    colors: true,
    historyApiFallback: true,
    inline: true
  }
}

babel

Babel其實是幾個模塊化的包，其核心功能位于稱為babel-core的npm包中，不過webpack把它們整合在一起使用，但是對于每一個你需要的功能或拓展，你都需要安裝單獨的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

我們先來一次性安裝這些依賴包

// npm一次性安裝多個依賴模塊，模塊之間用空格隔開
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

在webpack中配置Babel的方法如下

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json-loader"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',//在webpack的module部分的loaders里進行配置即可
        query: {
          presets: ['es2015','react']
        }
      }
    ]
  },

  devServer: {
    contentBase: "./public",
    colors: true,
    historyApiFallback: true,
    inline: true
  }
}

現在你的webpack的配置已經允許你使用ES6以及JSX的語法了。繼續用上面的例子進行測試，不過這次我們會使用React，記得先安裝 React 和 React-DOM

npm install --save react react-dom

使用ES6的語法，更新Greeter.js并返回一個React組件

//Greeter,js
import React, {Component} from 'react'
import config from './config.json';

class Greeter extends Component{
  render() {
    return (
      <div>
        {config.greetText}
      </div>
    );
  }
}

export default Greeter

使用ES6的模塊定義和渲染Greeter模塊

import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

render(<Greeter />, document.getElementById('root'));

Babel的配置選項

Babel其實可以完全在webpack.config.js中進行配置，但是考慮到babel具有非常多的配置選項，在單一的webpack.config.js文件中進行配置往往使得這個文件顯得太復雜，因此一些開發者支持把babel的配置選項放在一個單獨的名為 “.babelrc” 的配置文件中。webpack會自動調用.babelrc里的babel配置選項：

// webpack.config.js
module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json-loader
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },

  devServer: {...} // Omitted for brevity
}

//.babelrc
{
  "presets": ["react", "es2015"]
}

CSS module

在過去的一些年里，JavaScript通過一些新的語言特性，更好的工具以及更好的實踐方法（比如說模塊化）發展得非常迅速。模塊使得開發者把復雜的代碼轉化為小的，干凈的，依賴聲明明確的單元，且基于優化工具，依賴管理和加載管理可以自動完成。

不過前端的另外一部分，CSS發展就相對慢一些，大多的樣式表卻依舊是巨大且充滿了全局類名，這使得維護和修改都非常困難和復雜。

最近有一個叫做 CSS modules 的技術就意在把JS的模塊化思想帶入CSS中來，通過CSS模塊，所有的類名，動畫名默認都只作用于當前模塊。Webpack從一開始就對CSS模塊化提供了支持，在CSS loader中進行配置后，你所需要做的一切就是把”modules“傳遞都所需要的地方，然后就可以直接把CSS的類名傳遞到組件的代碼中，且這樣做只對當前組件有效，不必擔心在不同的模塊中具有相同的類名可能會造成的問題。具體的代碼如下

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {...},

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json-loader"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loader: 'style!css?modules-loader'//跟前面相比就在后面加上了?modules
      }
    ]
  },

  devServer: {...}
}

創建一個Greeter.css文件

.root {
  background-color: #eee;
  padding: 10px;
  border: 3px solid #ccc;
}

導入.root到Greeter.js中

import React, {Component} from 'react';
import config from './config.json';
import styles from './Greeter.css';//導入

class Greeter extends Component{
  render() {
    return (
      <div className={styles.root}>//添加類名
        {config.greetText}
      </div>
    );
  }
}

export default Greeter

放心使用把，相同的類名也不會造成不同組件之間的污染。

參考的這篇文章很好，所以需要在實踐中多讀幾遍。全文在此。

context

context 是 webpack 編譯時的基礎目錄，入口起點（entry）會相對于此目錄查找。

若不配置，默認值為當前目錄，webpack設置 context 默認值代碼：

this.set("context", process.cwd());

process.cwd()即webpack運行所在的目錄（等同package.json所在目錄）。

context 應該配置為絕對路徑，假如入口起點為src/main.js，則可以配置：

{
    context: path.resolve('./src'),
    entry: './main.js'
}

此時 entry 不能再配置為’./src/main.js’，因為 webpack 會相對于 context 配置的 src 目錄區查找入口起點（main.js），而 main.js 就在此目錄下，所以應當將 entry 配置為當前目錄（./）。

context 有什么實際作用？官方文檔的解釋是使得你的配置獨立于工程目錄「This makes your configuration independent from CWD (current working directory)」。怎么理解？舉個例子，在分離開發生產配置文件時候，一般把 webpack.config 放到 build 文件夾下，此時 entry 卻不用考慮相對于 build 目錄來配置，仍然要相對于 context 來配置，這也就是所謂的獨立于工程目錄。

需要注意的是，output 的配置項和 context 沒有關系，但是有些插件的配置項和 context 有關，后面會說明。

參考

http://www.jianshu.com/p/42e11515c10f
https://zhuanlan.zhihu.com/p/20367175?columnSlug=FrontendMagazine !!!
http://www.cnblogs.com/libin-1/p/6592114.html

本文鏈接：https://blog.csdn.net/duola8789/article/details/80965869

智能推薦

01.JVM簡介

01.JVM簡介計算機系統當中JVM所處的位置 Java一次編譯,到處運行 Java代碼的執行流程 JVM體系結構概覽棧的指令集架構和寄存器的指令集架構 jvm生命周期 1.啟動 2.執行 3.退出 jvm發展歷程 Android虛擬機 DVM 計算機系統當中JVM所處的位置 JVM是運行在操作系統之上的，并沒有和硬件有直接的交互 JVM屬于系統虛擬機 Java一次編譯,到處運行 Java代碼...

Qt基礎簡介-01

一、常用快捷鍵 ctrl + /：注釋 ctrl + r：運行 ctrl + b：編譯 ctrl + f：查找 F1：選擇目標后幫助文檔 ctrl +i：代碼自動對齊 F4：同名文件.h和.cpp之間的切換二、創建Qt項目 1、選擇桌面應用程序 2、在Qt Creator中來創建項目時選擇MinGW編譯套件，MSVC2017是在VS中創建項目時的編譯器 3、類信息的設置 1）QWidget是 Q...

01Groovy簡介

一什么是Groovy？特點 groovy 是在 java平臺上的、具有象 Python， Ruby 和 Smalltalk 語言特性的靈活動態語言， groovy 保證了這些特性象 java 語法一樣被 java 開發者使用。Groovy 經常被認為是腳本語言，是一種*誤解*groovy 代碼被編譯成 java 字節碼，然后能集成到 java 應用程序中或者 web 應用程序，整個應用程序都可...

Nginx簡介---01

反向代理機制反向代理服務器位于用戶與目標服務器之間，但是對于用戶而言，反向代理服務器就相當于目標服務器，即用戶直接訪問反向代理服務器就可以獲得目標服務器的資源。同時，用戶不需要知道目標服務器的地址，也無須在用戶端作任何設定。反向代理服務器通常可用來作為Web加速，即使用反向代理作為Web服務器的前置機來降低網絡和服務器的負載，提高訪問效率。概括: 1.位于用戶(客戶端)-服務器之間. 2.用戶...

01 - Mongodb簡介

目錄 1、什么是Mongodb 2、什么是NoSQL 3、NoSQL數據分類 4、MongDB 與關系型數據庫對比 5、RDBMS 與MongDB對應的術語 6、數據類型 7、下載、安裝 8、設置環境變量 9、關閉MongoDB 1、什么是Mongodb Mongdb 是一個基于分布式文件存儲的數據庫。由C++語言編寫。在為WEB應用提供可擴展的高性能數...