webpack 入門踩坑

參考來源：知乎張軒

安裝

先裝好node和npm，由於webpack是一個基於node的項目。而後

 

npm install -g webpack 全局安裝

還能夠在當前項目裏面也安裝一個webpack, 這也是官方推薦的作法

npm install webpack --save-dev

總覽

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

webpack簡單點來講就就是一個配置文件，全部的魔力都是在這一個文件中發生的。 這個配置文件主要分爲三大塊

• entry 入口文件 讓webpack用哪一個文件做爲項目的入口
• output 出口 讓webpack把處理完成的文件放在哪裏
• module 模塊 要用什麼不一樣的模塊來處理各類類型的文件

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

創建項目

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

 

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

若是你使用git管理你的這個項目的話，建議你新建一個.gitignore文件，不要讓git提交一些node依賴的模塊， 你也能夠參考github的例子 gitignore/Node.gitignore at master · github/gitignore · GitHub

咱們這裏就簡單一點

 

node_modules  （npmnode_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');

能夠在你的webpack.config.js裏面方便的引用webpack

// webpack.config.js var path = require('path'); var webpack = require('webpack'); 

而後在使用一些plugin的時候就比較方便了

new webpack.optimize.CommonsChunkPlugin('common.js')

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不是內部命令，則配置系統環境變量 參考連接：http://blog.csdn.net/u013446264/article/details/51114276）

啓動cmd，鍵入以下的命令：

npm config set prefix "d:\nodejs\node_global"
npm config set cache "d:\nodejs\node_cache"

4.修改環境變量：在系統變量中增長NODE_PATH變量（圖片來源於上面提到的博文） 

而後在PATH變量中添加一個相同的路徑（PS：這裏的路徑都和第2步配置的路徑有關係）；

5.（圖片來源於上面提到的博文） 

 

 

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

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

配置webpack-dev-server

上面任務雖然完成了，可是咱們要不斷運行程序而後查看頁面，因此最好新建一個開發服務器，能夠serve咱們pack之後的代碼，而且當代碼更新的時候自動刷新瀏覽器。

安裝webpack-dev-server

 

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

安裝完畢後 在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

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

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就行啦，確實是這樣簡單。

 

npm install sass-loader --save-dev

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

 

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


若解析不正確，則使用方案二：

 module: { //加載器配置  loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.js$/, loader: 'jsx-loader?harmony' }, { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} ] },

添加兩個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更高級的用法。

參考文章

SurviveJS - Table of Contents

Introduction