webpack的配置和安装（2）

摘要：是用来做浏览器兼容的，这个必须要配置，否则在打包的时候就会报错，在这个中我们引用了之前安装的，这个是用来自动匹配浏览器来补全前缀的，然后我们设置为最近五个浏览器版本。

上一篇文章讲述了如何安装和配置webpack的基础依赖，可以看链接描述

这篇文章我们来看看如何配置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 表示当前路径。
好了，我们在src（和webpack.config.js以及package.json同级）目录下创建一个js文件夹，然后在其中新建一个index.js，里面随便写上一点什么，在这里我是写了一个alert，然后我们执行打包操作
在命令行中进入当前项目的路径，然后输入

webpack --mode development

在4.0版本之前我们可以使用webpack来执行打包，但是在4.0之后，webpack分成了开发环境和生产环境，webpack --mode development表示的开发环境下的打包， webpack --mode production表示是在实际项目上线时执行的打包。
那么我们打包之后的结果如下图：

打包成功，然后我们发现在根目录下出现了一个dist文件夹，并且里面出现了一个打包好的layer.js文件。
然后我们新建一个layer.html文件，引入打包好后的layer.js，发现能达到和index.js一样的效果
代码如下：
layer.html:

index.js

alert("webpack");

这表明我们可以正常打包了。

强大的webapck loader功能
光是js的打包并不能满足我们的要求，我们在实际开发中也需要引用和打包一些其他的文件，比如less，sass，css，图片等等，所以我们需要配置一些loader来完成这些文件的打包。

首先我们先来看看js的loader吧，现在很多js都是用es6来写的，我们需要用webpack使他变成浏览器能识别的es5代码。
首先我们需要在项目根目录下安装一个babel-loader,通过这个包将es6代码转换为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来导入loader，当然也可以使用webpack4以下的loaders来导入loader，webpack4对于这两种导入方式都支持。
然后我们打包一下就可以将es6的代码转换成浏览器可以识别的es5代码了

接下来是比较重要的css-loader了，这个我们需要下的包就有些多了
下面是需要安装的包，我们一次性安装完好了

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

然后我们在rules里面进行配置
代码如下:

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标签里*/
        ]
    },
}

其中css-loader是解析css文件的，style-loader是将css文件通过style的方式去引入，在css-loader中我们通过options给css-loader额外配置了一个importLoaders参数，这个参数表示在css-loader之后指定几个数量的loader来处理import进来的资源，这里设定为1。
postcss是用来做css浏览器兼容的，这个loader必须要配置options，否则在打包的时候就会报错No PostCSS Config found，在这个options中我们引用了之前安装的autoprefixer，这个是用来自动匹配浏览器来补全前缀的，然后我们设置为最近五个浏览器版本。注意这些loader的排序方式不能改变，必须是style-loader在css-loader之前，css-loader在postcss-loader之前，这是因为webpack的数组是从后往前解析的。
然后我们在src文件夹下面建立一个css文件夹，在里面建立layer.css文件，写一些样式进去，然后在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的话就把图片转为base64格式
                outputPath: "assets/images/",
                name: "[hash].[ext]",
                        }
        }
    ]
}

在这个配置中我们可以识别以jpg,png,gif,svg为后缀名的图片，并且将他们打包，在webpack4中，我们用了功能更为强大的url-loader去代替了file-loader（url-loader中内置了file-loader的功能），并且我们配置了一系列的options，下面就挨个来解释这些配置项的用途。
limit是对于图片大小的判断，低于我们给定的数就会被转换成base64的格式，单位是字节。
output则是图片打包后的保存路径，name是文件打包后的名字，在这里我用了[hash]，这会使文件打包过后的名字是一串哈希值
配置完成之后我们来试验一番吧。
首先我们先在src文件夹中创建一个img用来放置待打包的图片，然后在css中去引用这些图片，
然后运行看看是否正常打包
代码如下
layer.css

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

我们发现在dist目录下生成了一个新的asset目录，里面就是我们打包的图片，而layer.html也能看到打包正常，但是图片确没有正常被引用，如下图所示

似乎图片的路径出了点问题，这是因为图片是静态资源，加载静态资源我们需要在output中配置一个名为publicPath的参数来正确的加载路径
具体代码如下

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

在配置完publicPath之后，我们再次执行打包命令，然后看看layer.html，效果如图

图片的加载路径正确了，背景图也展现出来了。说明我们的配置是正确的

似乎忘了什么？现在样式文件不光有css，还有less和sass，这两个文件的打包也是需要loader的，所以我们来配置这两个文件的打包吧
老规矩，先安装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文件，这种情况下我们就需要导入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标签里*/
            {
                test: /.(jpg|png|gif|svg)$/, 
                use: [
                    {
                        loader:"url-loader",
                        options:{
                            limit: 500,//图片小于500的话就把图片转为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文件的情况，在实际的开发应用中我们的js文件显然不止一个，这时候我们需要多个入口文件来执行打包，有以下两种方式可供大家选择
一、以一个数组的方式来作为文件的入口
代码如下

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，发现打包过后的文件已经打包完成了这两个文件，如图所示

二、以一个对象作为入口的文件
代码如下

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

这个时间我们执行打包，发现我们只能打包其中一个js，另一个js并不能被打包进来，
如下图所示

我们只有一个chunk值，官网也说这种情况下，我们在output这个出口文件下也需要重新配置一下，我们的filename不再是一个固定的文件名了，而应该是 "[name].js"，这样我们打包的时候，就会自动根据对象的属性名生成对应的文件，有几个对象就会生成几个打包对象，那么就让我们打包一下看看吧。

这是我们的打包结果，看来是打包成功了，并且生成了a和b两个js文件
我们在layer.html中引入这两个js，发现和之前的layer.js是一样的效果。

你以为这样就完结了吗，并没有，之前我们打包完成之后还是需要手动去引入打包过后的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",
            })
        ]

这时候我们执行打包操作，运行结果如下

我们打包了图片，两个js文件和layer.html这个文件，然后我们发现dist目录下也多了一个layer.html，这个html自动引入了我们打包完成之后的js

表明我们打包成功，以后也不需要担心去手动引用打包之后的js的问题了。

接下来我们关注一下公共模块的打包，在实际项目中，我们是有很多个js文件的，这些js文件或多或少有一些公共的模块，webpack可以将其分离出来
首先我们需要在项目中再次安装一次webpack，因为我们需要使用webpack的一些插件
在webpack4之前的版本中，打包公共模块是用如下的方式

var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin("common");
//把公共模块提取出来, 并取名为"common"(名字自起), webpack之后再out文件夹下生成common.js, 测试时记得引入提取出来的公共模块js文件

然后在plugins配置中增加一个CommonsChunkPlugin 值就可以了。
但是在webpack4，这种方法已经不能使用了，webpack给我们提供了一种新的方式去提取公共文件使用spiltchunk来代替commonschunkplugin
具体配置如下

新增一个optimization配置项，和plugins同级，

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

执行打包

打包成功，我们发现dist文件夹下面多了一个manifest.js，这个js中放的就是a和b的公共模块

接下来我们来使用webpack服务器，
首先在项目目录中安装

npm install webpack-dev-server  

在webapck4中，我们可以通过一个devServer的配置项来修改webpack服务器的内容

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

host和port共同组成了我们的网络路径，port是端口号，这个端口号是可以修改的，然后我们需要引入一个新的插件path

const path = require("path");

我们通过path的join方法来确定路径，同时我们可以修改一下output的path，使其变为

path :  path.resolve(__dirname , "/dist")    //输出文件路径

然后我们执行

webpack-dev-server --mode development

（可能需要在项目中重新安装一次webpack-cli）
运行结果如下图所示

三行信息表明我们的路径
编译成功，项目已经成功发布到8496的端口去了
我们可以使用^C来终止该命令

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

webpack.optimize.UglifyJsPlugin({minimize: true});//代码压缩//只支持es5
require("extract-text-webpack-plugin");
//将css独立引入变成link标签形式, 使用该插件需要独立下载"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标签里*/
            {
                test: /.(jpg|png|gif|svg)$/, 
                use: [
                    {
                        loader:"url-loader",
                        options:{
                            limit: 500,//图片小于500的话就把图片转为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",
            })
        ]
}