Skip to content

Bill70058/webpack-note

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

手动通过webpack搭建项目

参考链接

遇到的问题

  • babel插件的引入只需要引入运行时编译部分就够用了,其他按需
  • webpack-dev-server的部分配置移到devtool配置项里了,如stats详细看文档
  • css修改变量命名冲突部分配置有改变,看官方文档按需配置
  • 配置postcss-loader还需要下载postcss-import和postcss-url两个依赖
  • 配置打包后抽离css文件,使用了mini-css-extract-plugin就不用使用style-loader插件,两个有冲突,把style-loader移除
  • 打包后压缩css文件的插件optimize-css-assets-webpack-plugin需要webpack4.x,当前项目5.x版本太高安装不了,通过插件文档可以看到它推荐我们安装另一个插件css-minimizer-webpack-plugin
  • copy-webpack-plugin插件,将放在public里的js文件不混入打包,直接塞进dist文件

V2分支

从v2开始就是对大项目打包时会用到的打包配置

  • 使用缓存cache与代码拆分splitChunks提升打包速度,详情配置项及作用可以看官网这部分文档
  • 该demo中使用happypack会有个babel报错,没找到原因,有兴趣需要使用到该插件的可以自行配置试试,顺便提个pr
  • 多线程打包还可以使用thread-loader插件

About

手动搭建webpack-demo

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published