摘要：配置完成后就可以使用來打包代碼了。值得注意的是會刪除所有無作用代碼也就是說那些包裹在這些全局變量下的代碼塊都會被刪除這樣就能保證這些代碼不會因發布上線而泄露。默認會從項目的根目錄下引入這些文件。

命令使用

npm install webpack -g
    作為全局安裝, 在任意目錄使用

npm install webpack --save-dev
    作為項目依賴安裝

npm init
    創建package.json

npm install webpack-dev-server --save-dev
    使用webpack-dev-server啟動服務器

webpack --progress -colors
    讓編譯的輸出內容帶有進度和顏色

webpack --watch
    如果不想每次修改模塊后都重新編譯, 那么可以啟動監聽模式。
    開啟監聽模式后, 沒有變化的模塊會在編譯后緩存到內存中,
    而不會每次都被重新編譯, 所以監聽模式的整體速度是很快的

webpack --display-error-details
    用來打印錯誤詳情

npm install xxx-loader --save-dev
    安裝多個加載器: npm install babel-core babel-preset-es2015 babel-preset-react

npm webpack --config webpack.config.js
    執行打包命令

npm start
    啟動開發模式下的server

npm run start:prod
    啟動生產模式的server

npm run build
    打包生產模式的代碼

npm run lint: eslint
    代碼檢查

npm run lint:watch: eslint
    監視

npm run remove:build
    刪除dist目錄

npm run clean:build
    清除dist目錄

// 調用webpack
webpack
    開發環境下編譯

webpack -p
    產品編譯及壓縮

webpack --watch
    開發環境下持續的監聽文件變動來進行編譯

webpack -d
    引入source maps

配置文件

webpack.config.dev.js: 開發模式相關配置
webpack.config.prod.js: 生產模式相關配置
server.js: 配置本地的server(包含dev server和prod server) 將server部分分離到一個多帶帶到的文件配置
package.json

//webpack.config.dev.js

var webpack = require("webpack");
var path = require("path");
var config = {
    // 入口文件配置
    entry: {
        path.resolve(__dirname, "app/index.js");
    },
    // 文件輸出配置
    output: {
        path: path.resolve(_dirname, "build"),
        filename: "bundle.js",
        publicPath: "/"
    },

    // 插件項
    plugins: [],

    // 加載器配置
    module: {
        loaders: [
            {
                test: /pattern/,
                loader: "xxx-loader",
                exclude: /dir/,
                query: {
                    presets: ["react"]
                }
            },
             {
                 test: /.(png|jpg)$/,
                 loader: "url-loader?limit=8192"
                 // 內聯的base64的圖片地址, 圖片要小于8k, 直接的url的地址則不解析
             }
        ]
    },
    // 其他解決方案配置
    resolve: {
        extensions: ["", ".js", ".json"],
        alias: {}
    },
    watch: true
};

module.exports = config;

webpack.server.js

var webpack = require("webpack");
var webpackServer = require("webpack-dev-server");
var config = require("./webpack.config.dev.js");

var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
    contentBase: "./app",
    historyApiFallback: true,
    hot: true,        //熱啟動
    inline: true, // 監控js變化
    stats: {
        color: true
    }
});

config.entry.unshift("webpack-dev-server/client?http://localhost:8080/",
    "webpack/hot/dev-server");

server.listen(8080, "localhost", function(err) {
    if(err) {
        console.log(err);
    }
    console.log("Listening at localhost:8080...");
});


"script": {
    "start": "node server.js"
}

配置詳解

entry: 入口, 定義要打包的文件

output: 出口, 定義打包輸出的文件；包括路徑, 文件名,還可能有運行時的訪問路徑（publicPath）參數

module: webpack將所有的資源都看做是模塊, 而模塊就需要加載器；
|---- loaders: 主要定義一些loaders, 定義哪些后綴名的文件應該用哪些loader

|-------- test: 匹配文件后綴, 檢測哪些文件需要此loader, 是一個正則表達式

|-------- exclude: 忽略哪些文件

|-------- query: 參數 (或直接寫于loader如: loader: "url-loader?limit=8192")

|------------ presets:

resolve: 其他解決方案配置

|---- extensions: 忽略文件擴展名, require文件時可直接使用require("file"),而非帶后綴如require("file.js")

|-------- alias: 模塊別名定義,方便后續直接飲用別名無需多寫長地址, 后續直接require(key)

plugins: 定義一些額外的插件

watch: 值為boolean, 監聽文件變化

配置生產環境

開發環境:
    webpack.config.dev.js
    需要日志輸出, sourcemap, 錯誤報告等

生產環境:
    webpack.config.prod.js
    需要做代碼壓縮, 對文件名進行hash處理等

區分環境

使用DefinePlugin設置環境變量, 根據設置的環境變量決定是否打包壓縮及啟動dev server或prod server

plugins: [
    new webpack.DefinePlugin({
        "process.evn.NODE_ENV": JSON.stringify("production")
    });
]

判斷當前是否是生產環境

var isProduction = function() {
    return process.env.NODE_ENV === "production";
}


output: {
    path: path.resolve(isProduction ? "__build" : "./assets/"),
    filename: isProduction ? "[name].js" : "./assets/js/[chunkhash:8].[name].min.js",
    chunkFilename: isProduction ? "[chunkhash:8].chunk.js" : "./assets/js/[chunkhash:8].chunk.min.js",
    publicPath: isProduction ? "/__build/" : "http://cdn.site.com/"
}

代碼壓縮

new webpack.optimizeUglifyJsPlugin({
    compress: {
        warnings: false
    }
});

添加Hash緩存

對于沒有修改的文件, 從緩存中獲取文件, 對于已經修改的文件, 不要從緩存中獲取

output: {
    //chunkhash 默認16位, 可自定義配置
    filename: "[chunkhash:8].bundle.js"
}

自動生成頁面

文件名帶上hash值后, 這個值在每次編譯的時候都會發生變化,都需要在 html 文件里手動修改引用的文件名,這種重復工作很瑣碎且容易出錯, 這里我們可以使用 html-webpack-plugin 來幫我們自動處理這件事情, 用來簡化創建服務于webpackbundle的HTML文件

解決方案: 在項目目錄下建一個index.tpl.html作為鉤子

在webpack.config.dev.js和webpack.config.prod.js添加配置代碼, 即可生成相應的index.html

    plugins: [
        new HtmlWebpackPlugin({
            template: "app/index.tpl.html",
            inject: "body",
            filename: index.html
        })
    ]

加載器 js處理

babel-loader: 轉換JSX
babel-core: babel核心包
babel-preset-react
babel-preset-es2015

loaders：[
    {
        loaders: "xxx-loader",
        query: {
            resets:["react", "es2015"]
        }
    }
]

css處理

style-loader
css-loader
less-loader

img處理

url-loader
    可以根據自定義文件大小或者轉化為 base64 格式的 dataUrl, 或者多帶帶作為文件, 也可以自定義對應的hash 文件名
file-loader
    默認情況下會根據圖片生成對應的 MD5hash 的文件格式
image-webpack-loader
    提供壓縮圖片的功能

加載babel-loader需要配置query參數

loaders：[
    {
        test: /.(jpe?g|png|gif|svg)$/i,
        loaders: [
            // 當內容size小于8KB時, 會自動轉成base64的方式內嵌進去, 這樣可以減少一個HTTP的請求
            // 當圖片大于8KB時, 則會在img/下生成壓縮后的圖片, 命名是[hash:8].[name].[ext]的形式
            // hash:8的意思是取圖片內容hashsum值的前8位,
            // 這樣做能夠保證引用的是圖片資源的最新修改版本, 保證瀏覽器端能夠即時更新
            "url?limit=8192&name=img/[hash:8].[name].[ext]",

            // 圖片壓縮
            "image-webpack"
        ]
    }
]

loaders：[
    {
        test: /.(jpe?g|png|gif|svg)$/i,
        loaders: [
            // 生成md5 hash格式的文件名
            "file?hash=sha512&digest=hex&name=[hash].[ext]",
            // 圖片壓縮
            "image-webpack"
        ]
    }
]

插件

plugins: [definPlugin, bannerPlugin, uglifyJsPlugin...]

設置環境變量

var definPlugin = new webpack.DefinePlugin({
    "process.env": {
        NODE_ENV: JSON.stringify("production")
    }
    // feature flags: 在開發環境(例如日志)活內部測試環境(例如沒有發布的新功能)中使用
    // __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || "true")),
    // __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || "false"))
});

給輸出的文件頭部添加注釋信息

var bannerPlugin = new webpack.BannerPlugin("This is test!");

JS混淆

var uglifyJsPlugin = new webpack.optimize.UglifyJsPlugin({
    mangle: {
        // 配置以下列表, 在混淆代碼時, 以下配置的變量, 不會被混淆
        except: ["$super", "$", "exports", "require"]
    }
});

壓縮JS

var minChunkSizePlugin = new webpack.optimize.MinChunkSizePlugin({
    compress: {
        warnings: false
    }
});

壓縮React

var definPlugin = new webpack.DefinePlugin({
    "process.env": {
        NODE_ENV: JSON.stringify("production")
    }
});

加載jQuery

new webpack.ProvidePlugin({
    $: "jquery"
});

公共模塊提取

new webpack.optimize.CommonsChunkPlugin({
    name: "vendors",                     // 將公共模塊提取, 生成名為`vendors`的chunk
    chunks: ["index","list","about"],     //提取哪些模塊共有的部分
    minChunks: 3                         // 提取至少3個模塊共有的部分
});

多帶帶使用link標簽加載css并設置路徑

new ExtractTextPlugin("css/[name].css"), // 相對于output配置中的publickPath

自動生成html文件, 模板生成的相關配置, 每個對于一個頁面的配置, 有幾個寫幾個

new HtmlWebpackPlugin({                 //根據模板插入css/js等生成最終HTML
    favicon: "./src/img/favicon.ico",     //favicon路徑, 通過webpack引入同時可以生成hash值
    filename: "./view/index.html",         //生成的html存放路徑, 相對于path
    template: "./src/view/index.html",     //html模板路徑
    inject: "body",                     //js插入的位置, true/"head"/"body"/false
    hash: true,                         //為靜態資源生成hash值
    chunks: ["vendors", "index"],        //需要引入的chunk, 不配置就會引入所有頁面的資源
    minify: {                             //壓縮HTML文件
        removeComments: true,             //移除HTML中的注釋
        collapseWhitespace: false         //刪除空白符與換行符
    }
});

new HtmlWebpackPlugin({                 //根據模板插入css/js等生成最終HTML
    favicon: "./src/img/favicon.ico",     //favicon路徑, 通過webpack引入同時可以生成hash值
    filename: "./view/list.html",         //生成的html存放路徑, 相對于path
    template: "./src/view/list.html",     //html模板路徑
    inject: true,                         //js插入的位置, true/"head"/"body"/false
    hash: true,                         //為靜態資源生成hash值
    chunks: ["vendors", "list"],        //需要引入的chunk, 不配置就會引入所有頁面的資源
    minify: {                             //壓縮HTML文件
        removeComments: true,             //移除HTML中的注釋
        collapseWhitespace: false         //刪除空白符與換行符
    }
});

其它插件

new webpack.HotModuleReplacementPlugin()     // 熱加載
HotModuleReplacementPlugin()                 // 代碼熱替換
NoErrorsPlugin()                             // 報錯但不退出webpack進程
OpenBrowserPlugin()                         // 自動打開瀏覽器

webpack使用 分析多個模塊的公用代碼提取并多帶帶打包

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin("common.js");
module.exports = {
    entry: {
        page1: "./main1.js",
        page2: "./main2.js"
    },
    output: {
        path: "build",
        filename: "[name].js"
    },
    plugins: [
        commonsPlugin
    ]
}

文件引用忽略擴展名配置

如果你希望在require文件時省略文件的擴展名, 只需要在webpack.config.js中添加 resolve.extensions 來配置。

// webpack.config.js
module.exports = {
    entry: "./main.js",
    output: {
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /.coffee$/, loader: "coffee-loader" },
            {
                test: /.js$/,
                loader: "babel-loader",
                query: {
                    presets: ["es2015", "react"]
                }
            }
        ]
    },
    resolve: {
        // 現在你require文件的時候可以直接使用require("file"), 不用使用require("file.coffee")
        extensions: ["", ".js", ".json", ".coffee"]
    }
};

css樣式和圖片的加載

首先你需要用require()去加載你的靜態資源(named as they would with node"s require()):

require("./bootstrap.css");
require("./myapp.less");

var img = document.createElement("img");
img.src = require("./glyph.png");

當你require了CSS(less或者其他)文件, webpack會在頁面中插入一個內聯的