淺談Webpack(一)

標籤：

webpack官方文檔

什麼是webpack?

Webpack 是一個前端資源載入/打包工具(Module Bundler)，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模組來使用和處理。

只需要相對簡單的配置就可以提供前端工程化需要的各種功能，並且如果有需要它還可以被整合到其他比如 Grunt / Gulp 的工作流程。

我們可以直接使用 require(XXX) 的形式來引入各模組，即使它們可能需要經過編譯（比如JSX和sass），但我們無須在上面花費太多心思，因為 webpack 有著各種健全的載入器（loader）在默默處理這些事情。

為什麼使用webpack?

現在的網站已經演化成 web app：

• 一個頁面內依賴著越來越多的 JavaScript
• 現代瀏覽器有著越來越多的
• 雖然單頁內代碼越來越多，但全頁重新整理越來越少

這意味著，用戶端有著越來越多的代碼。

一個大的程式碼程式庫需要良好的組織，這需要模組系統來把程式碼程式庫拆分成模組。

載入器loader

loader是把一個資源檔作為入參轉換為另一個資源檔的 node.js 函數。

例如，可以通過loader來讓 webpack 來載入 CoffeeScript 或 JSX 檔案。

如果loader發布在 npm 上，那麼可以通過下面的兩個命令來安裝

$ npm install xxx-loader --save$ npm install xxx-loader --save-dev

安裝webpack

$ npm install -g webpack

 

配置webpack

每個項目下都必須配置有一個 webpack.config.js ，它就是一個配置項，告訴webpack它需要做什麼

看樣本：

 1 const webpack = require(‘webpack‘); 2  3 module.exports = { 4   devtool: ‘inline-source-map‘, 5  6   //頁面入口檔案配置 7   entry: [ 8     ‘./public/entry.jsx‘, 9     ‘webpack-hot-middleware/client‘10   ],11 12   //入口檔案輸出配置13   output: {14     path: __dirname,15     publicPath: ‘/assets/‘,16     filename: ‘bundle.js‘17   },18   module: {19     //載入器配置20     loaders: [{21       test: /\.(js|jsx)$/,22       exclude: /node_modules/,23       loader: ‘babel‘,24       query: {25         presets: [‘es2015‘, ‘react‘]26       }27     },28     {29       test:/\.css$/,30       exclude:/node_modules/,31       loader:‘style!css‘32     },33     {34       test: /\.(woff|woff2)$/,35       loader: ‘url-loader?limit=10000&mimetype=application/font-woff‘36     },37     {38       test: /\.ttf$/,39       loader: ‘url?limit=10000&mimetype=application/octet-stream‘40     },41     {42       test: /\.eot$/,43       loader: ‘file‘44     },45     {46       test: /\.svg$/,47       loader: ‘url?limit=10000&mimetype=image/svg+xml‘48     },49     {50       test: require.resolve(‘jquery‘),51       loader: ‘expose?$!expose?jQuery‘52     },53     {54       test: /\.(png|jpg)$/,55       loader: ‘url-loader?limit=8192‘56     }57     ]58   },59 60   //外掛程式項 61   plugins: [62     // Webpack 1.063     new webpack.optimize.OccurenceOrderPlugin(),64     // Webpack 2.0 fixed this mispelling65     // new webpack.optimize.OccurrenceOrderPlugin(),66     new webpack.HotModuleReplacementPlugin(),67     new webpack.NoErrorsPlugin()68   ]69 };

1、plugins是外掛程式項，這裡我們用了三個外掛程式方法：

webpack.optimize.OccurenceOrderPlugin(),webpack.HotModuleReplacementPlugin(),webpack.NoErrorsPlugin();

(1).webpack 給每個模組和分塊分配了 id 來識別它們。webpack 可以通過new webpack.optimize.OccurenceOrderPlugin()給最常用的 id 分配最簡短的 id 來進行最佳化;

(2).webpack.NoErrorsPlugin()是選擇性的，主要的功能是當更改完的程式碼有語法錯誤時不要重新整理。當錯誤修改後，畫面會自動重新整理。

(3).webpack.HotModuleReplacementPlugin()：Webpack-dev-server結合後端伺服器的熱替換配置

 

2、entry 是頁面入口檔案配置，output 是對應輸出項配置（即入口檔案最終要產生什麼名字的檔案、存放到哪裡），其文法大致為：

 1 { 2     entry:{ 3         page1: "./page1", 4         //支援數組形式，將載入數組中的所有模組，但以最後一個模組作為輸出 5         page2: ["./entry1", "./entry2"] 6     }, 7     output:{ 8         path: "dist/js/page", 9         filename: "[name].bundle.js"10     }11 }

該段代碼最終會產生一個 page1.bundle.js 和 page2.bundle.js，並存放到 ./dist/js/page 檔案夾下。

 

3、module.loaders 是最關鍵的一塊配置。它告知 webpack 每一種檔案都需要使用什麼載入器來處理：

module: {        //載入器配置        loaders: [            //.css 檔案使用 style-loader 和 css-loader 來處理            { test: /\.css$/, loader: ‘style-loader!css-loader‘ },            //.js 檔案使用 jsx-loader 來編譯處理            { test: /\.js$/, loader: ‘jsx-loader?harmony‘ },            //.scss 檔案使用 style-loader、css-loader 和 sass-loader 來編譯處理            { test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘},            //圖片檔案使用 url-loader 來處理，小於8kb的直接轉為base64            { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘}        ]    }

如上，"-loader"其實是可以省略不寫的，多個loader之間用“!”串連起來。

注意所有的載入器都需要通過 npm 來載入，並建議查閱它們對應的 readme 來看看如何使用。

關於 webpack.config.js 更詳盡的配置可以參考這裡。

運行webpack

$ webpack --display-error-details

後面的參數“--display-error-details”是推薦加上的，方便出錯時能查閱更詳盡的資訊（比如 webpack 尋找模組的過程），從而更好定位到問題。

 

參考資料：http://www.cnblogs.com/vajoy/p/4650467.html

淺談Webpack(一)