webpack4 vue项目搭建

mini的demo

实现的功能：
1、webpack-dev-server实现自动部署、热更新
2、HtmlWebpackPlugin实现自动创建html文件，同时自动引入webpack输出的js文件
3、配置了devtool: 'eval-source-map' 可以看到项目源码
这个demo很小，可以用来做一些，研究webpack打包原理，研究js api的事情
demo: https://github.com/hellofriday/webpackdemo1/tree/mini

增加对静态文件和css的处理

这个项目实现的功能：
1、babel 将es6语法转为es5
2、支持less、css
3、file-loader对图片、字体、多媒体文件进行处理

可以愉快的用原生js或者jquery进行demo开发了
demo：https://github.com/hellofriday/webpackdemo1/tree/mini2

vue 开发环境 mini版

实现的功能：
对vue的支持
这个项目还是只能用于vue demo开发
demo地址：https://github.com/hellofriday/webpackdemo1/tree/mini-vue

对webpack进行优化，使之可以用于正式环境打包

node版本是14.15.1
对以下内容进行优化：

• 包版本进行了更新
• 按照开发环境、测试环境、生产环境拆分不同的webpack配置文件
• mini-css-extract-plugin 对css提取和压缩 mini-css-extract-plugin使用的是0.8.0版本，1.3.x版本会报错
• 雪碧图合成
• clean-webpack-plugin 清除上次生成的文件
• splitChunks 将依赖库单独抽离成一个js文件
  地址：https://github.com/hellofriday/webpackdemo1

待优化：

1. 按照环境拆分的webpack配置文件有很多重复的代码，可以通过merge插件把相同的代码提取到同一个文件
2. 可以通过happypack开启多进程打包，加快打包速度
3. 可以把静态资源和常用的js库比如vue放到cdn上，加快页面加载速度
4. 可以使用tinypng图片进行压缩或者对图片批量进行webp格式转化