webpack5 重建脚手架

PC

前言

项目方面，主要是专题类型项目，项目周期短，需要开发速度快，易于线上实时修改，所以采用原生js+TypeScript作为基础架构方面，视情况动态引入所需要的框架，原有代码直接用，后面慢慢改造
为了解决webpack4运行速度较慢，优化凌乱目录，并引入TypeScript

引入新功能

TypeScript支持

总体配置

js

babel 处理js兼容
npm install -D babel-loader @babel/core @babel/preset-env
npm i core-js@3 --save 垫片，模拟新特性

css

npm i style-loader -D
npm i css-loader -D
npm i mini-css-extract-plugin -D css单独提取

图片

直接使用webpack5的asset处理图片

服务

npm i webpack-dev-serve -D

插件

npm i clean-webpack-plugin -D dist目录自动清空
npm i html-webpack-plugin -D 生成html文件

转码

npm i webpack-encoding-plugin -D 转码工具，必备，线上代码主要编码是gb2312

旧webpack4前言

构建的很完美，各种意义上的，但是我是pig，开局就遇到难点，怎么转编码，然后找到工具webpack-encoding-plugin，装了半天，运行了一天，排错了一天，最后第二天，我终于知道为什么vscode会不停的说，转码的文件是utf-8了，因为我是用英文字符测试的，初步怀疑是vscode对于英文统一提示UTF-8，但是我用中文测试，成功了，哦吼，我太蠢了emo，谢谢。

旧webpack5问题

  1. pop.msg出现后，因为包裹div长度过宽，会直接挡住背后可点击元素
  2. ie11，弹窗点击确定无反应，ie10，完全无反应 ie的button标签，会自带type属性，所以不能自己定义