前提

全域性環境下安裝 nodejs

使用

1、安裝依賴包

如果專案沒有npm管理，即沒有package.json檔案

初始化專案為nodejs專案

npm init

• 輸入必要資訊
• 生成package.json檔案

安裝webpack依賴

cnpm install webpack --save -dev

• –save：表示在安裝的同時，將依賴包寫入package.json中
• -dev:表示將依賴寫在devDependency（開發依賴包）中

安裝Loader，style，css，svg，url，file，font-awesome以及postCss

cnpm install style-loader css-loader svg-url-loader url-loader file-loader font-awesome-webpack postcss-webpack --save -dev

• style-loader :處理位於頁面內的style標籤中的css

• css-loader ：處理css檔案中的url（這種寫法是為了將css與js分開打包，利用外掛ExtractTextPlugin）

            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader"
 
,
                    use: "css-loader"
                })
},

• svg-url-loader ：svg圖片處理

            {
                test: /\.(svg|eot|woff|ttf)\w*/,
                loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
},

• url-loader ：

  • 1.檔案大小小於limit引數，url-loader將會把檔案轉為DataURL；
  • 2.檔案大小大於limit，url-loader會呼叫file-loader進行處理，引數也會直接傳給file-loader。有引數

{
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader?limit=8192&name=css/images/[name].[ext]'
},

• file-loader ：解析專案中的url引入（不僅限於css），根據我們的配置，將圖片拷貝到相應的路徑，再根據我們的配置，修改打包後文件引用路徑，使之指向正確的檔案。有引數

{
                test: /\.xsl$/,
                loader: "file-loader?name=[name].[ext]"
}

• url-loader和file-loader涉及到了4個引數：limit、name、outputPath、publicPath。

  • 其中limit已經說明過，告訴url-loader，在檔案小於多少個位元組時，將檔案編碼並返回DataURL。

  • file-loader相關的是name、outputPath和publicPath。下面解釋一下這3個引數

    • name表示輸出的檔名規則，如果不新增這個引數，輸出的就是預設值：檔案雜湊。
    • 加上[path]表示輸出檔案的相對路徑與當前檔案相對路徑相同，加上[name].[ext]則表示輸出檔案的名字和副檔名與當前相同。

    • 加上[path]這個引數後，打包後文件中引用檔案的路徑也會加上這個相對路徑。

    • outputPath表示輸出檔案路徑字首。

    • 圖片經過url-loader打包都會打包到指定的輸出資料夾下。
    • 但是我們可以指定圖片在輸出資料夾下的路徑。

    • 比如outputPath=img/，圖片被打包時，就會在輸出資料夾下新建（如果沒有）一個名為img的資料夾，把圖片放到裡

    • publicPath表示打包檔案中引用檔案的路徑字首

    • 如果你的圖片存放在CDN上，那麼你上線時可以加上這個引數，值為CDN地址，這樣就可以讓專案上線後的資源引用路徑指向CDN了。
• font-awesome-webpack :處理字型檔案
• postcss-webpack
• extract-text-webpack-plugin ：將css與js分開打包
• clean-webpack-plugin ：在打包前清空目標資料夾
• copy-webpack-plugin ：直接複製檔案或資料夾到目標目錄

如果專案已經被npm管理，即包含package.json檔案

• 直接安裝所有依賴

cnpm install

2、配置檔案 webpack.config.js

• 首先新建入口檔案 index.js
  

  引入各種需要的js和css等檔案

require('./js/lib/jquery/jquery.js');
require('./js/lib/jquery/jquery-1.9.1.min.js');
require('./js/lib/jquery/jquery.colorbox.js');

require('./js/common/common.js');
require('./js/main.js');
require('./js/carousel.js');
// require('./js/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML');

require('./css/iconfont.css');
require('./css/colorbox.css');
require('./css/by.css');
require('./css/jo-dhh.css');

require('./xslt/jats2html.xsl');

• 引入webpack包

var webpack = require("webpack");

• 設定打包入口，和輸出路徑、檔名稱
  

  __dirname為當前目錄

entry: {
        index: __dirname + "/index.js",
        // vendor:['jQuery'],
    },
    output: {
        path: __dirname + "/dist",
        //打包後的檔案存放的地方
        filename: "bundle.js"
    },

• 為了將js與css分開打包，需要引入外掛extract-text-webpack-plugin

var ExtractTextPlugin = require("extract-text-webpack-plugin");

在module中的loader引數中，對css的處理部分修改為

{
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
},

在plugins中新增css檔案打包後的輸出路徑和檔名

new ExtractTextPlugin("style.css")

說明：這裡如果不將引數格式顯示設定為fallback，use格式，後面在打包時會報css檔案錯誤

• 對圖片進行處理
  

  圖片有三種處理方式，一種圖片是在css中被設定為背景樣式，這裡可以直接識別並放入目標資料夾；

{
                test: /\.(png|jpg|gif)$/,
                loader: 'file-loader?name=images/[name].[ext]'
},

另一種是在html中通過img標籤的src引入，因為webpack對html支援不友好，所以需要藉助外掛html-webpack-plugin

第三種是借用拷貝外掛，直接強行拷貝所有圖片，因為本專案圖片是在xslt中引用，所以採用第三種和第一種結合的方式處理圖片，在plugin引數中新增

new CopyWebpackPlugin([
            {
                from: 'css/images',
                to: 'images'
            },
            {
                from: 'xmlsample',
                to: 'xmlsample'
            },
            {
                from: 'js/MathJax',
                to: 'MathJax'
            }

]),

• 對字型檔案處理
  

  這裡需要注意：字型檔案的css樣式和其餘資原始檔的路徑對應問題

{
                test: /\.(svg|eot|woff|ttf)\w*/,
                loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
            },

• 其餘格式檔案處理，專案主要是利用xslt對xml進行轉換，所以需要將xslt也進行處理

{
                test: /\.xsl$/,
                loader: "file-loader?name=[name].[ext]"
}

• 因為涉及到多個檔案打包成一個檔案，所以開啟source-map對映，方便除錯，釋出版本可以關閉該功能

devtool: 'source-map',

• 拷貝其餘檔案

var CopyWebpackPlugin = require("copy-webpack-plugin");

new CopyWebpackPlugin([
            {
                from: 'css/images',
                to: 'images'
            },
            {
                from: 'xmlsample',
                to: 'xmlsample'
            },
            {
                from: 'js/MathJax',
                to: 'MathJax'
            }

        ]),

• 因為每次打包結果可能都不一樣，所以每次打包之前需要手動刪除dist資料夾，不太方便，在網上找到一款可以自動刪除目標資料夾的外掛
  

  懶惰才是最大生產力哈哈哈

var CleanWebpackPlugin = require("clean-webpack-plugin");

new CleanWebpackPlugin(
            ['dist'],
            {
                root: __dirname,       　　　　　　　　　　//根目錄
                verbose: true,        　　　　　　　　　　//開啟在控制檯輸出資訊
                dry: false        　　　　　　　　　　//啟用刪除檔案
            })

• 配置檔案程式碼

var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");
var CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
    entry: {
        index: __dirname + "/index.js",
        // vendor:['jQuery'],
    },
    output: {
        path: __dirname + "/dist",
        //打包後的檔案存放的地方
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            // [hash:8]
            // {
            //     test: /\.(png|jpg|gif)$/,
            //     loader: 'url-loader?limit=8192&name=css/images/[name].[ext]'
            // },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'file-loader?name=images/[name].[ext]'
            },
            {
                test: /\.(svg|eot|woff|ttf)\w*/,
                loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
            },
            {
                test: /\.xsl$/,
                loader: "file-loader?name=[name].[ext]"
            }
        ]
    },
    devtool: 'source-map',
    plugins: [
        new ExtractTextPlugin("style.css"),
        // new webpack.optimize.CommonsChunkPlugin({
        //     names: ['vendor', 'manifest'],
        // }),
        new CopyWebpackPlugin([
            {
                from: 'css/images',
                to: 'images'
            },
            {
                from: 'xmlsample',
                to: 'xmlsample'
            },
            {
                from: 'js/MathJax',
                to: 'MathJax'
            }

        ]),
        new CleanWebpackPlugin(
            ['dist'],
            {
                root: __dirname,       　　　　　　　　　　//根目錄
                verbose: true,        　　　　　　　　　　//開啟在控制檯輸出資訊
                dry: false        　　　　　　　　　　//啟用刪除檔案
            })
    ]
}