Webpack 4.X 从入门到精通 - devServer与mode(三)

上一篇文章里详细介绍了一下插件的用法,这一篇文章接着丰富module.exports里的属性。如今的前端发展已经非常迅速了,伴随而来的是开发模式的转变。现在已经不再是写个静态页面并放在浏览器里打开预览一下了。在实际的开发中会经常需要使用http服务器,比如之前的ajax,想要看到效果就必需搭建一个服务器。搭建服务器的方式有非常的多,而webpack则原生的提供服务器的支持,大家无需再去下载软件。同时它还提供了自动刷新、热更新等功能,使开发变得非常方便。

devServer

安装使用

npm i webpack-dev-server -D

打开终端,并进入到对应的项目里(我的为webpack-demo),执行命令webpack-dev-server,如果终端里显示如下则表示已经成功开启服务器

注意:
1、此时可能会提示webpack-dev-server不是内部命令,解决办法为在全局再次安装一下webpack-dev-server模块,或者在package.json里的scripts里加上"dev": "webpack-dev-server",然后执行命令npm run dev
2、此时我并没有通过webpack命令生成一个dist目录(目录结构如下图),然后在浏览器里输入地址http://localhost:8080/后,页面会正常显示。这个原因是devServer会将webpack构建出的文件保存到内存里,不需要打包生成就能预览

配置参数

webpack.config.js的内容如下:

const path=require(‘path‘);
const HtmlWebpackPlugin=require(‘html-webpack-plugin‘);

module.exports={
    entry:{
        index:‘./src/index.js‘,
    },
    output:{
        path:path.resolve(__dirname,‘dist‘),
        filename:‘[name].bundle.js‘
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:‘陈学辉‘,
            template:‘./src/template.html‘,
            filename:‘index.html‘,
        })
    ],
    devServer:{
        host:‘localhost‘,   //服务器的ip地址
        port:1573,  //端口
        open:true,  //自动打开页面
    }
}

index.js文件内容如下:

console.log(‘这是入口文件‘);

template.html文件内容如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <div id="box">这是自带的div</div>
    </body>
</html>

执行命令webpack-dev-server后,浏览器会自动打开页面,同时如果修改index.js文件后浏览器会自动刷新,如下图:

热更新

默认情况下开启了服务器后,只要入口文件有更新那整个页面就会重新刷新。如果页面里引入的模块非常多的情况下让整个页面刷新就会变得有些慢,这个问题可以交给热更新去解决。热更新的意思就是只更新有改动的模块(像ajax一样局部刷新)

使用步骤

1、引入webpack模块

const webpack=require(‘webpack‘);

2、写入插件

plugins:[
    new HtmlWebpackPlugin({
        title:‘陈学辉‘,
        template:‘./src/template.html‘,
        filename:‘index.html‘,
    }),
    new webpack.HotModuleReplacementPlugin()    //引入热更新插件
]

3、devServer里增加hot参数

devServer:{
    host:‘localhost‘,   //服务器的ip地址
    port:1573,  //端口
    open:true,  //自动打开页面,
    hot:true,   //开启热更新
}

此时并不能看出效果,到后面的文章里讲loader的时候就可以看出来效果
devServer的其它配置:https://webpack.docschina.org/configuration/dev-server/

mode

modewebpack4新增的一条属性,它的意思为当前开发的环境。mode的到来减少了很多的配置,它内置了很多的功能。相较以前的版本提升了很多,减少了很多专门的配置

  1. 提升了构建速度
  2. 默认为开发环境,不需要专门配置
  3. 提供压缩功能,不需要借助插件
  4. 提供SouceMap,不需要专门配置

mode分为两种环境,一种是开发环境(development),一种是生产环境(production)。开发环境就是我们写代码的环境,生产环境就是代码放到线上的环境。这两种环境的最直观区别就是,开发环境的代码不提供压缩,生产环境的代码提供压缩。

使用方式1:在命令后面添加

webpack --mode development
webpack --mode production

使用方式2:在package.json里添加

"scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development"
  },

此时后成dist目录用的是生产环境,打开服务器用的是开发环境,然后通过命令执行npm run build或者npm run dev,它们的区别如下
dist目录里的index.bundle.js内容如下:

http://localhost:1573/index.bundle.js内容如下

资料下载

下一篇:Webpack 4.X 从入门到精通 - module(四)

原文地址:http://blog.51cto.com/13258913/2155826

时间: 2024-10-04 23:06:29

Webpack 4.X 从入门到精通 - devServer与mode(三)的相关文章

Webpack 4.X 从入门到精通 - plugin(二)

通过上一篇文章,我们明白了webpack的两个配置参数入口与出口,webpack会找到入口文件的地址,进去后一顿蹂躏,再通过你给的输出地址就把编译后的文件给你了.这篇文章接着去丰富webpack.config.js的内容,说一个参数叫plugins plugins plugins里面放的是插件,在webpack里有各式各样的插件能够帮你完成任何构建的事情.只有你想不到的,没有它做不到的.并且全世界的小伙伴们都在给webpack贡献开源的插件,所以插件的种类是非常丰富的. 插件能做什么 插件的作用

Webpack 4.X 从入门到精通 - 第三方库(六)

在开发的时候会时常用到第三方的库或者框架,比如耳熟能详的jquery.借助它们能提高开发效率,但是如何在webpack中使用呢.这篇文章介绍两个东西,如何使用第三方库以及如何提取第三方库. 使用第三方库 1.在入口文件当中直接导入 安装jQuery npm i jquery -S 目录结构如图: package.json内容如下: { "name": "webpack-demo", "version": "1.0.0", &q

区块链技术从入门到精通

详情请交流  QQ  709639943 01.区块链技术从入门到精通 02.2017年新生大学区块链视频教程 03.Node.js入门到企业Web开发中的应用 04.精通高级RxJava 2响应式编程思想 05.Java秒杀系统方案优化 高性能高并发实战 06.Java深入微服务原理改造房产销售平台 07.快速上手Linux 玩转典型应用 08.快速上手Ionic3 多平台开发企业级问答社区 09.Java Spring Security开发安全的REST服务 10.深入Java虚拟机(JVM

火云开发课堂 - 《Shader从入门到精通》系列 第一节:Shader介绍与工程搭建

<Shader从入门到精通>系列在线课程 第一节:Shader介绍与工程搭建 视频地址:http://edu.csdn.net/course/detail/1441/22665?auto_start=1 交流论坛:http://www.firestonegames.com/bbs/forum.php 工程下载地址:请成为正式学员获取工程 课程截图: 项目实例: 版权声明:本文为博主原创文章,未经博主允许不得转载.

SaltStack 入门到精通 - 第一篇: 安装SaltStack

实际环境的设定: 系统环境: centos6 或centos5 实验机器: 192.168.1.100 软件需求: salt 套件,及其需求环境 实验目的: 成功安装salt,并实现salt主从间通讯 特殊设置: 其它目的: 安装SaltStack(下面简称为salt) epel安装:salt安装需要epel源支持,所以在安装salt前需要先安装epel包 # centos5 下载下面rpm  wget -O    epel.rpm https://dl.fedoraproject.org/pu

SaltStack 入门到精通 - 第七篇: Targeting

什么是Targeting? Targeting minions 是指那些minion会作为运行命令或是执行状态的目标.这些目标可以是一个主机名,系统信息,定义的分组,甚至是自定义的绑定的对象. 例如命令  salt web1 apache.signal restart 可以重启ID 为web1的minion的apache.当然也可以在top文件中使用web1来作为目标匹配的内容: base:   'web1':     - webserver Targing 有哪些匹配方式? Minion Id

CUDA从入门到精通

CUDA从入门到精通(零):写在前面 在老板的要求下,本博主从2012年上高性能计算课程开始接触CUDA编程,随后将该技术应用到了实际项目中,使处理程序加速超过1K,可见基于图形显示器的并行计算对于追求速度的应用来说无疑是一个理想的选择.还有不到一年毕业,怕是毕业后这些技术也就随毕业而去,准备这个暑假开辟一个CUDA专栏,从入门到精通,步步为营,顺便分享设计的一些经验教训,希望能给学习CUDA的童鞋提供一定指导.个人能力所及,错误难免,欢迎讨论. PS:申请专栏好像需要先发原创帖超过15篇...

Hbase从入门到精通_如何学好Hbase

Hbase从入门到精通 课程学习地址:http://www.xuetuwuyou.com/course/188 课程出自学途无忧网:http://www.xuetuwuyou.com 课程简介 面对海量数据的存储及实时查询,传统的RDBMS已经无法满足,基于HDFS之上的HBase应运而生,每个表的数据可以达到数百万列和数十亿条,数据存储在HDFS之上充分利用其存储优势,分布式的架构让其查询数据更加快,绝大数电商互联网公司都是用它.   课程内容 (1)HBase 初窥使用 HBase 应用场景

学习建设网站从入门到精通

网站建设学习流程 入门到精通 我们分为三个过程:①基础知识 ②进阶学习 ③高级部分(延伸知识)笔者从初学者到现在,经历了一些,把自己理解的,所学的,都献给爱做网站的网友们,因为我知道作为一个初学者是很迷茫的,避免学些不需要的知识,避免走弯路! [1]基础知识: 了解域名,空间,网站程序是什么? 网站程序有那些好处? [2]进阶学习: html,div+css 必须学会的技术,有必要精通 掌握一门网站程序如:DeDeCms,WordPress,Discuz 选学课 html5,css3 在原有的基