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

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里面修改两句代码,发现已经可以热更新咯。

走近webpack(1)--多入口及devServer的使用的更多相关文章

  1. Webpack 多html入口、devServer、热更新配置

    一.clean-webpack-plugin: 在每次生成dist目录前,先删除本地的dist文件(每次自动删除太麻烦) 1.安装clean-webpack-plugin   npm/cnpm i c ...

  2. 走近webpack(0)--正文之前的故事

    在前端工作的过程中,只要你接触过vue,angular,react,gulp就一定知道webpack或者听说过或者使用过webpack,但是或许你对webpack的使用方法并不是十分了解,只是会用写好 ...

  3. 使用 webpack 搭建多入口项目

    闲来无事,学习一下怎么用 webpack 自定义多入口项目的打包 项目github地址:https://github.com/xiaoliwang2016/webpack-demo 先来看一下目录结构 ...

  4. webpack 学习2 入口(entry)和输入管理(output)

    在开始上代码之前,先让我们盘一盘什么是webpack中的入口和输入 入口 假设你现在手里有一个水龙头,然后十个人用水管从你这里拿水.你这个龙头就是水的入口,水管就是你和这些人的依赖联系.现在供水局的要 ...

  5. 走近webpack(2)--css打包及压缩js

    前面的文章介绍了webpack的devServer以及多入口多出口文件的配置,咱们继续往下学. 在开始学习接下来的知识之前,我们先回顾一下,前文提到了webpack的简单配置方法,但是只详细说了下入口 ...

  6. 走近webpack(3)--图片的处理

    上一章,咱们学了如何用webpack来打包css,压缩js等.这一篇文章咱们来学习一下如何用webpack来处理图片.废话不多说,咱们开始吧. 首先,咱们随便找一张你喜欢的图片放到src/images ...

  7. vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析

    1.下载vue-cli npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取https://github.com/vuejs/vue-cli 2.安装 ...

  8. webpack 多页面|入口支持和公共组件单独打包--转载

    转载自:http://www.jb51.net/article/117490.htm 本篇主要介绍:如何自动构建入口文件,并生成对应的output:公共js库如何单独打包. 多入口文件,自动扫描入口. ...

  9. webpack 配置多入口文件,输出多出口文件

    const path = require('path') module.exports = { // 入口文件的配置项 entry: { // 入口文件 entry: './src/entry.js' ...

随机推荐

  1. 在Ubuntu16.04.4上安装jdk

    在Ubuntu16.04.4上安装jdk 一.安装步骤     1.下载jdk安装包     首先我们在oracle官网上下载jdk-8u161-linux-x64.tar.gz,当然也可以下载其他版 ...

  2. MySQL参数max_connect_errors分析释疑

      最近一MySQL服务器,由于一些特殊因素遇到"ERROR 1129 (00000): Host 'xxx' is blocked because of many connection e ...

  3. configure: error: xml2-config not found. Please check your libxml2 installation

    安装php时的报错 checking libxml2 install dir... nochecking for xml2-config path... configure: error: xml2- ...

  4. R语言︱常用统计方法包+机器学习包(名称、简介)

    一.一些函数包大汇总 转载于:http://www.dataguru.cn/thread-116761-1-1.html 时间上有点过期,下面的资料供大家参考基本的R包已经实现了传统多元统计的很多功能 ...

  5. Parse Fatal Error at line 41 column 24: 元素类型 "url-pattern" 必须由匹配的结束标记 "</url-pattern>" 终止

    1.错误描述 严重: Parse Fatal Error at line 41 column 24: 元素类型 "url-pattern" 必须由匹配的结束标记 "< ...

  6. centos 7 安装VCL播放器

    centos 自带播放器MP4都无法播放,因此安装VCL播放器 安装epel和remi的repository sudo yum localinstall --nogpgcheck http://dl. ...

  7. Windows环境下使用python 3.x自带的CGI服务器测试cgi脚本--Python

    1.在桌面上新建一个文件夹作为服务器目录文件夹(文件夹名称自定义,文件夹位置自定义),在www文件下再建一个文件夹,文件夹名为“cgi-bin”,须是这个文件名,其他试过不行(原因暂时未知)

  8. 【BZOJ3262】陌上花开(树套树)

    [BZOJ3262]陌上花开(树套树) 题面 对于权限题,我这种苦逼肯定是从别的OJ上搞的对不对??? CJOJ 洛谷 Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味 ...

  9. BSGS算法(大步小步算法)

    计算\(y^x ≡ z \ mod\ p\) 中 \(x\) 的解. 这个模板是最小化了\(x\) , 无解输出\(No \ Solution!\) map<ll,ll>data; ll ...

  10. iBrand 教程 0.1:Windows + Homestead 5 搭建 Laravel 开发环境

    统一开发环境 为了保证在学习和工作过程中避免因为开发环境不一致而导致各种各样的问题,Laravel 官方为了我们提供了一个完美的开发环境 Laravel Homestead,让我们无需再本地安装 PH ...