摘要：面試你一般問你的原理，的原理，你有用那些優(yōu)化措施前端開發(fā)已經(jīng)模塊化，它改進(jìn)了代碼庫(kù)的封裝和結(jié)構(gòu)。這么說負(fù)責(zé)的是處理源文件的如，一次處理一個(gè)文件。小心的運(yùn)用他們。因?yàn)殡S著項(xiàng)目的增長(zhǎng)，它們會(huì)變得很難馴服。

還是以前一樣，有些概念面試可能會(huì)考，我都用*標(biāo)記了出來，兩句話就總結(jié)清楚其余的地方如果你想了解webpack，就仔細(xì)看看，雖然本教程不能讓你webpack玩的很6，但是懂操作流程夠了。面試你一般問你webpack的原理，Loader的原理，你有用那些優(yōu)化措施
前端開發(fā)已經(jīng)模塊化，它改進(jìn)了代碼庫(kù)的封裝和結(jié)構(gòu)。打包工具已經(jīng)成為了一個(gè)項(xiàng)目必不可少的部分，
如今這兒有幾種可能的選擇，例如webpack，grunt，gulp等。
webpack因?yàn)樗墓δ芎蛿U(kuò)展性在過去的幾年中，受到非常大的歡迎。但是webpack的配置總是讓人覺得很困惑，
今天我們將從一個(gè)空的配置文件逐步完成一個(gè)完整的設(shè)置進(jìn)行打包文件。

不像大多數(shù)的模塊打包機(jī)，webpack是收把項(xiàng)目當(dāng)作一個(gè)整體，通過一個(gè)給定的的主文件，webpack將從這個(gè)文件開始找到你的項(xiàng)目的所有依賴文件，使用loaders處理它們，最后打包成一個(gè)或多個(gè)瀏覽器可識(shí)別的js文件

首先添加我們即將使用的包：

npm install webpack webpack-dev-server --save-dev

webpack是我們需要的模塊打包機(jī)，webpack-dev-server用來創(chuàng)建本地服務(wù)器，監(jiān)聽你的代碼修改，并自動(dòng)刷新修改后的結(jié)果。這些是有關(guān)devServer的配置

contentBase,  // 為文件提供本地服務(wù)器
port, // 監(jiān)聽端口，默認(rèn)8080
inline, // 設(shè)置為true,源文件發(fā)生改變自動(dòng)刷新頁(yè)面
historyApiFallback  // 依賴HTML5 history API,如果設(shè)置為true,所有的頁(yè)面跳轉(zhuǎn)指向index.html
devServer:{
    contentBase: "./src" // 本地服務(wù)器所加載的頁(yè)面所在的目錄
    historyApiFallback: true, // 不跳轉(zhuǎn)
    inline: true // 實(shí)時(shí)刷新
}
然后我們?cè)诟夸浵聞?chuàng)建一個(gè)"webpack.config.js"，在"package.json"添加兩個(gè)命令用于本地開發(fā)和生產(chǎn)發(fā)布
    

"scripts": {
            "start": "webpack-dev-server",
            "build": "webpack"
        }

在使用webpack命令的時(shí)候，他將接受webpack的配置文件，除非我們使用其他的操作

entry: 用來寫入口文件，它將是整個(gè)依賴關(guān)系的根

var baseConfig = {
        entry: "./src/index.js"
    }

當(dāng)我們需要多個(gè)入口文件的時(shí)候，可以把entry寫成一個(gè)對(duì)象

var baseConfig = {
        entry: {
            main: "./src/index.js"
        }
    }

我建議使用后面一種方法，因?yàn)樗囊?guī)模會(huì)隨你的項(xiàng)目增大而變得繁瑣

output: 即使入口文件有多個(gè)，但是只有一個(gè)輸出配置

var path = require("path")
    var baseConfig = {
        entry: {
            main: "./src/index.js"
        },
        output: {
            filename: "main.js",
            path: path.resolve("./build")
        }
    }
    module.exports = baseConfig

如果你定義的入口文件有多個(gè)，那么我們需要使用占位符來確保輸出文件的唯一性

output: {
        filename: "[name].js",
        path: path.resolve("./build")
    }

如今這么少的配置，就能夠讓你運(yùn)行一個(gè)服務(wù)器并在本地使用命令npm start或者npm run build來打包我們的代碼進(jìn)行發(fā)布

loader的作用：
1、實(shí)現(xiàn)對(duì)不同格式的文件的處理，比如說將scss轉(zhuǎn)換為css，或者typescript轉(zhuǎn)化為js
2、轉(zhuǎn)換這些文件，從而使其能夠被添加到依賴圖中
loader是webpack最重要的部分之一，通過使用不同的Loader，我們能夠調(diào)用外部的腳本或者工具，實(shí)現(xiàn)對(duì)不同格式文件的處理，loader需要在webpack.config.js里邊多帶帶用module進(jìn)行配置，配置如下：

test: 匹配所處理文件的擴(kuò)展名的正則表達(dá)式（必須）
    loader: loader的名稱（必須）
    include/exclude: 手動(dòng)添加處理的文件，屏蔽不需要處理的文件（可選）
    query: 為loaders提供額外的設(shè)置選項(xiàng)
    ex: 
        var baseConfig = {
            // ...
            module: {
                rules: [
                    {
                        test: /*匹配文件后綴名的正則*/,
                        use: [
                            loader: /*loader名字*/,
                            query: /*額外配置*/
                        ]
                    }
                ]
            }
        }

要是loader工作，我們需要一個(gè)正則表達(dá)式來標(biāo)識(shí)我們要修改的文件，然后有一個(gè)數(shù)組表示
我們表示我們即將使用的Loader,當(dāng)然我們需要的loader需要通過npm 進(jìn)行安裝。例如我們需要解析less的文件，那么webpack.config.js的配置如下：

        

var baseConfig = {
                entry: {
                    main: "./src/index.js"
                },
                output: {
                    filename: "[name].js",
                    path: path.resolve("./build")
                },
                devServer: {
                    contentBase: "./src",
                    historyApiFallBack: true,
                    inline: true
                },
                module: {
                    rules: [
                        {
                            test: /.less$/,
                            use: [
                                {loader: "style-loader"},
                                {loader: "css-loader"},
                                {loader: "less-loader"}
                            ],
                            exclude: /node_modules/
                        }
                    ]
                }
            }

這里介紹幾個(gè)常用的loader：
babel-loader： 讓下一代的js文件轉(zhuǎn)換成現(xiàn)代瀏覽器能夠支持的JS文件。
babel有些復(fù)雜，所以大多數(shù)都會(huì)新建一個(gè).babelrc進(jìn)行配置
css-loader,style-loader:兩個(gè)建議配合使用，用來解析css文件，能夠解釋@import,url()如果需要解析less就在后面加一個(gè)less-loader
file-loader: 生成的文件名就是文件內(nèi)容的MD5哈希值并會(huì)保留所引用資源的原始擴(kuò)展名
url-loader: 功能類似 file-loader,但是文件大小低于指定的限制時(shí)，可以返回一個(gè)DataURL事實(shí)上，在使用less,scss,stylus這些的時(shí)候，npm會(huì)提示你差什么插件，差什么，你就安上就行了

plugins和loader很容易搞混，說都是外部引用有什么區(qū)別呢？ 事實(shí)上他們是兩個(gè)完全不同的東西。這么說loaders負(fù)責(zé)的是處理源文件的如css、jsx，一次處理一個(gè)文件。而plugins并不是直接操作單個(gè)文件，它直接對(duì)整個(gè)構(gòu)建過程起作用下面列舉了一些我們常用的plugins和他的用法
ExtractTextWebpackPlugin: 它會(huì)將入口中引用css文件，都打包都獨(dú)立的css文件中，而不是內(nèi)嵌在js打包文件中。下面是他的應(yīng)用

    

var ExtractTextPlugin = require("extract-text-webpack-plugin")
        var lessRules = {
            use: [
                {loader: "css-loader"},
                {loader: "less-loader"}
            ]
        }
        
        var baseConfig = {
            // ... 
            module: {
                rules: [
                    // ...
                    {test: /.less$/, use: ExtractTextPlugin.extract(lessRules)}
                ]
            },
            plugins: [
                new ExtractTextPlugin("main.css")
            ]
        }

HtmlWebpackPlugin:
作用： 依據(jù)一個(gè)簡(jiǎn)單的index.html模版，生成一個(gè)自動(dòng)引用你打包后的js文件的新index.html

        

var HTMLWebpackPlugin = require("html-webpack-plugin")
            var baseConfig = {
                // ...
                plugins: [
                    new HTMLWebpackPlugin()
                ]
            }

HotModuleReplacementPlugin: 它允許你在修改組件代碼時(shí)，自動(dòng)刷新實(shí)時(shí)預(yù)覽修改后的結(jié)果注意永遠(yuǎn)不要在生產(chǎn)環(huán)境中使用HMR。這兒說一下一般情況分為開發(fā)環(huán)境，測(cè)試環(huán)境，生產(chǎn)環(huán)境。
用法如 new webpack.HotModuleReplacementPlugin()

    webapck.config.js的全部?jī)?nèi)容
    

const webpack = require("webpack")
        const HtmlWebpackPlugin = require("html-webpack-plugin")
        var ExtractTextPlugin = require("extract-text-webpack-plugin")
        var lessRules = {
            use: [
                {loader: "css-loader"},
                {loader: "less-loader"}
            ]
        }
        module.exports = {
            entry: {
                    main: "./src/index.js"
                },
                output: {
                    filename: "[name].js",
                    path: path.resolve("./build")
                },
                devServer: {
                    contentBase: "/src",
                    historyApiFallback: true,
                    inline: true,
                    hot: true
                },
                module: {
                    rules: [
                        {test: /.less$/, use: ExtractTextPlugin.extract(lessRules)}
                    ]
                },
                plugins: [
                new ExtractTextPlugin("main.css")
            ]
        }
    

目前為止，在開發(fā)階段的東西我們已經(jīng)基本完成了。但是在產(chǎn)品階段，還需要對(duì)資源進(jìn)行別的
處理，例如壓縮，優(yōu)化，緩存，分離css和js。首先我們來定義產(chǎn)品環(huán)境

var ENV = process.env.NODE_ENV
    var baseConfig = {
        // ... 
        plugins: [
            new webpack.DefinePlugin({
                "process.env.NODE_ENV": JSON.stringify(ENV)
            })
        ]
    }

然后還需要修改我們的script命令

    

"scripts": {
            "start": "NODE_ENV=development webpack-dev-server",
            "build": "NODE_ENV=production webpack"
        }

process.env.NODE_ENV 將被一個(gè)字符串替代，它運(yùn)行壓縮器排除那些不可到達(dá)的開發(fā)代碼分支。
當(dāng)你引入那些不會(huì)進(jìn)行生產(chǎn)的代碼，下面這個(gè)代碼將非常有用。

    

if (process.env.NODE_ENV === "development") {
            console.warn("這個(gè)警告會(huì)在生產(chǎn)階段消失")
        }

下面介紹幾個(gè)插件用來優(yōu)化代碼
OccurenceOrderPlugin: 為組件分配ID,通過這個(gè)插件webpack可以分析和優(yōu)先考慮使用最多 的模塊，然后為他們分配最小的ID
UglifyJsPlugin: 壓縮代碼
下面是他們的使用方法
var baseConfig = {

// ...
 new webpack.optimize.OccurenceOrderPlugin()
 new webpack.optimize.UglifyJsPlugin()

}
然后在我們使用npm run build會(huì)發(fā)現(xiàn)代碼是壓縮的

webpack的配置文件的復(fù)雜度，依賴于你項(xiàng)目的需要。小心的運(yùn)用他們。因?yàn)殡S著項(xiàng)目的增長(zhǎng)，它們會(huì)變得很難馴服。內(nèi)容有點(diǎn)多，事實(shí)上總結(jié)起來也不是特別多，也就Loader，plugins。其他的地方都比較簡(jiǎn)單。這篇文章大概花了我三天的時(shí)間，網(wǎng)上看各種教程，然后看官網(wǎng)，真挺累的。這兒寫完我就去睡覺