webpack-1.1相关入门-(webpack-dev-server mini-css-extract-plugin)

关于抽离css文件的说明

1.1 mini-css-extract-plugin requires webpack >= 4.1.0

webpack 4.x以前 抽离css文件需要使用extract-text-webpack-plugin 或者 extract-text-webpack-plugin@next
webpack 5.x 以后，抽离css文件需要使用 mini-css-extract-plugin
使用这种抽离css文件的插件，就不需要使用style-loader了，使用style-loader目的是将css样式通过style标签内嵌到html文件内，使用上述两种插件为的是生成单独的css文件。
若同时使用 上述插件之一，style-loader,css-loader这三者，就会报错 ‘document is not defined’

关于devServer 的使用

使用webpack-dev-server插件本地启动服务

1.1 UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function ^ TypeError: Class extends value undefined is not a constructor or null

是由于css-loader和style-loader版本过高，与webpack和webpack-dev-server版本不匹配

1.2 webpack webpack-dev-server webpack-cli 三者版本不匹配时，Cannot find module ‘webpack/bin/config-yargs’

启动webpack-dev-server会报错，本项目中顺利启动webpack-dev-server服务，三者的版本是：
“webpack”: “^3.8.0”,
“webpack-cli”: “^4.1.0”,
“webpack-dev-server”: “^2.9.7”

1.3 关于host

默认启动的服务是localhost:8080 或者是127.0.0.1:8080 但是若是想要在一个局域网的ip可以访问该服务，可以将host的值设置为0.0.0.0
这样前端同事启动了项目，后台同事可以访问前端同事的连接看到项目页面。

1.4 devServer 启动有inline模式和iframe模式

inline内联模式可以实时刷新
类似于hmr hot module replacement 模块热替换