webpack的配置和安装（2）_ES2015(es6)

上一篇: webpack系列之loader的基本使用下一篇:[转+] axios 简介
webpack的配置和安装（2）

发布时间：2019-08-13 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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:

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="

    
        
        
    
    
        
    

" tITle="" data-original-title="复制">
      
      
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript" src="dist/layer.js" ></script>
    </body>
</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里面进行配置
代码如下:

      
      
      broswers:['last 5 versions']}
                                ), //CSS浏览器兼容
                            ]
                        }
                    }
                ]
            }/*解析css, 并把css添加到html的style标签里*/
        ]
    },
}
" title="" data-original-title="复制">
      
      
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还有一些其他的插件命令可以使用，如

      
      
      @H_122_1261@
      
      
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的配置

      
      
      ;manifest"
            },
            splitChunks: {
                cacheGroups: {
                    commons: {
                        test: /[\/]node_modules[\/]/,
                        name: "vendor",
                        chunks: "all"
                    }
                }
            }
        },
    plugins:[
            new htmlWebpackPlugin({
                template:'layer.html',
                filename:'layer.html',
            })
        ]
}
" title="" data-original-title="复制">
      
      

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',
            })
        ]
}
脚本宝典总结

以上是脚本宝典为你收集整理的webpack的配置和安装（2）全部内容，希望文章能够帮你解决webpack的配置和安装（2）所遇到的问题。
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
上一篇: webpack系列之loader的基本使用下一篇:[转+] axios 简介
猜你在找的ES2015(es6)相关文章
vuex 基本入门和使用（二） 2019-08-19
默认参数如何在JavaScript ES6中工作 2018-11-14
JavaScript ES6功能：好的部件 2018-11-14
如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12
全站导航更多
最新ES2015(es6)教程
热门ES2015(es6)教程