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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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對應(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會報錯
            {
                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",  // 輸入精簡信息
        overlay: true, // 將錯誤顯示在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è)置路徑，相對于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
        })
    ]);
}

// 自動生htmlPlugins
getEntry("src/views/pages/*.pug").forEach(fileName => {
    let conf = {
        filename: fileName + ".html", //生成的html存放路徑，相對于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); // 擴展名 eg: .html
        basename = path.basename(entry, extname);  // eg: index
        entries.push(basename);
    }
    return entries;
}

alias：{

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

}

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

如果你想在css或html使用@，請在前面加上~告訴webpack用require處理他。

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

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