从零开始的webpack生活-0x002：devServer自动刷新

AlanKeene 发布于2019-08-21 17:27 / 2641人阅读

摘要：概述上一章已经实现了最简单的配置文件使用和监听功能，这一章要开始实现自动刷新。只能在终端中使用的在章节中指令后标有可以使用的功能，快速调用终端最终项目文件夹结构资源源代码

0x001 概述

上一章已经实现了最简单的webpack配置文件使用和webpack监听功能，这一章要开始实现自动刷新。

0x002 浏览器自动刷新

创建新的项目框架

- webpack_study
    + 0x001-begin
    - 0x002-dev-server
       - src

我们将在0x002-dev-server下做所有的开发

初始化项目，这里使用npm init指令初始化，生成package.json，以便以后管理依赖包

$ npm init -y
# 输出
Wrote to /MY_PROJECT/PROJECT_OWN/webpack_study/0x002-dev-server/package.json:

{
  "name": "1-web-auto-refresh",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

创建./src/index.js和./index.html,并添加对js的引用

# ./src/index.js
console.log("hello wbpack");





    
    1-web-auto-refresh

复制上一章的webpack.config.js配置文件

var path       = require("path")
module.exports = {
    entry : "./src/index.js",
    output: {
        path    : path.resolve(__dirname, "dist"),
        filename: "index.js"
    }
}

配置devServer

var path       = require("path")
module.exports = {
    entry    : "./src/index.js",
    output   : {
        path    : path.resolve(__dirname, "dist"),
        filename: "index.js"
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        port       : 9000
    }
}

devServer提供了一个web服务器

contentBase为该服务器的根目录，它将以此来寻找资源

port为端口，我们通过该端口访问该服务器的资源

安装依赖包webpack-dev-server、webpack

$ cnpm install --save-dev webpack
$ cnpm install -g webpack-dev-server 
# 输出
Downloading webpack-dev-server to /usr/local/lib/node_modules/webpack-dev-server_tmp
...
[webpack-dev-server@2.9.4] link /usr/local/bin/webpack-dev-server@ -> /usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js

$ webpack-dev-server -v
# 输出
webpack-dev-server 2.9.4
webpack 3.8.1

启动devServer

$ webpack-dev-server
# 输出
Project is running at http://localhost:9000/
webpack output is served from /
Content not from webpack is served from /MY_PROJECT/PROJECT_OWN/webpack_study/0x002-dev-server/1-web-auto-refresh/dist
Hash: ab62a2a6acbc29a572c6
Version: webpack 3.8.1
Time: 338ms
   Asset    Size  Chunks                    Chunk Names
index.js  324 kB       0  [emitted]  [big]  main
   [2] multi (webpack)-dev-server/client?http://localhost:9000 ./src/index.js 40 bytes {0} [built]
...
    + 11 hidden modules
webpack: Compiled successfully.

接着我们就可以通过http://loaclhost:9000来访问这个网站了！

注意

webpack-dev-server指令拥有与webpack -w相同的功能，在代码修改的时候根据webpack配置文件自动打包，在出错的时候输出错误信息，还能在修改代码的时候自动刷新浏览器。

自动刷新浏览器只有在修改配置文件中entry配置的入口文件及其所引用的文件有效，其他则无效，比如没有引用到的文件和index.html

自动打包出来的index.js此时在内存中，是看不见的

0x003 其他配置

devServer还有许多其他常用配置，这里只讲常用的，暂时不讲热更新

compress:是否gzip压缩

host:访问地址，默认是localhost，但是可以配置成"0.0.0.0",就可以使用127.0.0.1访问了

index:不指定访问资源时，默认访问contenBase路径下的index.html文件，但是也可以通过指令index改变默认访问文件

open:执行webpack-dev-server后，我们需要自己打开浏览器访问localhost:9000访问，配置该指令可以在启动webpack-dev-server后自动打开一个浏览器窗口

progress:显示打包进度，用于命令行
其他配置可查阅webpack-devServer章节

注意：

配置指令分为两种，一种是只用在终端使用，比如progress，只能在终端指定webpack-dev-server --progress；一种既可以在终端，也可以在配置文件，比如compress,既可以在配置文件中指定compress:true，也可以在终端中指定webpack-dev-server --compress，在终端中指定使用-连接每个指令，在配置文件中，使用驼峰法指定。只能在终端中使用的在webpack-devServer章节中指令后标有CLI only

可以使用npm的script功能，快速调用webpack-dev-server

# package.json
  "scripts": {
    "dev":"webpack-dev-server --progress",
    "build":"webpack -p"
  }
# 终端
$ npm run dev
$ npm run build

0x004 最终项目

文件夹结构

- 0x002-dev-server
    - src
        index.js
    package.json
    webpack.config.js

index.js

document.write("hello webpack")

package.json

{
  "name": "1-web-auto-refresh",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev":"webpack-dev-server --progress"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.8.1"
  }
}

webpack.config.js

var path       = require("path")
module.exports = {
    entry    : "./src/index.js",
    output   : {
        path    : path.resolve(__dirname, "dist"),
        filename: "index.js"
    },
    devServer: {
        contentBase: path.resolve(__dirname, ""),
        port       : 9000,
        compress   : true,
        open       : true,
        host       : "0.0.0.0",
        index      : "index.html"
    },
}

0x005 资源

源代码

GPU云服务器云服务器从零开始的邮件服务器从零开始 linux从零开始 python从零开始

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

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

从零开始的webpack生活-0x003：html模板生成

摘要：生成多页面修改配置自动插入标题第二个页面打包并查看文件夹结构这是一个模板文件这是一个模板文件此时的配置自动插入标题第二个页面其他配置看这里资源源代码 0x001 概述上一章之后已经可以自动刷新浏览器了，大大方便了我们的开发，这章开始讲插件，第一个插件将会解决上一章节的一个问题，那就是index.html需要手动插入打包好的js，同时不会将index.html一起放到dist文件夹下的...

ZHAO_ 2019-08-21 17:27 评论0 收藏0
从零开始的webpack生活-0x001：webpack初次相逢

摘要：同时不能直接单纯的指定输出的文件名称，比如，将会报错，可以换成以下方式指定，或者其他类似方式。如果打包过程出现错误，比如语法错误，将会在控制台以红色文字显示，并且在你修复之后会再次打包。 0x001 概述其实我不知道怎么写，所以决定就一块一块的写点平常配置的过程，根据不同东西稍微分区一下就好了 0x002 初始化项目结构 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 评论0 收藏0
从零开始的webpack生活-0x012：TranspilingLoader装载脚本

摘要：概述上一章讲的是样式装载相关的，这一章见得是脚本加载相关的环境配置栗子加载安装依赖修改配置添加配置文件使用编写脚本打包并查看结果可以看到，语法被自动转化成了更多配置请查阅关于章节栗子加载安装依赖 0x001 概述上一章讲的是样式装载相关的loader，这一章见得是脚本加载相关的loader 0x002 环境配置 $ mkdir 0x012-transliling-loader $ c...

Tonny 2019-08-21 17:32 评论0 收藏0
从零开始的webpack生活-0x005：DefinePlugin奇妙用处

摘要：注意该插件是简单的字符串替换，所以如果是定义常量最好使用包裹要替换的内容，或者使用转化，否则会变成代码直接插入，比如版本号这样替换的时候就会变成而不会变成导致错误的数据格式。 0x001 概述上一章讲的是js压缩混淆，和这一章没有半毛钱关系，这章讲的是DefinePlugin，一个好像没有用，但其实很好用的一个插件，我很喜欢，嘿嘿嘿！ 0x002 插件介绍说白了，这是一个简单的字符...

The question 2019-08-21 17:28 评论0 收藏0
从零开始的webpack生活-0x010：TemplatingLoader装载模板

摘要：概述上一章讲的时候关于文件相关的，这一章讲的是模板相关的。环境配置栗子加载安装依赖包编写并引入配置低于否则使用打包并查看结果可以看到，被打包成了字符串，并封装成模块导出。更多资源，请查阅的仓库和官网资源源代码 0x001 概述上一章讲的时候关于文件相关的loder，这一章讲的是模板相关的loder。 0x002 环境配置 $ mkdir 0x010-templating-loader...

jk_v1 2019-08-21 17:31 评论0 收藏0