您的位置：首页 > Web前端 > Webpack

Webpack 4.X 从入门到精通 - devServer与mode（三）

2018-08-07 16:52 465 查看

上一篇文章里详细介绍了一下插件的用法，这一篇文章接着丰富

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

mode

是

webpack4

新增的一条属性，它的意思为当前开发的环境。

mode

的到来减少了很多的配置，它内置了很多的功能。相较以前的版本提升了很多，减少了很多专门的配置

提升了构建速度

默认为开发环境，不需要专门配置

提供压缩功能，不需要借助插件
提供
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（四）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航