webpack-dev-server的基本使用

1.webpack-dev-server自动打包工具

用于开发时，需要频繁的修改js文件，修改完成后仍需要用webpack打包

1. 强制要在本地项目安装webpack和webpack-cli

npm install webpack wepack-cli -D

2. 安装webpack-dev-server
   安装命令

npm i webpack-dev-server -D

该命令是在项目中安装的webpack-dev-server工具

3. 配置webpack-dev-server
   需要在package.json文件中配置webpack-dev-server
   新增dev属性

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack --config webpack.config.js"
  }

4. 检验是否安装成功
   运行webpack-dev-server命令

npm run dev

访问端口：http://localhost.8080

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\wordspace\webpackTest
i ｢wdm｣: Hash: 3db249357d709d94623d
Version: webpack 4.41.5

保存时有自动编译就是成功

Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
       4 modules
i ｢wdm｣: Compiled successfully.

2.webpack-dev-server的运行

1. 访问打包好的js文件：访问端口+文件名.js（控制台有提示）
   打包会按照webpack.config.js中的配置，但是不会参照配置文件中的输出文件，它会将js文件打包到内存中

2. 在页面中使用：引入src=/文件名.js（控制台有提示）
   页面中看不到这个.js文件，webpack-dev-server自动打包生产的js文件不会放到实际的物理磁盘中，而是直接放在内存中，速度更快。

3. 等学到了使用html-webpack-plugins，使用起来就更方便了