Webpack傻瓜式指南（一）

因為這篇啟蒙文章比較受大家歡迎，在操作過程中大家也遇到很多坑，所以于2016.2.25更新 在文章最后總結了各種出現的錯誤

webpack最近很熱，我一開始是想翻譯一篇國外關于webpack的佳作，但是找來找去也沒有一篇讓我感覺到很滿意的，好多都是一步到位，滿屏幕都是React＋Webpack，官方文檔寫的不太好，好多點都沒有解釋的詳細，所以我參考了幾篇文章，寫一篇容易上手的指南。本文適合第一次接觸webpack的朋友，如果是老鳥，就不用看了。這是系列的第一篇，主要講他最基本的用法。

比較

如果你熟悉原來一系列的構建工具，grunt或者gulp之類的，這里有一篇webpack和他們比較的文章可以讀一讀。
Webpack Compared

安裝

先裝好node和npm，因為webpack是一個基于node的項目。然后

npm install -g webpack

總覽

官網對webpack的定義是MODULE BUNDLER，他的目的就是把有依賴關系的各種文件打包成一系列的靜態資源。 請看下圖


webpack簡單點來說就就是一個配置文件，所有的魔力都是在這一個文件中發生的。
這個配置文件主要分為三大塊

  • entry 入口文件 讓webpack用哪個文件作為項目的入口
  • output 出口 讓webpack把處理完成的文件放在哪里
  • module 模塊 要用什么不同的模塊來處理各種類型的文件

下面我們就一步一步來新建一個簡單的項目

建立項目

建一個文件夾，然后新建一個package.json的文件在項目根目錄下

mkdir webpack
cd webpack
npm init
# 一直點回車 如果懶得填一些信息

如果你使用git管理你的這個項目的話，建議你新建一個.gitignore文件，不要讓git提交一些node依賴的模塊， 你也可以參考github的例子
https://github.com/github/gitignore/blob/master/Node.gitignore

我們這里就簡單一點

node_modules

項目結構

現在項目里面就有一個package.json， 我們多加一點東西，慢慢豐富它的內容。

  • /app
    • index.js
    • sub.js
  • package.json
  • webpack.config.js

添加了兩個js文件，添加了最重要的webpack的配置文件，我們還是從非常簡單的hello world開始玩起，webpack原生直接支持AMD和CommonJS兩種格式，如果你想使用ES6的風格，這點以后再提。

JS代碼

sub.js

//我們這里使用CommonJS的風格
function generateText() {
  var element = document.createElement('h2');
  element.innerHTML = "Hello h2 world";
  return element;
}

module.exports = generateText;

index.js

var sub = require('./sub');
var app  = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(sub());
document.body.appendChild(app);

代碼寫完了，完成一個很簡單的功能，新建一個單獨的module，并且在另外一個module里面引用他，最后會在頁面里面輸出兩個標題。

配置Webpack

現在開始配置webpack，目標是把這兩個js文件合并成一個文件. 我們可以自己在build文件夾里面手動建一個index.html文件夾，然后再把合并以后的js引用在里面，但是這樣有些麻煩，所以我們這里安裝一個plugin，可以自動快速的幫我們生成HTML。

npm install html-webpack-plugin --save-dev

好 有了這個插件 開始寫config文件


var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定義了一些文件夾的路徑
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
  //項目的文件夾 可以直接用文件夾名稱 默認會找index.js 也可以確定是哪個文件名字
  entry: APP_PATH,
  //輸出的文件名 合并以后的js會命名為bundle.js
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
  //添加我們的插件 會自動生成一個html文件
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]
};

然后在項目根目錄運行

webpack

終端顯示一堆信息，然后告訴你成功了。

你可以使用webpack --help看看一些運行的時候可選的參數

你會發現多出來一個build文件夾，直接點開里面的html文件，你會發現我們可愛的“hello world”已經插入到頁面了。我們的任務完成了，成功生成html，合并js，html引入了js，js被執行了。

配置webpack-dev-server

上面任務雖然完成了，但是我們要不斷運行程序然后查看頁面，所以最好新建一個開發服務器，可以serve我們pack以后的代碼，并且當代碼更新的時候自動刷新瀏覽器。

安裝webpack-dev-server

更新, 這里還是全局安裝比較好

npm install webpack-dev-server －g

安裝完畢后 在config中添加配置

module.exports = {
  ....
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  },
  ...
}

然后再package.json里面配置一下運行的命令,npm支持自定義一些命令

...
"scripts": {
  "start": "webpack-dev-server --hot --inline"
},
...

好了，萬事具備了，在項目根目錄下輸入npm start,一堆花花綠綠的信息后server已經起來了，在瀏覽器里面輸入http://localhost:8080 發現偉大的hello world出現了，在js里面隨便修改一些輸出然后保存, boom!瀏覽器自動刷新，新的結果出現了。

拓展閱讀
如果你的服務器端使用的是express框架，你還可以直接安裝express的middleware，webpack配合express，很好用。

npm install webpack-dev-middleware --save-dev

更多的詳情 請參考這篇文章

https://blog.risingstack.com/using-react-with-webpack-tutorial/

添加CSS樣式

現在來添加一些樣式，webpack使用loader的方式來處理各種各樣的資源，比如說樣式文件，我們需要兩種loader，css-loader 和 style－loader，css-loader會遍歷css文件，找到所有的url(...)并且處理。style-loader會把所有的樣式插入到你頁面的一個style tag中。

安裝我們的loader

npm install css-loader style-loader --save-dev

配置loader，在webpack.config.js中

  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  },
  ...
  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style', 'css'],
        include: APP_PATH
      }
    ]
  },
  ...
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]

看loaders的書寫方式，test里面包含一個正則，包含需要匹配的文件，loaders是一個數組，包含要處理這些程序的loaders，這里我們用了css和style，注意loaders的處理順序是從右到左的，這里就是先運行css-loader然后是style-loader.

新建一個樣式文件 main.css

h1 {
    color: red;
}

記得在入口文件index.js中引用

require('./main.css');

然后發現標題變成紅色的了，webpack的理念是基于項目處理的，把對應的文件格式給對應的loader處理，然后你就不用管了，它會決定怎么壓縮，編譯。

那現在想使用一些有愛的css預編譯程序，來點sass吧。 你可能已經想到了，再來個loader就行啦，確實是這樣簡單。

更新 這里還需要添加node-sass來解析sass文件

npm install sass-loader node-sass --save-dev

稍微修改一下config，刪掉我們先前添加的css規則，加上下面的loader

      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass'],
        include: APP_PATH
      },

添加兩個sass文件，variables.scss和main.scss

variables.scss

$red: red;

main.scss

@import "./variables.scss";

h1 {
  color: $red;
}

在index.js中引用

require('./main.scss');

然后發現標題如愿變紅，相當簡單吧。

處理圖片

這個和其他一樣，也許你也已經會玩了。安裝loader，處理文件。不過有個神奇的地方它可以根據你的需求將一些圖片自動轉成base64編碼的，為你減輕很多的網絡請求。

安裝url-loader

npm install url-loader --save-dev

配置config文件

      {
        test: /\.(png|jpg)$/,
        loader: 'url?limit=40000'
      }

注意后面那個limit的參數，當你圖片大小小于這個限制的時候，會自動啟用base64編碼圖片。

下面舉個栗子。

新建一個imgs文件夾，往里面添加一張崔叔的照片。在scss文件中添加如下的東西。

@import "./variables.scss";

h1 {
  color: $red;
  background: url('./imgs/avatar.jpg');
}

npm start, 然后查看圖片的url，發現神奇。

添加第三方庫

有的時候還想來點jquery，moment，undersocre之類的庫，webpack可以非常容易的做到這一點，有謠言說Bower即將停止開發了, 作者推薦都使用npm來管理依賴。那么我們現在安裝在我們的app中添加jquery和moment的支持。

npm install jquery moment --save-dev

在js中引用


var sub = require('./sub');
var $ = require('jquery');
var moment = require('moment');
var app  = document.createElement('div');
app.innerHTML = '<h1>Hello World it</h1>';
document.body.appendChild(app);
app.appendChild(sub());
$('body').append('<p>look at me! now is ' + moment().format() + '</p>');

看看瀏覽器，成功！ jquery和moment現在都起作用了！

添加ES6的支持

如果現在你的項目還沒有對ES6的語法支持，那就有點沒有逼格了，其實大家都知道這個也很簡單，因為我們有偉大的Babel

首先 裝各種loader

npm install babel-loader babel-preset-es2015 --save-dev

配置我們的config文件

...
      {
        test: /\.jsx?$/,
        loader: 'babel',
        include: APP_PATH,
        query: {
          presets: ['es2015']
        }
      },
...

es2015這個參數是babel的plugin，可以支持各種最新的es6的特性，具體的情況看這個鏈接。
Babel es2015 plugin

現在我們可以改掉CommonJS風格的文件了。

sub.js

export default function() {
  var element = document.createElement('h2');
  element.innerHTML = "Hello h2 world hahaha";
  return element;
}

index.js

import './main.scss';
import generateText from './sub';
import $ from 'jquery';
import moment from 'moment';

let app  = document.createElement('div');
const myPromise = Promise.resolve(42);
myPromise.then((number) => {
  $('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>');
});
app.innerHTML = '<h1>Hello World it</h1>';
document.body.appendChild(app);
app.appendChild(generateText());

我們上面測試了import, export，const，let，promise等一系列es6的特性。

最后完美的輸出界面。

結語

第一部分到這里結束，經過一系列例子，你應該能夠了解webpack最基本的用法了吧。是否已經喜歡上這種簡潔的配置了？下一部分我們會繼續討論一些webpack更高級的用法。

debug

有很多留言提出了一些大家遇到的錯誤，感謝留言中的一位飄在心中的調調同學，在一篇博文中總結了各種錯誤。我在這里總結一下。請參考這篇文章的修正方式：

初學webpack遇到的坑

  • 初次運行webpack出現以下錯誤
throw err;
canot find module 'webpack/lib/node/NodeTemplatePlugin'
  • 初次運行webpack-dev-server出現以下錯誤
ERROR in multi main
Module not found: Error: Cannot resolve module 'webpack/hot/dev-server'
  • 初次運行sass-loder出現錯誤

原文中缺少了添加node-sass

npm install --save-dev

參考文章

http://survivejs.com/webpack_react/

https://christianalfoni.github.io/react-webpack-cookbook/index.html

很硬的鏈接

把這一節的代碼做了一個repo，想看所有源碼的可以clone下
https://github.com/vikingmute/webpack-basic-starter

同時這一系列關于Webpack的文章也可以在github找到
https://github.com/vikingmute/webpack-for-fools

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺，特此分享以備自己日后查看，也希望更多的人看到...
    小小字符閱讀 8,227評論 7贊 35
  • 在現在的前端開發中，前后端分離、模塊化開發、版本控制、文件合并與壓縮、mock數據等等一些原本后端的思想開始...
    Charlot閱讀 5,484評論 1贊 32
  • 最近在學習 Webpack,網上大多數入門教程都是基于 Webpack 1.x 版本的,我學習 Webpack 的...
    My_Oh_My閱讀 8,204評論 40贊 247
  • GitChat技術雜談 前言 本文較長，為了節省你的閱讀時間，在文前列寫作思路如下： 什么是 webpack，它要...
    蕭玄辭閱讀 12,710評論 7贊 110
  • 月當空，夜難眠，心系晴兒夢繞魂牽。 夜悄悄，起來獨自徘徊，在窗前。 兩地相思苦，黃花也消瘦，那來千里共嬋娟。 巫山...
    向春光原創文學閱讀 224評論 0贊 3