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

王伟廷发布于2019-08-23 10:47 / 873人阅读

摘要：同时它还提供了自动刷新热更新等功能，使开发变得非常方便。的到来减少了很多的配置，它内置了很多的功能。

上一篇文章里详细介绍了一下插件的用法，这一篇文章接着丰富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文件内容如下：



    
        
        <%= htmlWebpackPlugin.options.title %>
    
    
        这是自带的div

执行命令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...

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

云服务器 GPU云服务器前端从入门到精通云计算从入门到精通 html从入门到精通 python从入门到精通

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96678.html

Webpack 4.X 从入门到精通 - module（四）

摘要：这就需要把文件单独拎出来，那需要一个插件来配合才能完成版本需要以上，低版本请使用使用步骤安装在里引入模块写入陈学辉文件目录会放入里写入代替执行命令后可以看到目录里已经多了一个文件夹，这个文件夹里放了一个文件。概念在webpack中任何一个东西都称为模块，js就不用说了。一个css文件，一张图片、一个less文件都是一个模块，都能用导入模块的语法（commonjs的require，E...

harryhappy 2019-08-23 11:02 评论0 收藏0
Webpack 4.X 从入门到精通 - 第三方库（六）

摘要：在开发的时候会时常用到第三方的库或者框架，比如耳熟能详的。使用第三方库在入口文件当中直接导入安装目录结构如图内容如下内容如下陈学辉内容如下这是自带的内容如下内容如下引入后打开页面会看到最后一个标签有了一个绿色的背景。在开发的时候会时常用到第三方的库或者框架，比如耳熟能详的jquery。借助它们能提高开发效率，但是如何在webpack中使用呢。这篇文章介绍两个东西，如何使用第三方库以及...

dunizb 2019-08-23 11:32 评论0 收藏0
Webpack 4.X 从入门到精通 - loader（五）

摘要：处理与的语法大部分已经被各在浏览器所支持，当然除了万恶的，但是部分新增很遗憾并不被浏览器所支持比如内置对象新增的一些方法和对象等。但是在这里却不需要，是因为的里已经把内容添上了，就不需要创建文件了源码下载下一篇从入门到精通第三方库六通过上一篇文章相信大家已经明白了loader的概念。那这篇文章继续介绍一些常用loader，并展现它的强大之处处理less less与sass的功能都一...

Me_Kun 2019-08-26 12:17 评论0 收藏0
Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack 有哪些功能(代码转换文件优化代码分割模块合并自...

wangbinke 2019-08-26 13:52 评论0 收藏0
Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack 有哪些功能(代码转换文件优化代码分割模块合并 ...

SunZhaopeng 2019-05-23 17:29 评论0 收藏0