"pages": [
{
"entry": "index",
"title": "title",
"cdn": {
"js": [],
"css":[]
}
}
],
"basePath": "./src/pages/pc",
"cdn": {
"js": [
"//cdn.bootcss.com/vue/2.0.7/vue.min.js",
"//cdn.bootcss.com/vuex/2.0.0/vuex.min.js"
],
"css": []
},
"externals": {
"vue": "Vue",
"vuex": "Vuex"
}
}
var Router = require('./router.json');
var _ = require('lodash');
var path = require('path');
var fs = require('fs');
// 遍历pages目录得到pagesArr数组
var pagesArr = fs.readdirSync(path.resolve(__dirname, '../src/pages/pc'));
// 得到router设置里的pages，与pages目录进行去重用
var routerArr = Router.pages.map((item) => {
return item.entry
});
// 得到pages根据router设置去重之后的pages,然后和routers配置进行合并
Router.pages = _.difference(pagesArr, routerArr).map((item) => {
return {
"entry": item,
"title": "",
"cdn": {}
}
}).concat(Router.pages);
// 合并私有js，css和公用的cdn
var merge = function(a, b) {
return {
css: (a.css || []).concat(b.css || []),
js: (a.js || []).concat(b.js || [])
}
};
// 获得多页面每个页面的入口文件
exports.entries = function() {
var result = {}
Router.pages.forEach(p => {
result[p.entry] = path.resolve(Router.basePath, p.entry)
})
return result
};
// 获得多页面的模板文件
exports.templates = function() {
return Router.pages.map(p => {
return {
title: p.title,
filename: 'views/pc/' + p.entry + '.html',
template: path.resolve(__dirname, '../src/tpl/index.tpl'),
cdn: merge(Router.cdn, p.cdn),
chunks: ['vendor', 'manifest', p.entry]
}
})
}
// 暴露全局变量
exports.externals = function() {
return Router.externals
}
var path = require('path');
var cooking = require('cooking');
var build = require('./build/build.js');
var isProd = process.env.NODE_ENV === 'production';
cooking.set({
entry: build.entries(), // 入口文件
dist: './dist', // 发布目录
template: build.templates(), // html文件
devServer: { // 开发服务器配置
port: 8081,
publicPath: '/',
},
clean: true, // 清空发布目录
hash: true, // 文件名hash
sourceMap: false, // 映射源码
chunk: true, // webpack 的 chunk 配置的简化。接受 String|Object。可以把公共的代码部分提取出去，默认为空
postcss: [],
publicPath: '/dist/', // cdn路径
assetsPath: 'static/pc/img',
urlLoaderLimit: 10000,
extractCSS: isProd ? 'static/pc/css/[name].[contenthash:7].css' : true, // 将 CSS 提取出成单独的文件。接受 Boolean|String，默认值为 [name].[contenthash:7].css
alias: { // 配置路径别名，同webpack 的 resolve.alias
'src': path.join(__dirname, 'src')
},
extends: ['vue2', 'buble', 'lint', 'autoprefixer'],
externals: build.externals() // 全局变量
});
isProd && cooking.add('output.filename', 'static/pc/js/[name].[hash:7].js');
module.exports = cooking.resolve();
// 遍历pages目录得到pagesArr数组
var pagesArr = fs.readdirSync(path.resolve(__dirname, '../src/pages/pc'));
// 得到router设置里的pages，与pages目录进行去重用
var routerArr = Router.pages.map((item) => {
return item.entry
});
// 得到pages根据router设置去重之后的pages,然后和routers配置进行合并
Router.pages = _.difference(pagesArr, routerArr).map((item) => {
return {
"entry": item,
"title": "",
"cdn": {}
}
}).concat(Router.pages);
比如配置某些页面可以忽略全局的 CDN 文件
如果熟悉 chunk，那么把 chunk 也抽离到配置文件里
给入口文件加开关，不一定每次启动都打包所有入口文件
开发模式不使用 CDN，只有生产环境下才使用html {
background-image: url(~src/pages/home/assets/aaa.png);
}