专栏首页wfaceboss(3/24)轻松配置 webpack3.x入口、出口配置项

(3/24)轻松配置 webpack3.x入口、出口配置项

在上一节中我们只是简单的尝了一下webpack的鲜,对其有了基本的了解,对于上一节当中的打包方式,在实际开发中并不使用,而是通过webpack的配置文件的方式进行设置的,所以该节就在上一节的基础上学一下配置文件的大体结构以及入口、出口文件的配置。

1.新建配置文件webpack.config.js

webpack.config.js就是webpack的配置文件,需要自己在项目根目录下手动建立(如下图):

建立好后我们对其进行配置。下面展示一个没有内容的标准webpack配置模版。

 webpack.config.js:

module.exports={
    //入口文件的配置项
    entry:{},
    //出口文件的配置项
    output:{},
    //模块:例如解读CSS,图片如何转换,压缩
    module:{},
    //插件,用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

简单解释一下相关配置项:

  • entry:配置入口文件的地址,可以是单一入口,也可以是多入口。
  • output:配置出口文件的地址,在webpack2.X版本后,支持多出口配置。
  • module:配置模块,主要是解析CSS和图片转换压缩等功能。
  • plugins:配置插件,根据你的需要配置不同功能的插件。
  • devServer:配置开发服务功能。

1.1 entry选项(入口配置)

这个选项就是配置需要打包的文件一般是JavaScript文件(或CSS等其他文件),针对上一节的代码进行配置:

wepback.config.js中的entry选项:

//入口文件的配置项
entry:{
    //里面的entery是可以随便写的
    entry:'./src/entry.js'
},

1.2 output选项(出口配置)

出口配置是用来告诉webpack最后打包文件的地址和文件名称的。在上一节的基础上,我们需要把相关的文件打包到dist目录下,相关代码如下:

webpack.config.js的output选项:

    output:{
        //输出的路径,用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'bundle.js'
    },

配置好入口与出口文件的全部代码如下:

const path = require('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js',
    },
    //出口文件的配置项
    output:{
        //输出的路径,用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'bundle.js'
    },
    //模块:例如解读CSS,图片如何转换,压缩
    module:{},
    //插件,用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

const path = require('path');使用了const,这是ES6的语法,如果对ES6还不熟悉,可以看看 ECMAScript 6(ES6)

path.resolve(__dirname,’dist’)就是获取了项目的绝对路径。

filename:是打包后的文件名称,这里我们起名为bundle.js。

2.打包

上述代码写完后,可以在webstorm终端中直接输入webpack就会进行打包,如图:

结果就是在dist目录下产生一个bundle.js文件,如图:

3.多入口、多出口配置

在webpack3.x中配置多入口、多出口是非常简单的,只需新增在entry中新增文件路径、同时修改出口文件名称即可,具体看下例代码:

3.1. 在src目录下新建一个entry2.js文件

src/entry2.js:

alert("Hello")

3.2 webpack.config.js配置修改

修改后的代码如下:

const path = require('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js',
        //这里我们又引入了一个入口文件
        entry2:'./src/entry2.js'
    },
    //出口文件的配置项
    output:{
        //输出的路径,用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'[name].js'
    },
    //模块:例如解读CSS,图片如何转换,压缩
    module:{},
    //插件,用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

可以看到入口文件entry中和文件output行进行了增加和修改,在入口文件配置中,增加了一个entry2.js的入口文件,这时候要打包的就有了两个入口文件。在文件output中我们把原来的bundle.js修改成了[name].js

[name]的意思是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个文件。

3.3 修改后打包

打包后的结果如下图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

    通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧。

    wfaceboss
  • (19/24) webpack实战技巧:推荐使用的第三方类库打包方法

    在日常的开发中,总避免不了引入第三方的框架,比如常用的JQuery,此节我们来学习一下如何优雅并正确的用webpack引入第三方库。

    wfaceboss
  • (18/24) webpack实战技巧:快速入门webpack模块化配置

    具体操作为把上节中的webpack.config.js中的entry入口文件进行模块化设置,单独拿出来制作成一个模块。

    wfaceboss
  • webpack学习之入门实例

    webpack:前端打包神器,目前活跃度甚至超过了gulp、grunt等,使用webpack打包,简单快速,下面记录下webpack环境搭建以及基本使用: 1、...

    用户1141560
  • 【免费视频教程】webpack原理与实践【1】webpack预备知识

    打包工具帮你获得一些准备用于部署的js和css等,把它们转化为适合浏览器的可用的格式。

    web前端教室
  • 梳理 6 项 webpack 的性能优化

    webpack在启动后,会根据Entry配置的入口,递归解析所依赖的文件。这个过程分为「搜索文件」和「把匹配的文件进行分析、转化」的两个过程,因此可以从这两个角...

    Nealyang
  • 软件开发过程自动化原理及技术(完整示例)

    软件开发过程自动化原理及技术 一个简单完整的自动化示例 1   概述 关于本文,最开始只是想写一些关于 软件自动化测试开发 的文章,但是后来写着写着,发现不先在...

    用户1170933
  • linux组管理和权限管理

    在 linux 中的每个用户必须属于一个组,不能独立于组外。在 linux 中每个文件有所有者、所在组、其它组的概念

    小小咸鱼YwY
  • 使用webpack进行打包过程详解及常见问题解决

    一直想学webpack的打包过程,找到了很多的教程,一直没有找到一个比较好的,今天找到一个比较差不多的,转载一下!

    何处锦绣不灰堆
  • Vue+ElementUI项目使用webpack输出MPA

    为另一个项目提供可嵌入的功能单页,大部分页面使用时都是独立功能页,个别页面带有左侧边栏(相当于3-4个页面的整合形态),由于资源定位地址的限定,每个页面打包为单...

    大史不说话

扫码关注云+社区

领取腾讯云代金券