webpack入門級教程

首先能夠看下官方文檔，文檔是最好的老師。 這裏也有國外的一個朋友寫的入門介紹。
Webpack是由Tobias Koppers開發的一個開源前端模塊構建工具。它的基本功能是將以模塊格式書寫的多個JavaScript文件打包成一個文件，同時支持CommonJS和AMD格式。但讓它不同凡響的是，它提供了強大的loader API來定義對不一樣文件格式的預處理邏輯，從而讓咱們能夠將CSS、模板，甚至是自定義的文件格式當作JavaScript模塊來使用。Webpack 基於loader還能夠實現大量高級功能，好比自動分塊打包並按需加載、對圖片資源引用的自動定位、根據圖片大小決定是否用base64內聯、開發時的模塊熱替換等等，能夠說是目前前端構建領域最有競爭力的解決方案之一。

爲何使用Webpack

• 他相似browserify 可是能夠把你的應用分離成許多文件，若是你有許多頁面在你的單頁應用裏面，用戶只須要下載當前頁面所須要的代碼。若是你跳轉到另外一個頁面，他們不須要從新加載通用的代碼。
• 他能替代grunt或者gulp大部分的功能 由於他能夠構建和打包CSS，預處理CSS，編譯JS和打包處理圖片，甚至更多事情。
• 他支持AMD和CommonJs以及其餘的模塊化系統（Angular，ES6）。若是你不知道用什麼，那麼能夠用CommonJs。

怎麼安裝Webpack

安裝node.js

首先須要安裝Node.js，node自帶了包管理工具npm。

安裝webpack

使用npm install webpack -g，webpack全局安裝到了本地環境中，就可使用webpack命令了。

在項目中使用webpack

• 經過npm init實例化package.json文件。
• 經過npm install webpack --save-dev安裝webpack到package.json文件中。
• 或者經過npm install webpack@1.2.x --save-dev安裝指定版本的webpack到package.json文件中。
• 經過npm install webpack-dev-server --save-dev安裝dev tools到package.json文件中，本地運行webpack服務。

怎麼使用Webpack

一、安裝webpack後，可使用webpack這個命令行工具。主要命令：webpack <entry> <output>。能夠切換到包含webpack.config.js的目錄運行命令：

• webpack 執行一次開發時的編譯
• webpack -p 執行一次生成環境的編譯（壓縮）
• webpack --watch 在開發時持續監控增量編譯（很快）
• webpack -d 讓他生成SourceMaps
• webpack --progress 顯示編譯進度
• webpack --colors 顯示靜態資源的顏色
• webpack --sort-modules-by, --sort-chunks-by, --sort-assets-by 將modules/chunks/assets進行列表排序
• webpack --display-chunks 展現編譯後的分塊
• webpack --display-reasons 顯示更多引用模塊緣由
• webapck --display-error-details 顯示更多報錯信息

二、每一個項目下都必須配置有一個 webpack.config.js，它的做用如同常規的 gulpfile.js/Gruntfile.js ，就是一個配置項，告訴 webpack 它須要作什麼。
下面看一個簡單的示例：

var webpack = require('webpack'); module.exports = { //插件項  plugins: [ //提公用js到common.js文件中 new webpack.optimize.CommonsChunkPlugin('common.js'), //將樣式統一發布到style.css中 new ExtractTextPlugin("style.css", {  allChunks: true,  disable: false }), //使用ProvidePlugin加載使用頻率高的模塊 new webpack.ProvidePlugin({  $: "webpack-zepto" }) ], //頁面入口文件配置  entry: { index : './src/main.js' }, //入口文件輸出配置  output: {  path: __dirname +'/dist/',  filename: '[name].js' },  module: { //加載器配置  loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} ] }, //其它解決方案配置  resolve: {  extensions: ['', '.js', '.json', '.scss'],  alias: {  filter: path.join(__dirname, 'src/filters') } } };

entry

entry是頁面入口文件配置，能夠是一個文件或者多個入口文件，能夠是對象格式或者數組格式。

entry: { index : './src/main.js' } entry:['./src/main.js','./src/index.js']

output

output 是對應輸出項配置,主要包括path,filename和publishPath屬性。path表明輸出的路徑，filename表明輸出的文件名稱，publishPath表明靜態資源發佈後的前綴地址。

module.loaders

module.loaders 是最關鍵的一塊配置。它告知 webpack 每一種文件都須要使用什麼加載器來處理。點擊這裏能夠查看loader list。

module: { //加載器配置  loaders: [ //.css 文件使用 style-loader 和 css-loader 來處理 { test: /\.css$/, loader: 'style-loader!css-loader' }, //.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主要有3種使用方式：

一、在頁面裏面引用資源使用

• require("url-loader?mimetype=image/png!./file.png");

  二、在webpack.config.js文件夾中使用

• { test: /.png$/, loader: "url?mimetype=image/png" };

  三、在命令行中編譯使用

• webpack --module-bind "png=url-loader?mimetype=image/png";

如上，"-loader"實際上是能夠省略不寫的，多個loader之間用「!」鏈接起來。
注意全部的加載器都須要經過 npm 來加載，並建議查閱它們對應的 readme 來看看如何使用。
拿最後一個 url-loader 來講，它會將樣式中引用到的圖片轉爲模塊來處理，使用該加載器須要先進行安裝：
npm install url-loader -save-dev
配置信息的參數「?limit=8192」表示將全部小於8kb的圖片都轉爲base64形式（其實應該說超過8kb的才使用 url-loader 來映射到文件，不然轉爲data url形式）。也可使用file-loader來加載資源文件。

plugins

plugins 是插件項，這裏咱們使用了一個 CommonsChunkPlugin 的插件，它用於提取多個入口文件的公共腳本部分，而後生成一個 common.js 來方便多頁面之間進行復用。點擊這裏能夠查看plugins list。

plugins: [ //提公用js到common.js文件中 new webpack.optimize.CommonsChunkPlugin('common.js'), //將樣式統一發布到style.css中 new ExtractTextPlugin("style.css", {  allChunks: true,  disable: false }), //使用ProvidePlugin加載使用頻率高的模塊 new webpack.ProvidePlugin({  $: "webpack-zepto" }) ]

如上，包含兩種：
一、第一種webpack自帶的一些插件：webpack.ProvidePlugin、webpack.optimize.CommonsChunkPlugin，
二、另一種則經過npm包安裝的：ExtractTextPlugin。

resolve

最後是 resolve 配置，這塊很好理解，直接寫註釋了：

resolve: { // require時省略的擴展名，如：require('module') 不須要module.js extension: ['', '.js'], //別名 alias: { filter: path.join(__dirname, 'src/filters') } }

使用Webpack-dev-server

webpack-dev-server是基於node.js Express服務，它同時包含了一個基於Socket.IO輕量的運行時環境。

'use strict' var webpack = require('webpack'); var WebpackDevServer = require('webpack-dev-server'); var config = require('./webpack.config'); // 配置代碼自動編譯和熱替換插件 config.entry.unshift('webpack-dev-server/client?http://localhost:9090', "webpack/hot/dev-server"); config.plugins.push(new webpack.HotModuleReplacementPlugin()); // 這裏配置：請求http://localhost:9090/index.php， // 至關於經過本地node服務代理請求到了http://testapi.uhouzz.com/index.php var proxy = [{ path: "/index.php/*", target: "http://pc.uhouzz.com", host: "pc.uhouzz.com" }] //啓動服務 var app = new WebpackDevServer(webpack(config), { publicPath: config.output.publicPath, hot:true, historyApiFallback: true, proxy:proxy }); app.listen(9090);

如上，引用webpack和webpack-dev-server模塊，經過WebpackDevServer啓動服務，經過HotModuleReplacementPlugin插件啓動代碼自動編譯頁面自動刷新。這樣，當你修改了html、js或者樣式文件，頁面會自動編譯刷新。

html頁面使用

直接在頁面引入 webpack 最終生成的頁面腳本和樣式文件便可。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>webpack test</title> <link rel="stylesheet" href="/dist/style.css"> </head> <body> <div id="app"></div> <script src="/dist/common.js"></script> <script src="/dist/build.js"></script> </body> </html>

總結

基於 webpack 的入門教程就到這裏，但願本文能對你有所幫助，你也能夠參考下面的項目進行參考。
Vue-cnodejs,基於Vue.js重寫的cnodejs的webapp,其中採用的webpack進行打包處理。