阅读 394

webpack4自定义项目脚手架

很多时候利用ReactVue这类UI框架,为了快速开发项目,直接使用了官方推荐vue-cli或者create-react-app的脚手架。近段时间研究了很多webpack打包文章和资料。自己动手搭建了一个Vue项目脚手架。

脚手架目录

这个脚手架时基于webpack 4.36.1,配置部分可能跟webpack3版本有冲突,过程之中会提出。现在主要webpack配置主要分打包环境和开发环境,分别对应webpack.dev.conf.jswebpack.prod.conf.js。后面会利用webpack-merge把两部分公用的环境配置抽取到webpaack.base.conf.js。其中dist目录下是打包环境打包的chunk包。

脚手架Github地址:https://github.com/Harhao/webpack

                                         
|-- build                                   
|   |-- webpack.base.conf.js                
|   |-- webpack.dev.conf.js (开发环境webpack配置文件)                
|   `-- webpack.prod.conf.js (打包环境webpack配置文件)              
|-- config                                  
|   `-- index.js(webpack一些配置,例如webpack-dev-server)                            
|-- dist                                    
|   |-- framework_180dff6fd8b94a15.js(抽取的公共类库,vue,vue-router,vuex等)      
|   |-- index.html                          
|   |-- main_180dff6fd8b94a15.js(打包的js文件)            
|   |-- main_fdef942b.css(打包的css文件)                   
|   `-- vendors~main_180dff6fd8b94a15.js    
|-- package.json(项目依赖及npm scripts定义)                            
|-- public                                  
|   `-- index.html(挂载文件)                          
`-- src (vue开发目录)                                    
    |-- App.vue                             
    |-- main.js                             
    |-- router                              
    |   `-- index.js                        
    `-- views                               
        |-- admin                           
        |   `-- index.vue                   
        `-- login                           
            `-- index.vue                   
复制代码

开发环境配置文件分析

webpack.dev.conf.js主要是提供开发单页应用时的打包配置文件,包含了热更新、vue文件处理、打包后chunk包注入等功能。开发环境配置文件没有添加过多的其他plugin,保留了基本的一些开发必要的环境配置。下面会详细说明一些插件和配置信息的作用。

各类loader

webpack只提供了js的模块打包功能。像其他.vue,.jsx.tsx,scss等后缀的文件,主要依赖于各类的loader负责处理,然后进行打包操作。在日常利用vue进行开发中,主要使用到单页文件模板开发(即.vue后缀的模板),webpack无法对该类文件处理。所以需要vue-loader对该类文件进行转换。css的预编译scss需要sass-loadernode-sass支持,scss文件处理loader执行顺序是从后面往前执行的,sass-loader,css-loaderstyle-loader

对于处理es6语法,需要babel-loader转换编译,而babel-loader需要@babel/core,@babel/preset-env。现在用的babel-loader8.0.6版本,需要比较新版本的@babel/core,@babel/preset-env配合使用。在根目录下创建一个.babelrc文件,内容如下:

{
  "presets": [
    "@babel/preset-env"
  ]
}
复制代码

设置输出路径

output字段设置打包文件输出路径配置。filename是输出文件命令,其中name,hash都是内置的变量名,还包括idchunkhash打包内容哈希值。path是输出路径指定,如果采取相对路径,是相对于当前运行的路径。这里采取的通过path.resolve来配置路径。其中publicPath字段是配置发布到线上资源的 URL 前缀,为string 类型,这里如果设置了vue-routerbase,需要对此字段进行配置,不然会出现资源路径问题。

注入打包后的chunk

通过webpack打包文件,总不能手动把chunk引入index.html,这个社区提供了html-webpack-plugin为我们提供手动和自动注入打包文件路径,感谢开源社区提高生产力。devtool设置开发环境生成.map文件,方便我们定位开发错误。到现在基本已经可以正常运行打包vue开发了。不过每一次我们修改开发内容,还得重新打包一次,多麻烦。

webpack-dev-server热更新

日常开发过程中,需要更新查看修改的内容,开源插件webpack-dev-server为我们提供了一个本地的express服务,热更新修改的内容。提高我们的效率。有关webpack-dev-server的配置放在config/index.js中,如下所示:

其中resolve字段是配置配置 Webpack 怎样寻找模块所对应的文件。开发中经常遇到跨越狠多层级去import所需要的模块,这里就可以使用resolve.alias配置别名定义一个目录,不用太长路径,类似于import api from '../../../api这类出现。

生成环境配置文件分析

webpack配置生产环境,需要对css文件提取,js文件压缩等;一些公用类库文件进行提取,类似于vue,vue-router,vuex,axios

mini-css-extract-plugin

webpack4已经废弃了 extract-text-webpack-plugincss文件的提取,建议使用mini-css-extract-plugin。与webpack.dev.conf.js不同之处在于,由mini-css-extract-plugin替代style-loader。其中filename,定义抽取的css的名称。

clean-webpack-plugin

clean-webpack-plugin是清除每次打包chunk包。每次npm run build都会产生打包文件,所以使用clean-webpack-plugin很方便清除多余的文件。clean-webpack-plugin使用很简单。

uglifyjs-webpack-plugin

uglifyjs-webpack-plugin对打包的js文件进行压缩。minimizer中通过test正则表达式匹配js后缀对的文件进行压缩。

optimization.splitChunks

webpack3之前使用CommonsChunkPlugin进行分包。在webpack4中正式提供了optimization.splitChunks进行分包。在entry中设置了入口文件framework:["vue","vue-router","vuex"]需要分包的文件。在optimization.splitChunks定义抽取的文件。

生产环境全瞰

运行效果

开发环境预览

vue的项目中,使用了vue-router,vuex依赖包,运行效果如下所示:

开发环境打包

总结

后面关于打包构建速度的优化,可以查看下一篇webpack4自定义脚手架优化

关注下面的标签,发现更多相似文章
评论