webpack-dev-server虚拟服务器自动打包刷新

2019-05-07 本文已影响0人小丘啦啦啦

一、webpack-dev-server引入
每次修改JS文件后，都需要用webpack执行打包重新生成JS文件，非常麻烦。
此时，需要使用 webpack-dev-server 这个工具，来实现自动打包编译功能。
二、安装
在项目目录，终端运行npm i webpack-dev-server -D进行本地安装，把webpack-dev-server工具安装到项目的本地开发依赖。
注意：webpack-dev-server要正常运行，需要在本地项目中也安装webpack，即npm i webpack -D进行webpack本地安装；webpack4+还需要安装webpack-cli，npm i -D webpack-cli。
三、基本使用
用法和webpack命令用法完全一样。
webpack-dev-server是在项目中，本地安装的，无法当作脚本命令在终端powershell中直接运行（只有-g全局安装的工具才可以）。

迂回解决：在 package.json 的scripts中配置我们要运行的命令，配置脚本。

"scripts": {
    "dev":"webpack-dev-server"
}

运行npm run dev，即执行了这个命令脚本，进行项目编译。
此时，修改JS保存，会自动重新编译。可以实时监听代码改变，重新编译。

四、说明

webpack-dev-server会把整个项目以一个localhost服务器形式运行起来（之前时直接以file协议打开），虚拟了一个服务器，可以服务器URL打开。
webpack-dev-server会把webpack打包输出文件会被托管于（URL）根路径（本地磁盘dist目录下的不会发生改变），可以直接服务器根路径+输出JS文件名访问到。

此托管的输出文件并没有存于根目录电脑物理磁盘中，而是直接托关于电脑内存，项目根目录是找不到此输出文件的。为了编译刷新快。
以服务器形式访问，修改了js，自动重新编译了，刷新浏览器页面却不会发生变化？
因为html中JS引用是dist下的bundle.js，会指向物理磁盘dist目录下的bundle.js，webpack-dev-server不会改变这个此bundle.js，所以页面不会发生改变。

服务器帮我们生成的bundle.js托管于根路径（重新编译的版本）。
两个bundle.js不一样，会访问不到不发生改变（两个bundle.js不一样）。

页面应该引入根路径的bundle.js。

 <script src="/bundle.js"></script>

即可实现自动打包编译，自动刷新浏览器。

五、webpack-dev-server命令参数（指令）

--open，编译完自动打开浏览器
--port 端口，更改运行端口（默认8080）
--contentBase 路径，更改内容根路径（默认服务器根路径、项目根路径），也是托管路径，可以设置为src即刚打开浏览器就访问到页面。引用路径时需要注意这个（例如项目根路径有node-modules文件夹，默认可以访问到；修改为src，即根路径变为src，手动引用时会访问不到）
安装了html-webpack-plugin后，页面也托管于根路径可以直接访问到，此参数可不需要。
--hot，热重载、热跟新，页面异步刷新，减少不必要的刷新请求；打补丁，而不是重新编译，减少不必要的代码跟新。

即：
1、修改package.json脚本直接加参数（推荐）：

"scripts": {
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
}

2、把参数写在webpack配置文件（webpack.config.js）中，增加配置：

const webpack = require('webpack');   //导入webpack模块

module.exports = {
    devServer:{   //对象中写dev-server的参数
        open:true,
        port:3000,
        contentBase:'src'
    },
    plugins:[   //配置插件的节点
        new webpack.HotModuleReplacementPlugin()   
        //实例化一个热跟新的对象（启动热跟新需要先导入webpack模块，再实例化一个对象）
    ]
}

webpack-dev-server虚拟服务器自动打包刷新

猜你喜欢

热点阅读