走近webpack(1)--多入口及devServer的使用

  上一篇文章留下了一些问题,如果你没看过上一篇文章,可以在我的博客里查找,或者直接从这篇文章开始也是没问题的。 

const path = require('path');
module.exports={
    entry:{
        entry:'./src/entry.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
/*上面的代码中还有path以及__dirname的意思就是指获取到当前项目的绝对路径,涉及到了node.js的相关知识,这里不做过多的解释,有兴趣的小伙伴可以自己去找一下资料。*/
        filename:'[name].js'
/*这里name的意思就是指获取入口文件的名称用来作为出口文件的名称,这样你就不用有几个入口就写几个出口名称啦*/
    },
    module:{},
    plugins:[],
    devServer:{}
}

  这是上一篇文章中使用但是没有详细讲解的代码片段。现在我们来一一做一个了解。

  entry:配置入口文件,也就是你想要打包的文件路径。可以是单一的,也可以是多入口文件。下面会详细的讲解。‘

  output:配置出口文件,也就是你想要在那个文件夹下面生成打包后的文件。同样的,既然入口可以是多文件,那么出口也可以是多出口的。

  module:模块配置,主要用于一些loader的使用,用于转换编译less,sass,图片等文件。

  plugins:配置插件,如果想要更多的功能满足项目的需求,那么你需要使用到插件。

  devServer:配置开发服务功能,后面会更详细的介绍。

那么简单配置介绍完了,下面我们一起看一下多入口以及多出口文件是如何应用的

首先我们在dist目录下的index.html做一下简单的修改,我们引入另外一个名称为entry2.js的文件,并且把body中的代码修改成下面的这个样子。

<div id="title"></div>
<div id="name"></div>
<script src="./entry1.js"></script>
<script src="./entry2.js"></script>

  然后,我们在src目录下新建一个entry2.js,里面写上这样的代码。

document.getElementById('name').innerHTML="我是入口2的文件哦,看我打包成功了没?";

  第三步,在webpack.config.js中entry的配置项下增加一个入口链接,

 entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js',
        //这里我们又引入了一个入口文件
    }

  OK,至此我们的项目就修改完成,试一下在命令行中输入npm run build之后的结果吧。

  此时我们的目录结构看起来是这样的:

  在浏览器中打开index.html,会发现出现了两句话。那么就说明打包成功咯。

至此,你已经学会了入口出口,以及多入口多出口文件的配置。接下来我们来学一下devServer能做些什么,要怎么做。

  首先我们来安装一下webpack-dev-server,

  运行下面的命令,等待完成就可以了,完成后你会看到package.json中devDependencies项下面多了一个webpack-dev-server及其相应的版本号。

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

  那么,webpack-dev-server究竟是用来做什么的呢?它主要是启动了一个使用express的http服务器,用来伺服资源文件。

  OK,安装完成之后,我们需要在webpack.config.js的devServer选项中写几行简单的代码:

/*设置基本目录结构,也就是你想要使用服务的目录地址*/
contentBase:path.resolve(__dirname,'dist'),
/*服务器的IP地址,可以使用IP也可以使用localhost*/
host:'localhost',
/*服务端压缩是否开启,目前开不开都行,想关你就关*/
compress:true,
/*配置服务端口号,建议别用80,很容易被占用,你要是非要用也是可以的。*/
port:9090

  然后,在package.js中的scripts选项中再配置一个命令脚本,它看来应该是这样子滴:

  好了,现在该写的代码都写完了,咱们来看看效果。

  在命令行中输入npm run server,唉?!有趣的事情发生了,竟然报错了。错误说让你安装webpack-cli,行吧,那么咱们再安装一下webpack-cli。

npm install webpack-cli -D

  安装完webpack-cli,我们兴致勃勃地去npm run server,发现又TM错了,咋个回事。

  先别急,我们来看一下报错信息:

  不想看的小伙伴可以不看,这都什么啊!在你安装完webpack-cli后,会提示你一些安装包(webpack-cli,webpack-dev-server等)需要webpack版本在4.0以上,如果你不当回事继续npm run server,就会报错了。回头看一下发现咱们的webpack版本是3.6.0。有码为证,确实是。

  既然是这样那就升级一下webpack版本吧。咱们直接在上面的代码上修改,当前最新版本的webpack是4.1.1。咱们就用最新的!改好了之后是这样滴!

  咱们再npm install重新安装一下。

  安装完成,咱们再!我保证最后一次!npm run server一下下。

  我想这样子应该是成功了。咱们打开浏览器输入http://localhost:9090/看一下,呦呵!出来了。

  看起来好像不错的样子,我们在src下的随便一个entry里面修改两句代码,发现已经可以热更新咯。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding

vagrant极简教程:快速搭建centos7前言vagrant简介基本使用小结

1224
来自专栏源码之家

.htaccess重写让空间绑定多个域名到不同的目录支持多站点

6167
来自专栏岑志军的专栏

fastlane实现自动化打包

1962
来自专栏Timhbw博客

防止WordPress后台被暴力破解

2017-04-0613:34:01 发表评论 955℃热度 WordPress作为使用人数最多的博客系统,一直是大家关注的焦点,不安好心的人找漏洞,钻空子爆...

5126
来自专栏漏斗社区

工具| sqlmap payload修改之路

文末有福利 前言 事情的起因是这样的:斗哥经常会发现一些骚气十足的注入规则,不过想要发挥这些注入规则少不了编写py脚本,小表姐作为sqlmap神器的忠实粉丝,...

4357
来自专栏梦里茶室

【Chromium中文文档】Chrome/Chromium沙箱 - 安全架构设计

安全是Chromium最重要的目标之一。安全的关键在于理解下面这点:在我们完整地理解了系统在所有可能的输入组合下表现出的行为之后,我们才能够真的保证系统安全。对...

3208
来自专栏张首富-小白的成长历程

强制编辑文件,文件属主和属组自动改变

为什么对文件的权限是r--权限 对文件所在目录的权限是rwx权限 我们也能强制保存文件,但是保存之后的文件属主和属主就变了? 猜想:因为我们文件所在目录有rwx...

1623
来自专栏崔庆才的专栏

如何搭建一台FTP服务器

由于整个学校相当于一个大型局域网,相互之间传送数据非常快,比如要共享个电影,传点资料什么的。所以我们可以选择搭建一个FTP服务器来共享文件。通过本文给大家说一下...

4.8K0
来自专栏魏艾斯博客www.vpsss.net

一款 windows 英文面板-Winginx 安装和配置过程

当下 windows 服务器的使用数量还是不少的,为了在网站上线之前测试程序可用性,很多人会在本地 windows 系统中安装使用 windows 面板来搭建 ...

1542
来自专栏云计算教程系列

在Ubuntu 16.04上安装OpenVAS 8

OpenVAS(开放式漏洞评估系统)是一个客户端/服务器架构,它常用来评估目标主机上的漏洞。OpenVAS是Nessus项目的一个分支,它提供的产品是完全地免费...

2082

扫码关注云+社区

领取腾讯云代金券