webpack的安裝和使用

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

但是由於npm在國內下載的時候是很慢的，所以這里推薦一個替代npm的淘寶鏡像cnpm.之后npm安裝請使用cnpm！

命令行安裝：

1
$ 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 讓他生成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 顯示更多報錯信息
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>