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 。
但是由於npm在國內下載的時候是很慢的，所以這里推薦一個替代npm的淘寶鏡像cnpm.之后npm安裝請使用cnpm！
命令行安裝：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝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
1、安裝 webpack 后，可以使用 webpack 這個命令行工具。主要命令： webpack <entry> <output> 。可以切換到包含webpack.config.js的目錄運行命令：
webpack執行一次開發時的編譯webpack -p執行一次生成環境的編譯（壓縮）webpack --watch在開發時持續監控增量編譯（很快）webpack -d讓他生成SourceMapswebpack --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顯示更多報錯信息
2、每個項目下都必須配置有一個 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種使用方式：
1、在頁面里面引用資源使用
-
require("url-loader?mimetype=image/png!./file.png");
2、在webpack.config.js文件夾中使用
-
{ test: /.png$/, loader: "url?mimetype=image/png" };
3、在命令行中編譯使用
-
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" }) ]
如上，包含兩種：
1、第一種webpack自帶的一些插件： webpack.ProvidePlugin 、 webpack.optimize.CommonsChunkPlugin ，
2、另外一種則通過 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進行打包處理。