摘要：熟悉了之后，各種新舊項(xiàng)目，大小項(xiàng)目都能用耍的飛起。使用作為文件中的模板安裝，記住不是，也不用配置，只需在標(biāo)簽中指定，就可以愉快的使用語(yǔ)法了，比起看起來(lái)簡(jiǎn)潔多了。

使用構(gòu)建工具非常常用一個(gè)功能就是合并js和css文件，gulp和grunt都是編寫(xiě)相應(yīng)的任務(wù)來(lái)完成，轉(zhuǎn)到webpack突然懵逼了，簡(jiǎn)單的項(xiàng)目怎么做文件合并呢？其實(shí)只需把多個(gè)js文件同時(shí)引入到main.js（入口文件）中即可，css借助extract-text-webpack-plugin搞定。

不管是簡(jiǎn)單的純展示頁(yè)面還是復(fù)雜的單頁(yè)或多頁(yè)面，webpack差不多可以徹底取代gulp、grunt了，利用file、scss、pug、babel等各種loader處理各種需求比grunt那種編寫(xiě)任務(wù)型的配置方便太多。

webpack非常智能，多次引入相同模塊，最終打包后只會(huì)包含一次。如果你不想打包某個(gè)模塊，在webpack.config.js里配置externals即可。對(duì)于css模塊，externals是無(wú)效的，js里不引入，直接在html里放link就好了，不要陷入webpack的魔障。對(duì)于一些老舊的jq插件，可以配置providePlugin或使用expose-loader，用法就自行g(shù)oogle了。熟悉了之后，各種新舊項(xiàng)目，大小項(xiàng)目都能用webpack耍的飛起。

// webpack.config.js
// ...

externals: {
    "vue": "Vue",
    "jquery": "jQuery",
},

開(kāi)發(fā)的時(shí)候經(jīng)常有跨域需求，前端跨域方法雖然很多，但是只是為了開(kāi)發(fā)時(shí)用用，感覺(jué)沒(méi)一個(gè)好用的。利用webpack-dev-server可以輕松解決開(kāi)發(fā)時(shí)跨域問(wèn)題，devServer啟動(dòng)了一個(gè)node服務(wù)器幫你代理請(qǐng)求，詳細(xì)配置請(qǐng)看proxy，這個(gè)設(shè)置是將所有以/api開(kāi)頭的路由映射到xxx.com，target記得帶上協(xié)議名哦（http://)。pathRewrite就是將/api/a路徑重寫(xiě)為/a。當(dāng)然你也可以配置為/轉(zhuǎn)發(fā)請(qǐng)求，這樣靜態(tài)資源也可以在localhost下請(qǐng)求到了?？缬虻那疤崾欠?wù)器上配置了"Access-Control-Allow-Origin:*"，開(kāi)發(fā)時(shí)服務(wù)器端一般都設(shè)置了。

// webpack.config.js
// ...

devServer: {
    port: 8888,
    historyApiFallback: true,
    stats: "minimal",  // 輸入精簡(jiǎn)信息
    overlay: true, // 將錯(cuò)誤顯示在html之上
    proxy: {
        "/api": {
            target: "http://xxx.com",
            secure: false,
            changeOrigin: true,
            // pathRewrite: {"^/api": ""},
        }
    }
},

自從用了webpack-dev-server，我的f5鍵長(zhǎng)舒一口氣，不過(guò)有時(shí)候碰到webpack-dev-server熱更新回失效，一般是配置出了問(wèn)題。只需在pulugins里添加HotModule插件，devServer不要配置hot:true了，雖然文檔里寫(xiě)的是設(shè)置hot:true開(kāi)啟熱更新，但是我試過(guò)配置hot熱更新就失效了，不解！

// webpack.config.js
// ...

plugins: [
        new webpack.HotModuleReplacementPlugin(), // 熱加載
]

2017.9.30更新：
webpack文檔里寫(xiě)的是命令行加上 -hot 啟用熱更新模式，不用手動(dòng)加hrm plugin。
使用extract-text-webpack-plugin和html模版(例如：art-template)時(shí)，修改html和css不會(huì)觸發(fā)熱更新，只有js變動(dòng)可以觸發(fā)。因?yàn)檫@些loader沒(méi)有實(shí)現(xiàn)hmr相關(guān)api，可以通過(guò)安裝css-hot-loader等來(lái)hack
有個(gè)簡(jiǎn)便方法，配置devServer：watchContentBase: true，開(kāi)啟watch模式，文件有改動(dòng)就會(huì)觸發(fā)自動(dòng)刷新，雖然性能稍差。

npm安裝pug，記住不是pug-loader，也不用配置vue-loader，只需在template標(biāo)簽中指定lang=pug，就可以愉快的使用pug語(yǔ)法了，比起html看起來(lái)簡(jiǎn)潔多了。

以前只用webpack寫(xiě)單頁(yè)引用，index.html就是個(gè)空殼，后來(lái)也有一些純展示頁(yè)面，包含多個(gè)html文件，也想用webpack，畢竟各種loader太好用了。這時(shí)候就需要好好利用html-webpack-plugin了。直接上一個(gè)webpack配置，基于vue-simple的webpack配置做了些修改，同時(shí)參考了歪鬧大神的webpack多頁(yè)面教程，利用glod獲取文件名，自動(dòng)生成html-webpack-plugin配置，so geek！利用pug寫(xiě)html，scss寫(xiě)css，作為一個(gè)頁(yè)面仔，也不那么無(wú)聊了，效率也是杠杠滴。

let path = require("path");
let webpack = require("webpack");
let ExtractTextPlugin = require("extract-text-webpack-plugin");
let HtmlWebpackPlugin = require("html-webpack-plugin");
let glob = require("glob");

// js名必須與html的fileName對(duì)應(yīng)
let entry = (() => {
    let obj = {};
    getEntry("src/views/pages/*.pug").forEach(fileName => {
        obj[fileName] = "./src/js/" + fileName + ".js";
    });
    return obj;
})();

module.exports = {
    entry: entry,
    output: {
        path: path.resolve(__dirname, "./dist"),
        publicPath: "/dist/",
        filename: "js/[name].js",
        // chunkFilename: "js/[name][id].chunk.js", // 公共代碼塊
    },
    externals: {
        // "vue": "Vue",
        // "jquery": "jQuery",
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                loader: "vue-loader",
                options: {
                    loaders: {
                        scss: ExtractTextPlugin.extract({
                            fallback: "vue-style-loader",
                            use: "css-loader!sass-loader",
                        }),
                    }
                }
            },
            {
                test: /.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            },
            // 不要使用options配置url-loader webpack會(huì)報(bào)錯(cuò)
            {
                test: /.(png|jpe?g|gif|svg)(?.*)?$/,
                loader: "url-loader?limit=10000&name=img/[name].[hash:7].[ext]",
            },
            {
                test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
                loader: "file-loader?limit=10000&name=img/[name].[hash:7].[ext]",
            },
            {
                test: /.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader!postcss-loader!sass-loader"
                })
            },
            {
                test: /.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader!postcss-loader"
                })
            },
            {
                test: /.html$/,
                loader: "html-loader?attrs=img:src img:data-src"
            },
            {
                test: /.pug$/,
                loader: "pug-loader"
            },
        ]
    },
    resolve: {
        extensions: [".js", ".vue", ".json"],
        alias: {}
    },
    devServer: {
        port: 8888,
        historyApiFallback: true,
        stats: "minimal",  // 輸入精簡(jiǎn)信息
        overlay: true, // 將錯(cuò)誤顯示在html之上
        proxy: {
            "/api": {
                target: "http://localhost:9999",
                secure: false,
                changeOrigin: true,
                // pathRewrite: {"^/api": ""},
            }
        }
    },
    performance: {
        hints: false
    },
    devtool: "#eval-source-map",
    plugins: [
        new webpack.HotModuleReplacementPlugin(), // 熱加載

        // new webpack.ProvidePlugin({
        //     $: "jquery",
        //     jQuery: "jquery",
        // }),

        new ExtractTextPlugin("css/[name].css"), //多帶帶使用link標(biāo)簽加載css并設(shè)置路徑，相對(duì)于output配置中的publicPath

    ],
};

if (process.env.NODE_ENV === "production") {
    module.exports.devtool = "#source-map";
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: ""production""
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ]);
}

// 自動(dòng)生htmlPlugins
getEntry("src/views/pages/*.pug").forEach(fileName => {
    let conf = {
        filename: fileName + ".html", //生成的html存放路徑，相對(duì)于path
        template: "src/views/pages/" + fileName + ".pug", //html模板路徑
        inject: true,
        hash: true,
        minify: {
            removeComments: true,
            minifyJS: true,
        },
        chunks: [fileName],
    };
    module.exports.plugins.push(new HtmlWebpackPlugin(conf));
});

// 獲取文件名函數(shù)
function getEntry(viewsPath) {
    let files = glob.sync(viewsPath);
    let entries = [];
    let entry, basename, extname;

    for (let i = 0; i < files.length; i++) {
        entry = files[i];
        extname = path.extname(entry); // 擴(kuò)展名 eg: .html
        basename = path.basename(entry, extname);  // eg: index
        entries.push(basename);
    }
    return entries;
}

alias：{

"@": path.resolve(__dirname, "src")

}

import路徑中使用別名是一個(gè)很好的實(shí)踐，將@指向src，我們import的時(shí)候以@/開(kāi)頭，在各層目錄里就能用各種../

如果你想在css或html使用@，請(qǐng)?jiān)谇懊婕由蟸告訴webpack用require處理他。

例如在是scss里導(dǎo)入其他node_modules里的css文件 @import "~swiper/dist/css/style.css"

例如在是scss里導(dǎo)入其他src下的css文件 @import "~@/css/mixin.css"