前言
还有几天就初一了，先在这里个大家拜个年，恭喜发财，新年好！！！
上一期我们对webpack的构建进行了改进，添加了babelrc和postcss编译器，还有把项目的构建能力适应了多页面开发。但是大家发现这个工程还不能算得上是一个脚手架，尤其是添加了多页面能力之后，每次添加页面都要手动添加插件配置，所以我们要进行一些简单的封装，达到通过简单配置进行统一设置配置的效果。
GitHub : https://github.com/wwwjason1994/vue-cli-yourself
本期重点：对目前的项目进行简单的封装，简化项目配置难度
往期链接：
从搭建vue-脚手架到掌握webpack配置（一.基础配置）
从搭建vue-脚手架到掌握webpack配置（二.插件与提取)
从搭建vue-脚手架到掌握webpack配置（三.多页面构建）
构思配置文件
首先我们要构思一下具体那些配置项是我们会经常用到的，而且会需要经常修改的。
新建一个config目录，在该目录下新建index.js文件
index.js的内容如下：
const config = {
page:{
index:'./src/main.js',
home: ['./src/home.js','home page']
},
defaultTitle:"this is all title",//页面的默认title
externals : {//大三方外部引入库声明
'jquery':'window.jQuery'
},
cssLoader : 'less',//记得预先安装对应loader
// cssLoader : 'less!sass',//可以用!号添加多个css预加载器
usePostCSS : true, //需要提前安装postcss-loader
toExtractCss : true,
assetsPublicPath: '/',//资源前缀、可以写cdn地址
assetsSubDirectory: 'static',//创建的的静态资源目录地址
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,//调试开启时是否自动打开浏览器
uglifyJs : true,//是否丑化js
sourceMap : true,//是否开启资源映射
plugins:[]//额外插件
}
module.exports = config;
注意：配置项中的路径都相对于跟目录
配置项说明
page：就如webpack.config里面的entry,进行了改良，如果属性是数组的话，第二个参数是html的标题（title）
defaultTitle：是所有页面默认的title
externals：如注释
cssLoader：要使用的css预加载器，可以用!分割设置多个加载器，使用的同时记住npm install less-loader安装对应的loader
usePostCss：是否使用postcss,也是要预先安装post-loader
toExtractCss：是否抽取css文件
assetsPublicPath：资源的公共地址前缀，页面的所有资源引入会指向该地址，可以是一个cdn的域名。
assetsSubDirectory：要在根目录下创建一个static目录存放不被webpack编译的文件（静态文件），而assetsSubDirectory值是dist目录下的静态资源地址，如值是static的话，build之后，~\static目录下的文件就会被复制到dist/static目录下
host \port \autoOpenBrower：如注释
uglifyJs \sourceMap ：如注释
plugins：可以new一些插件进去
整理项目配置
在config目录下放封装的配置逻辑脚本文件，新建一个static目录放静态资源，多出的几个文件后面会慢慢道来
按版本生成代码
以免多次build代码的时候都会覆盖上次的生成记录，我们可以做一个小优化，用package.json里的version值作为目录名在dist下生成如dist/1.0.0/的目录
只要改一下output的值就能实现这一需求
output:{
path:path.resolve(__dirname,'./dist/'+ process.env.npm_package_version),
filename:"js/[name].js"
},
process.env.npm_package_version能得到package.json里的version值,具体参考这里
在每次build之前按需要修改package.json里的version值就可以区分版本生成目录
修改npm script
"scripts": {
"clean": "node config/build.js",
"build": "webpack --progress --hide-modules --config config/webpack.prod.conf.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot",
"c-b": "npm run clean && npm run build"
},
你会发现多了一个clean和c-b,而且build指向了一个新的文件 config/webpack.prod.conf.js,clean也运行了一个新的文件config/build.js。从名字能看出来clean是用来清理目录的，c-b是clean和build一起运行的
所以改完了npm script之后我们在config目录创建这两个文件吧。
config/webpack.prod.conf.js文件用于独立生成环境是用到的webpack配置项
config/build.js是清理逻辑。
先清理目录
config/build.js内容如下：
'use strict'
process.env.NODE_ENV = 'production'
const rm = require('rimraf')
const path = require('path')
// const webpack = require('webpack')
// const webpackConfig = require('./webpack.prod.conf')
rm(path.resolve(__dirname,'../dist/'+ process.env.npm_package_version), err => {
if (err) throw err
// webpack(webpackConfig, (err, stats) => {
// if (err) throw err
// })
})
就是简单地用node的rimraf组件删除当前版本的目录
为什么有一些注释的部分呢？
其实这些代码是从官方的vue-cli里面粘贴过来的，原本vue-cli默认是删除和webpack运行一起执行的，但是我发现这样做 一来没有了webpack --progress加载进度显示，二来要引入很多node插件来书写加载提示，三来clean和build一起执行太过绝对了。所以我把运行webpack的逻辑注释掉了，然后用npm script里的build进行代替。
独立生产环境配置
在上几期我们简单的用if (process.env.NODE_ENV === 'production')作为生产环境的判断，在webpack.config.js文件里面一起编写配置项。为了规范化和独立性，把if里的内容抽离到一个新的文件（config/webpack.prod.conf.js）里面,如下
process.env.NODE_ENV = 'production'
const path = require('path')
const config = require('../config')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require("../webpack.config.js")
const webpackConfig = merge(baseWebpackConfig, {
devtool : '#source-map',
output:{
path:path.resolve(__dirname,'../dist/'+ process.env.npm_package_version),
filename:"js/[name].[chunkhash].js",
chunkFilename:"js/[id].[chunkhash].js",
publicPath:config.assetsPublicPath || '/'
},
plugins :[
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
//提取多入库的公共模块
Object.keys(config.page).length >= 2 ? new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks:2
}):()=>{},
//抽取从node_modules引入的模块，如vue
new webpack.optimize.CommonsChunkPlugin({
name: 'vender',
minChunks:function(module,count){
var sPath = module.resource;
// console.log(sPath,count);
return sPath &&
/\.js$/.test(sPath) &&
sPath.indexOf(
path.join(__dirname, '../node_modules')
) === 0
}
}),
//将webpack runtime 和一些复用部分抽取出来
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks:Infinity
}),
//将import()异步加载复用的公用模块再进行提取
new webpack.optimize.CommonsChunkPlugin({
// name: ['app','home'],
async: 'vendor-async',
children: true,
deepChildren:true,
minChunks:2
}),
]
})
if(config.uglifyJs){
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.optimize.UglifyJsPlugin({
sourceMap: config.sourceMap,
compress: {
warnings: false
}
}),
])
}
if(config.sourceMap){
module.exports.devtool = false
}
module.exports = webpackConfig
process.env.NODE_ENV = 'production'首先声明当前是生成环境
const config = require('../config')引入了上面构思的配置项的配置文件
你会发现用到了webpack-merge插件（记得npm install --save-dev webpack-merge），顾名思义这是合并两个对象里面的webpack配置项的。
其他的就是生产代码时用到的公共块抽取插件、丑化js等插件，不清楚这些插件的可以翻回去看（二）和（三）期
还有重新配置了一下output的配置，主要是多了publicPath项，这是设置支援公用地址前缀的配置项。
重点来了！
用配置项进行自动配置项目的魅力就在于，可以通过通俗易懂的配置规则得到配置复杂的webpack构建逻辑的效果。这也正正是考验一个程序员编程能力的地方，半自动或全自动的配置背后可是执行着你封装的逻辑脚本。
自动配置多入口
我们之前构思的配置项第一个page就是一个声明多入口，他类似wepack里的entry，每一项对应一个入口，也对应一个页面，如下就对应两个页面
page:{
index:'./src/main.js',
home: ['./src/home.js','home page']
},
这可以说是半自动的配置方法，有的人会倾向于全自动的方法，就是通过查询给定的文件目录下包含的入口js文件自动生成入口配置，而不用像我这样手动声明用到的入口。感兴趣的可以参考这里：link
Jason做过不少的小程序开发，比较习惯明确的列出所包含的页面，所以更青睐这种半自动的配置方式。列明页面入口不仅方面深入添加自己想要的规则，而且可以通过该配置项知道本项目包含哪些页面。
开始封装
在config/index.js底下开始封装我们要的逻辑，当然你可以独立出一个新的文件。这里写到一起是因为，一方面考虑到入门教程的复杂性，另一方面我们可以在同一个文件下一遍对照配置项一遍封装逻辑。
const config = {
page:{
index:'./src/main.js',
home: ['./src/home.js','home page']
},
//...
}
module.exports = config;
/**
* some auto-create-function
*/
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const isProduction = process.env.NODE_ENV === 'production'
//自动生成HTML模板
const createHTMLTamplate = function(obj){
let htmlList = [];
let pageList = obj;
for(let key in pageList){
htmlList.push(
new HtmlWebpackPlugin({
filename: key + '.html',
title:Array.isArray(pageList[key])&&pageList[key][1]
?pageList[key][1].toString()
:config.defaultTitle,
template:path.resolve(__dirname,'../index.html'),
chunks:[key,'vender','manifest','common'],
chunksSortMode: 'dependency'
})
)
}
return htmlList
}
//设置多入口
const setEntry = function(obj){
let entry = {};
let pageList = obj;
for(let key in pageList){
if(Array.isArray(pageList[key]) && pageList[key][0]){
entry[key] = path.resolve(__dirname,'../'+pageList[key][0].toString());
}else{
entry[key] = path.resolve(__dirname,'../'+pageList[key].toString());
}
}
return entry
}
module.exports.plugins = (module.exports.plugins || []).concat(
createHTMLTamplate(config.page)
);
module.exports.entry = setEntry(config.page);
有点编程能力的同学不难看懂这些逻辑。只是遍历page值里面的每一项，返回entry和html模板插件数组。注意一点就是这里用了Array.isArray(pageList[key]判断当前是否数组，作简单的值兼容。
还是那句，不懂HtmlWebpackPlugin看前两期 或者 看这里
createHTMLTamplate 返回对应配置项的HtmlWebpackPlugin插件列表
setEntry 返回入口chunk对象entry
回到webpack.config.js
然后我们返回到webpack.config.js文件把这些方法的然后值引用到对应的配置项上。留意注释~~~~我在这里~~~~
const path = require('path')
const config = require('./config')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const merge = require('webpack-merge')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
baseWebpackConfig = {
entry:config.entry, //~~~~~~~~~我在这里~~~~~~~~
output:{
path:path.resolve(__dirname,'./dist/'+ process.env.npm_package_version),
filename:"js/[name].js"
},
module:{
rules:[
//...
]
},
plugins:[
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, './static'),
to: config.assetsSubDirectory,
}
])
].concat(config.plugins),//~~~~~~~我在这里~~~~~~~
resolve:{
extensions: ['.js', '.vue', '.json'],
alias:{
'vue$':'vue/dist/vue.esm.js',// 'vue/dist/vue.common.js' for webpack 1
'@': path.resolve(__dirname,'./src'),
}
},
externals:config.externals,
}
module.exports = baseWebpackConfig;
当然还用到了很多其他的配置项，检查一下config关键字自己对号入座。
自动添加css预处理器
同样在config/index.js下面添加自动配置css预处理器的逻辑，下面贴出代码有点长，但是请一定细心看一下，有注释帮助理解，认真看下其实重点逻辑也就中间一部分
const config = {
//...
cssLoader : 'less',//记得预先安装对应loader
// cssLoader : 'less!sass',//可以用!号添加多个css预加载器
usePostCSS : true, //需要提前安装postcss-loader
toExtractCss : true,
//...
}
module.exports = config;
/**
* some auto-create-function
*/
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const ExtractRootCss = new ExtractTextPlugin({filename:'styles/root.[hash].css',allChunks:false});
const ExtractVueCss = new ExtractTextPlugin({filename:'styles/[name].[chunkhash].css',allChunks:true});
const isProduction = process.env.NODE_ENV === 'production'
//自动生成HTML模板
const createHTMLTamplate = function(obj){
//...
}
//设置多入口
const setEntry = function(obj){
//...
}
//设置样式预处理器
const cssRules = {
less: {name:'less'},
sass: {name:'sass', options:{indentedSyntax: true}},
scss: {name:'sass'},
stylus: {name:'stylus'},
styl: {name:'stylus'}
}
//vue内嵌样式用到的配置规则
const cssLoaders = function(options){
options = options || {}
let loaders = {};
const loaderList = options.loaders
//判断样式是来自文件还是.vue文件内嵌，然后用对应的插件实例
const ExtractCss = options.isRootCss ? ExtractRootCss : ExtractVueCss;
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}//css-loader
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
//判断是否使用postcss
const frontLoader = options.usePostCSS ? [cssLoader,postcssLoader]:[cssLoader]
//出了less等预加载的loader之外，还一定要有一般css的编译
if(loaderList.indexOf('css') === -1)loaderList.unshift("css")
//遍历数组生成loader队列
loaderList.forEach(element => {
const loaderOptions = cssRules[element]&&cssRules[element].options;
const loaderName = cssRules[element]&&cssRules[element].name;
let arr = element==="css" ? [] : [{
loader: loaderName+"-loader",
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
}]
//是否提取到css文件
if(options.Extract){
loaders[element] = ExtractCss.extract({
use: frontLoader.concat(arr),
fallback: 'vue-style-loader'
})
}else{
loaders[element] = ['vue-style-loader'].concat(frontLoader,arr)
}
});
//是否提取到css文件
if(options.Extract){
module.exports.plugins = (module.exports.plugins || []).concat([ExtractRootCss,ExtractVueCss]);
}
return loaders
}
//样式文件用到的配置规则
const styleLoaders = function(options){
options.isRootCss = true;
let output = [];
const loaders = cssLoaders(options);
for (const extension in loaders) {
let loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
module.exports.plugins = (module.exports.plugins || []).concat(
createHTMLTamplate(config.page)
);
module.exports.entry = setEntry(config.page);
module.exports.styleLoaders = styleLoaders({
loaders: config.cssLoader.split('!'),
sourceMap : config.sourceMap,
usePostCSS : config.usePostCSS,
Extract : isProduction&&config.toExtractCss,//生成环境才判断是否进行提取
});
module.exports.cssLoaders = cssLoaders({
loaders: config.cssLoader.split('!'),
sourceMap : config.sourceMap,
//vue-loader内部自动开启postcss所以开发环境下会有警告，所以也是生成环境才进行进一步判断
usePostCSS : isProduction&&config.usePostCSS,
Extract : isProduction&&config.toExtractCss,
});
有看过vue-cli内部封装的代码（没看过也没关系）的同学可能会发现以上的代码有点像vue-cli里面的逻辑。Jason确实借鉴了一点vue-cli的封装思想。
cssRules ：该对象是预先设定好不同预加载的名称很options配置项。我们会发现同一种css处理器也会有不一样的规则和后缀名（就如sass和scss），构思的配置项里面很难一一列出，那么我们就要借助这里对象进行区分。后期有什么需要添加的options配置也可以在cssRules的第二个参数中添加。
cssLoaders：生成cssloader队列的方法，同时可以直接赋值到vue-loader内的规则里面。返回值如下
{
css:[vue-style-loader,css-loader],
less:[vue-style-loader,css-loader,less-loader]
}
styleLoaders：该方法则是匹配对应css处理器后缀名文件的配置规则。
细心的同学会留意到cssLoaders和styleLoaders，在对是否使用postcss时候多出 isProduction判断。因为 vue-loader内部自动开启postcss所以开发环境下会有警告，所以也是生成环境才进行进一步判断是否开启postcss。
再回到webpack.config.js
baseWebpackConfig = {
//...
module:{
rules:[
{
test:/\.js$/,
loader:"babel-loader",
exclude:/node_modules/
},
{
test:/\.(png|jpe?j|gif|svg)(\?.*)?$/,
loader:'url-loader',
options:{
limit:10000,
name:'img/[name].[ext]?[hash]'
}
},
{
test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader:"url-loader",
options:{
limit:10000,
name:'fonts/[name].[ext]?[hash]'
}
},
{
test:/\.vue$/,
loader:'vue-loader',
options:{
loaders: config.cssLoaders //~~~~~~~我在这里~~~~~~~
}
},
].concat(config.styleLoaders) //~~~~~~~我在这里~~~~~~~
},
//...
}
module.exports = baseWebpackConfig;
好了到现在半自动化的封装逻辑都写好了，下面选取一些需要注意的配置进行介绍。
其他配置项
host \port \autoOpenBrower
host \port \autoOpenBrower 这些和开发服务器相关的配置项，以前引入到webpack.config.js里面。
在webpack.config.js下面添加代码（你也可以想vue-cli一样再独立一个文件webpack.dev.conf.js），如下
const path = require('path')
const config = require('./config')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const merge = require('webpack-merge')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
baseWebpackConfig = {
entry:config.entry,
//...
}
if (process.env.NODE_ENV === 'development') {
console.log(process.env.NODE_ENV);
baseWebpackConfig = merge(baseWebpackConfig,{
devtool : '#eval-source-map',
devServer : {
clientLogLevel: 'warning',
historyApiFallback: true,
hot: true,
compress: true,
host: HOST || config.host,
port: PORT || config.port,
open: config.autoOpenBrowser,
publicPath:config.assetsPublicPath || '/'
},
plugins : [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"'
}
}),
new webpack.HotModuleReplacementPlugin()
]
})
}
module.exports = baseWebpackConfig;
显然，host和port都可以被process.env.PORT\HOST 覆盖。其他devServer配置项可以参考 官方文档
有一点要注意，HotModuleReplacementPlugin插件一定要在开启webpack-dev-server的时候才调用，所以要独立在该开发环境判断中。
assetsSubDirectory
一开始构思配置项的时候对该属性有介绍
assetsSubDirectory值是dist目录下的静态资源地址，如值是static的话，build之后，~\static目录下的文件就会被复制到dist/static目录下
而实现文件复制的插件是 CopyWebpackPlugin,使用前记得install
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, './static'),
to: config.assetsSubDirectory,
// ignore: ['.*']
}
])
assetsPublicPath
该项是地址前缀，如果用到了第三方配置资源的地址，那么这里就可以填写对应的域名。
开发环境中它在
devServer : {
clientLogLevel: 'warning',
historyApiFallback: true,
hot: true,
compress: true,
host: HOST || config.host,
port: PORT || config.port,
open: config.autoOpenBrowser,
publicPath:config.assetsPublicPath || '/'
},
生成环境中它在
output:{
path:path.resolve(__dirname,'../dist/'+ process.env.npm_package_version),
filename:"js/[name].[chunkhash].js",
chunkFilename:"js/[id].[chunkhash].js",
publicPath:config.assetsPublicPath || '/'
}
其他配置项都浅而易懂，不多解释，当然你可以发挥自己的创造力添加更多自己需要的配置项。
运行一下
运行清理并构建
npm run c-b
得到的如下结果
完整的项目、webapck.config.js、config/index.js等文件可以下载或者克隆本项目的github
GitHub : https://github.com/wwwjason1994/vue-cli-yourself
总结
整个系列学习编写vue脚手架的过程到这里算是得到了一个比较完整的入门，从一开始入门webpack的配置项、到引入常用插件实现文件抽离、再到适配多页面多入口、最终对项目进行自动化的封装。
不知不觉差不多实现vue官方给出的vue-cli里面的大部分能力，是不是发现自己不再是webpack的小白，还挺有成就感呢。
我们在整个学习的过程中有很多借鉴vue-cli的思想和规范。可能有人会说自己写这么麻烦干嘛，直接用vue-cli不就行了吗？此言差矣，这不仅是一个学习webpack的过程，更是学会因地制宜按项目的实际情况构建工程的过程。而且能让我们深入体会工程化和自动化的思想。
Jason的一些话
前段时间工作有点忙，而且广州寒气逼人下班都懒得动了，停更了差不多有一个月，虽然等更新的人不多，但是真的要跟有关注的同学说一声对不起。开始放假而且天气暖和了才把这一期码完，请大家原谅，也希望大家不要学我这个重度拖延症患者一样懒。
后面该码什么文章呢？
Jason写的这些文章文笔不怎么好，但都是以和大家一起学习一门技术为初衷在写，Jason相信有意去入门webpack的同学看完了这一系列的文章肯定对webpack有了更多的了解。
Jason后面会复习一下es6+ 和 想去深入学习一下node，还会写一些vue的项目。后面要写什么文章可能就看哪方面积累和了解的更深入，还有哪些内容跟适合总结成文章了。
大家有什么想和Jason一起学习的前端框架、技术，可以留言哦，欢迎给意见和交流。
后面会不定期更新，喜欢的同学可以点下关注的。
参考
- 使用webpack构建多页面应用
- npm scripts 使用指南
- https://vue-loader.vuejs.org/zh-cn/