webpack4自定义项目脚手架

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

脚手架目录

这个脚手架时基于webpack 4.36.1,配置部分可能跟webpack3版本有冲突，过程之中会提出。如今主要webpack配置主要分打包环境和开发环境，分别对应webpack.dev.conf.js和webpack.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-loader和node-sass支持，scss文件处理loader执行顺序是从后面往前执行的，sass-loader,css-loader，style-loader。

对于处理es6语法，须要babel-loader转换编译，而babel-loader须要@babel/core,@babel/preset-env。如今用的babel-loader是8.0.6版本，须要比较新版本的@babel/core,@babel/preset-env配合使用。在根目录下建立一个.babelrc文件，内容以下：

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

设置输出路径

output字段设置打包文件输出路径配置。filename是输出文件命令，其中name,hash都是内置的变量名，还包括id和chunkhash打包内容哈希值。path是输出路径指定，若是采起相对路径，是相对于当前运行的路径。这里采起的经过path.resolve来配置路径。其中publicPath字段是配置发布到线上资源的 URL 前缀，为string 类型，这里若是设置了vue-router的base,须要对此字段进行配置，否则会出现资源路径问题。

注入打包后的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-plugin对css文件的提取，建议使用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自定义脚手架优化。