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

时间 2019-11-09

标签 webpack 4.x 入门精通 devserver mode 繁體版

原文原文链接

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

devServer

安装使用

npm i webpack-dev-server -D

打开终端，并进入到对应的项目里（个人为webpack-demo），执行命令webpack-dev-server，若是终端里显示以下则表示已经成功开启服务器
html

注意：
一、此时可能会提示 webpack-dev-server不是内部命令，解决办法为在全局再次安装一下 webpack-dev-server模块，或者在 package.json里的 scripts里加上 "dev": "webpack-dev-server"，而后执行命令 npm run dev
二、此时我并无经过 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文件内容以下：java

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

template.html文件内容以下：webpack

<!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文件后浏览器会自动刷新，以下图：
web

热更新

默认状况下开启了服务器后，只要入口文件有更新那整个页面就会从新刷新。若是页面里引入的模块很是多的状况下让整个页面刷新就会变得有些慢，这个问题能够交给热更新去解决。热更新的意思就是只更新有改动的模块（像ajax同样局部刷新）ajax

使用步骤

一、引入webpack模块npm

const webpack=require('webpack');

二、写入插件json

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

三、devServer里增长hot参数segmentfault

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

此时并不能看出效果，到后面的文章里讲loader的时候就能够看出来效果
devServer的其它配置：https://webpack.docschina.org...

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（四）