摘要：是用來做瀏覽器兼容的，這個必須要配置，否則在打包的時候就會報錯，在這個中我們引用了之前安裝的，這個是用來自動匹配瀏覽器來補全前綴的，然后我們設(shè)置為最近五個瀏覽器版本。

上一篇文章講述了如何安裝和配置webpack的基礎(chǔ)依賴，可以看鏈接描述

這篇文章我們來看看如何配置webpack最重要的配置文件webpack.config.js

首先我們先在根目錄下新建一個webpack.config.js,然后開始配置
首先我們需要寫一個moudle.exports={},我們所有的配置項都需要在這里面配置，包括entry（文件入口），output（文件出口），module（里面配置一些loader）等等
具體代碼如下

module.exports = {
    entry:"./src/js/index.js",//入口文件
    output:{
        filename:"layer.js",    //輸出的文件名
        path : __dirname + "/dist"    //輸出文件路徑
    },
}

其中entry是我們要打包的js文件，output是我們打包之后的js文件，filename是打包后的文件名，path是我們的輸出路徑，其中__dirname 表示當(dāng)前路徑。
好了，我們在src（和webpack.config.js以及package.json同級）目錄下創(chuàng)建一個js文件夾，然后在其中新建一個index.js，里面隨便寫上一點什么，在這里我是寫了一個alert，然后我們執(zhí)行打包操作
在命令行中進(jìn)入當(dāng)前項目的路徑，然后輸入

webpack --mode development

在4.0版本之前我們可以使用webpack來執(zhí)行打包，但是在4.0之后，webpack分成了開發(fā)環(huán)境和生產(chǎn)環(huán)境，webpack --mode development表示的開發(fā)環(huán)境下的打包， webpack --mode production表示是在實際項目上線時執(zhí)行的打包。
那么我們打包之后的結(jié)果如下圖：

打包成功，然后我們發(fā)現(xiàn)在根目錄下出現(xiàn)了一個dist文件夾，并且里面出現(xiàn)了一個打包好的layer.js文件。
然后我們新建一個layer.html文件，引入打包好后的layer.js，發(fā)現(xiàn)能達(dá)到和index.js一樣的效果
代碼如下：
layer.html:

index.js

alert("webpack");

這表明我們可以正常打包了。

強大的webapck loader功能
光是js的打包并不能滿足我們的要求，我們在實際開發(fā)中也需要引用和打包一些其他的文件，比如less，sass，css，圖片等等，所以我們需要配置一些loader來完成這些文件的打包。

首先我們先來看看js的loader吧，現(xiàn)在很多js都是用es6來寫的，我們需要用webpack使他變成瀏覽器能識別的es5代碼。
首先我們需要在項目根目錄下安裝一個babel-loader,通過這個包將es6代碼轉(zhuǎn)換為es5代碼

npm install babel-loader --save-dev
npm install babel --save-dev
npm install babel-core --save-dev

然后我們在webpack.config.js新增一個module，然后在里面配置babel-loader，代碼如下：

module.exports = {
    entry:"./src/js/index.js",//入口文件
    output:{
        filename:"layer.js",    //輸出的文件名
        path : __dirname + "/dist"    //輸出文件路徑
    },
    module:{
        rules:[
            {
                test:/.js$/, 
                use:[
                    {loader:"babel-loader"}
                ]
            }
        ]
    },
}

在這之中我使用了webapck4的use來導(dǎo)入loader，當(dāng)然也可以使用webpack4以下的loaders來導(dǎo)入loader，webpack4對于這兩種導(dǎo)入方式都支持。
然后我們打包一下就可以將es6的代碼轉(zhuǎn)換成瀏覽器可以識別的es5代碼了

接下來是比較重要的css-loader了，這個我們需要下的包就有些多了
下面是需要安裝的包，我們一次性安裝完好了

npm install css-loader style-loader postcss-loader autoprefixer --save-dev

然后我們在rules里面進(jìn)行配置
代碼如下:

module.exports = {
    entry:"./src/js/index.js",//入口文件
    output:{
        filename:"layer.js",    //輸出的文件名
        path : __dirname + "/dist"    //輸出文件路徑
    },
    module:{
        rules:[
            {
                test:/.js$/, 
                use:[
                    {loader:"babel-loader"}
                ]
            },
            {
                test: /.css$/,
                use: [
                    {loader:"style-loader"}, 
                    {loader:"css-loader",
                    options: {
                        importLoaders: 1
                      }
                    },
                    {loader:"postcss-loader",
                        options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found
                            plugins:(loader) => [
                                require("autoprefixer")(
                                    {broswers:["last 5 versions"]}
                                ), //CSS瀏覽器兼容
                            ]
                        }
                    }
                ]
            }/*解析css, 并把css添加到html的style標(biāo)簽里*/
        ]
    },
}

其中css-loader是解析css文件的，style-loader是將css文件通過style的方式去引入，在css-loader中我們通過options給css-loader額外配置了一個importLoaders參數(shù)，這個參數(shù)表示在css-loader之后指定幾個數(shù)量的loader來處理import進(jìn)來的資源，這里設(shè)定為1。
postcss是用來做css瀏覽器兼容的，這個loader必須要配置options，否則在打包的時候就會報錯No PostCSS Config found，在這個options中我們引用了之前安裝的autoprefixer，這個是用來自動匹配瀏覽器來補全前綴的，然后我們設(shè)置為最近五個瀏覽器版本。注意這些loader的排序方式不能改變，必須是style-loader在css-loader之前，css-loader在postcss-loader之前，這是因為webpack的數(shù)組是從后往前解析的。
然后我們在src文件夾下面建立一個css文件夾，在里面建立layer.css文件，寫一些樣式進(jìn)去，然后在index.js文件中，通過commonjs的方式去引入這個css文件，具體代碼如下
layer.css

.test1{
    width: 100px;
    height: 100px;
    background: blue;
}

index.js

require("../css/layer.css");

const a = "webapck";
alert(a);

打包之后，運行效果如圖所示

表明我們的css文件也成功打包了

接下來是圖片的解析，我們也需要安裝一些loader，代碼如下：

npm install  url-loader file-loader --save-dev

同樣的我們需要在rules中去配置這個loader，具體配置代碼如下：

{
    test: /.(jpg|png|gif|svg)$/, 
    use: [
        {
            loader:"url-loader",
                        options:{
                            limit: 500,//圖片小于500的話就把圖片轉(zhuǎn)為base64格式
                outputPath: "assets/images/",
                name: "[hash].[ext]",
                        }
        }
    ]
}

在這個配置中我們可以識別以jpg,png,gif,svg為后綴名的圖片，并且將他們打包，在webpack4中，我們用了功能更為強大的url-loader去代替了file-loader（url-loader中內(nèi)置了file-loader的功能），并且我們配置了一系列的options，下面就挨個來解釋這些配置項的用途。
limit是對于圖片大小的判斷，低于我們給定的數(shù)就會被轉(zhuǎn)換成base64的格式，單位是字節(jié)。
output則是圖片打包后的保存路徑，name是文件打包后的名字，在這里我用了[hash]，這會使文件打包過后的名字是一串哈希值
配置完成之后我們來試驗一番吧。
首先我們先在src文件夾中創(chuàng)建一個img用來放置待打包的圖片，然后在css中去引用這些圖片，
然后運行看看是否正常打包
代碼如下
layer.css

.test1{
    width: 100px;
    height: 100px;
    background: blue;
}
.test2{
    width: 100px;
    height: 100px;
    background-image: url(../img/1.jpg);
}

我們發(fā)現(xiàn)在dist目錄下生成了一個新的asset目錄，里面就是我們打包的圖片，而layer.html也能看到打包正常，但是圖片確沒有正常被引用，如下圖所示

似乎圖片的路徑出了點問題，這是因為圖片是靜態(tài)資源，加載靜態(tài)資源我們需要在output中配置一個名為publicPath的參數(shù)來正確的加載路徑
具體代碼如下

output:{
        filename:"layer.js",    //輸出的文件名
        publicPath:"./dist/",
        path : __dirname + "/dist"    //輸出文件路徑
    }

在配置完publicPath之后，我們再次執(zhí)行打包命令，然后看看layer.html，效果如圖

圖片的加載路徑正確了，背景圖也展現(xiàn)出來了。說明我們的配置是正確的

似乎忘了什么？現(xiàn)在樣式文件不光有css，還有l(wèi)ess和sass，這兩個文件的打包也是需要loader的，所以我們來配置這兩個文件的打包吧
老規(guī)矩，先安裝loader

npm install less sass less-loader sass-loader --save-dev

配置可以和cssloader的配置一樣，不過我們需要注意一下需要修改一下識別的文件，分別是sass和less，具體配置如下

{
                    test: /.less$/,
                    use: [
                    {loader:"style-loader"}, 
                    {loader:"css-loader",
                        options: {
                            importLoaders: 1
                          }
                    },
                    {loader:"postcss-loader",
                        options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found
                            plugins:(loader) => [
                                require("autoprefixer")(
                                    {broswers:["last 5 versions"]}
                                ), //CSS瀏覽器兼容
                            ]
                        }
                    },
                    {loader:"less-loader"}
                    ]
                },/*解析less, 把less解析成瀏覽器可以識別的css語言*/
                {
                    test: /.sass$/,
                    use: [
                    {loader:"style-loader"}, 
                    {loader:"css-loader",
                        options: {
                            importLoaders: 1
                          }
                    },
                    {loader:"postcss-loader",
                        options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found
                            plugins:(loader) => [
                                require("autoprefixer")(
                                    {broswers:["last 5 versions"]}
                                ), //CSS瀏覽器兼容
                            ]
                        }
                    },
                    {loader:"sass-loader"}
                    ]
                }/*解析sass, 把sass解析成瀏覽器可以識別的css語言*/

配置完這個之后我們也可以打包less和sass文件了

有些時候我們需要在html文件中引入html文件，這種情況下我們就需要導(dǎo)入html-loader

npm install html-loader --save-dev

配置如下

{
    test: /.html$/, 
    use: [
        {loader:"html-loader"}
    ]
    }

配置完了我們就可以打包html文件了

最終webpack.config.js的代碼如下

module.exports = {
    entry:"./src/js/index.js",//入口文件
    output:{
        filename:"layer.js",    //輸出的文件名
        publicPath:"./dist/",
        path : __dirname + "/dist"    //輸出文件路徑
    },
    module:{
        rules:[
            {
                test:/.js$/, 
                use:[
                    {loader:"babel-loader"}
                ]
            },
            {
                test: /.css$/,
                use: [
                    {loader:"style-loader"}, 
                    {loader:"css-loader",
                    options: {
                        importLoaders: 1
                      }
                    },
                    {loader:"postcss-loader",
                        options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found
                            plugins:(loader) => [
                                require("autoprefixer")(
                                    {broswers:["last 5 versions"]}
                                ), //CSS瀏覽器兼容
                            ]
                        }
                    }
                ]
            },/*解析css, 并把css添加到html的style標(biāo)簽里*/
            {
                test: /.(jpg|png|gif|svg)$/, 
                use: [
                    {
                        loader:"url-loader",
                        options:{
                            limit: 500,//圖片小于500的話就把圖片轉(zhuǎn)為base64格式
                            outputPath: "assets/images/",
                            name: "[hash].[ext]",
                        }
                    }
                ]
           },
           {
                test: /.less$/,
                use: [
                {loader:"style-loader"}, 
                {loader:"css-loader",
                    options: {
                        importLoaders: 1
                      }
                },
                {loader:"postcss-loader",
                    options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found
                        plugins:(loader) => [
                            require("autoprefixer")(
                                {broswers:["last 5 versions"]}
                            ), //CSS瀏覽器兼容
                        ]
                    }
                },
                {loader:"less-loader"}
                ]
            },/*解析less, 把less解析成瀏覽器可以識別的css語言*/
            {
                test: /.sass$/,
                use: [
                {loader:"style-loader"}, 
                {loader:"css-loader",
                    options: {
                        importLoaders: 1
                      }
                },
                {loader:"postcss-loader",
                    options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found
                        plugins:(loader) => [
                            require("autoprefixer")(
                                {broswers:["last 5 versions"]}
                            ), //CSS瀏覽器兼容
                        ]
                    }
                },
                {loader:"sass-loader"}
                ]
            },/*解析sass, 把sass解析成瀏覽器可以識別的css語言*/
            {
                test: /.html$/, 
                use: [
                    {loader:"html-loader"}
                ]
            }
        ]
    },
}

上面講的是打包一個js文件的情況，在實際的開發(fā)應(yīng)用中我們的js文件顯然不止一個，這時候我們需要多個入口文件來執(zhí)行打包，有以下兩種方式可供大家選擇
一、以一個數(shù)組的方式來作為文件的入口
代碼如下

entry:["./src/js/index.js","./src/js/index2.js"],//入口文件
output:{
        filename:"layer.js",    //輸出的文件名
        publicPath:"./dist/",
        path : __dirname + "/dist"    //輸出文件路徑
    },

這時候index.js和index2.js會被一起打包到layer.js中，我們在index2.js中打印一個123，打包之后查看layer.js，發(fā)現(xiàn)打包過后的文件已經(jīng)打包完成了這兩個文件，如圖所示

二、以一個對象作為入口的文件
代碼如下

entry:{
        a:"./src/js/index.js",
        b:"./src/js/index2.js"
        },//入口文件
    output:{
        filename:"layer.js",    //輸出的文件名
        publicPath:"./dist/",
        path : __dirname + "/dist"    //輸出文件路徑
    },

這個時間我們執(zhí)行打包，發(fā)現(xiàn)我們只能打包其中一個js，另一個js并不能被打包進(jìn)來，
如下圖所示

我們只有一個chunk值，官網(wǎng)也說這種情況下，我們在output這個出口文件下也需要重新配置一下，我們的filename不再是一個固定的文件名了，而應(yīng)該是 "[name].js"，這樣我們打包的時候，就會自動根據(jù)對象的屬性名生成對應(yīng)的文件，有幾個對象就會生成幾個打包對象，那么就讓我們打包一下看看吧。

這是我們的打包結(jié)果，看來是打包成功了，并且生成了a和b兩個js文件
我們在layer.html中引入這兩個js，發(fā)現(xiàn)和之前的layer.js是一樣的效果。

你以為這樣就完結(jié)了嗎，并沒有，之前我們打包完成之后還是需要手動去引入打包過后的js，這種方法無疑是極為不好的，webpack為我們提供了一個插件，來解決這個問題。
首先我們需要安裝這個插件

npm install html-loader html-webpack-plugin --save-dev

安裝好了之后，我們在webpack.config中去引用這個插件

const htmlWebpackPlugin = require("html-webpack-plugin");

并且在module.exports中新增一個plugins配置項

plugins:[
            new htmlWebpackPlugin({
                template:"layer.html",
                filename:"layer.html",
            })
        ]

這時候我們執(zhí)行打包操作，運行結(jié)果如下

我們打包了圖片，兩個js文件和layer.html這個文件，然后我們發(fā)現(xiàn)dist目錄下也多了一個layer.html，這個html自動引入了我們打包完成之后的js

表明我們打包成功，以后也不需要擔(dān)心去手動引用打包之后的js的問題了。

接下來我們關(guān)注一下公共模塊的打包，在實際項目中，我們是有很多個js文件的，這些js文件或多或少有一些公共的模塊，webpack可以將其分離出來
首先我們需要在項目中再次安裝一次webpack，因為我們需要使用webpack的一些插件
在webpack4之前的版本中，打包公共模塊是用如下的方式

var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin("common");
//把公共模塊提取出來, 并取名為"common"(名字自起), webpack之后再out文件夾下生成common.js, 測試時記得引入提取出來的公共模塊js文件

然后在plugins配置中增加一個CommonsChunkPlugin 值就可以了。
但是在webpack4，這種方法已經(jīng)不能使用了，webpack給我們提供了一種新的方式去提取公共文件使用spiltchunk來代替commonschunkplugin
具體配置如下

新增一個optimization配置項，和plugins同級，

 optimization: {
            runtimeChunk: {
                name: "manifest"
            },
            splitChunks: {
                cacheGroups: {
                    commons: {
                        test: /[/]node_modules[/]/,
                        name: "vendor",
                        chunks: "all"
                    }
                }
            }
        },

執(zhí)行打包

打包成功，我們發(fā)現(xiàn)dist文件夾下面多了一個manifest.js，這個js中放的就是a和b的公共模塊

接下來我們來使用webpack服務(wù)器，
首先在項目目錄中安裝

npm install webpack-dev-server  

在webapck4中，我們可以通過一個devServer的配置項來修改webpack服務(wù)器的內(nèi)容

devServer: {
            contentBase: path.join(__dirname, "src/dist"),
            host: "localhost",
            port:8496,
            compress: true//是否壓縮
        },

host和port共同組成了我們的網(wǎng)絡(luò)路徑，port是端口號，這個端口號是可以修改的，然后我們需要引入一個新的插件path

const path = require("path");

我們通過path的join方法來確定路徑，同時我們可以修改一下output的path，使其變?yōu)?/p>

path :  path.resolve(__dirname , "/dist")    //輸出文件路徑

然后我們執(zhí)行

webpack-dev-server --mode development

（可能需要在項目中重新安裝一次webpack-cli）
運行結(jié)果如下圖所示

三行信息表明我們的路徑
編譯成功，項目已經(jīng)成功發(fā)布到8496的端口去了
我們可以使用^C來終止該命令

webpack還有一些其他的插件命令可以使用，如

webpack.optimize.UglifyJsPlugin({minimize: true});//代碼壓縮//只支持es5
require("extract-text-webpack-plugin");
//將css獨立引入變成link標(biāo)簽形式, 使用該插件需要獨立下載"npm install extract-text-webpack-plugin --save-dev", 同時下面的rules也必須更改

這里就不一一贅述了

最后附上我的webpack.config.js的配置

const htmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
    entry:{
        a:"./src/js/index.js",
        b:"./src/js/index2.js"
        },//入口文件
    output:{
        filename:"[name].js",    //輸出的文件名
        publicPath:"./dist/",
        path :  path.resolve(__dirname , "/dist")    //輸出文件路徑
    },
     devServer: {
            contentBase: path.join(__dirname, "src/dist"),
            host: "localhost",
            port:8496,
            compress: true
        },
    module:{
        rules:[
            {
                test:/.js$/, 
                use:[
                    {loader:"babel-loader"}
                ]
            },
            {
                test: /.css$/,
                use: [
                    {loader:"style-loader"}, 
                    {loader:"css-loader",
                    options: {
                        importLoaders: 1
                      }
                    },
                    {loader:"postcss-loader",
                        options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found
                            plugins:(loader) => [
                                require("autoprefixer")(
                                    {broswers:["last 5 versions"]}
                                ), //CSS瀏覽器兼容
                            ]
                        }
                    }
                ]
            },/*解析css, 并把css添加到html的style標(biāo)簽里*/
            {
                test: /.(jpg|png|gif|svg)$/, 
                use: [
                    {
                        loader:"url-loader",
                        options:{
                            limit: 500,//圖片小于500的話就把圖片轉(zhuǎn)為base64格式
                            outputPath: "assets/images/",
                            name: "[hash].[ext]",
                        }
                    }
                ]
           },
           {
                test: /.less$/,
                use: [
                {loader:"style-loader"}, 
                {loader:"css-loader",
                    options: {
                        importLoaders: 1
                      }
                },
                {loader:"postcss-loader",
                    options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found
                        plugins:(loader) => [
                            require("autoprefixer")(
                                {broswers:["last 5 versions"]}
                            ), //CSS瀏覽器兼容
                        ]
                    }
                },
                {loader:"less-loader"}
                ]
            },/*解析less, 把less解析成瀏覽器可以識別的css語言*/
            {
                test: /.sass$/,
                use: [
                {loader:"style-loader"}, 
                {loader:"css-loader",
                    options: {
                        importLoaders: 1
                      }
                },
                {loader:"postcss-loader",
                    options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found
                        plugins:(loader) => [
                            require("autoprefixer")(
                                {broswers:["last 5 versions"]}
                            ), //CSS瀏覽器兼容
                        ]
                    }
                },
                {loader:"sass-loader"}
                ]
            },/*解析sass, 把sass解析成瀏覽器可以識別的css語言*/
            {
                test: /.html$/, 
                use: [
                    {loader:"html-loader"}
                ]
            }
        ]
    },
     optimization: {
            runtimeChunk: {
                name: "manifest"
            },
            splitChunks: {
                cacheGroups: {
                    commons: {
                        test: /[/]node_modules[/]/,
                        name: "vendor",
                        chunks: "all"
                    }
                }
            }
        },
    plugins:[
            new htmlWebpackPlugin({
                template:"layer.html",
                filename:"layer.html",
            })
        ]
}