These are chat archives for QingWei-Li/cooking

25th
Nov 2016
Layne
@gengxuelei
Nov 25 2016 01:55
blob
blob
js和css可以自定义目录,图片、字体和svg怎么自定义呢
默认都放到static目录下去了
cinwell.li
@QingWei-Li
Nov 25 2016 03:07
@saopang assetsPath
Layne
@gengxuelei
Nov 25 2016 03:16
要是想把src目录里的图片经过url-loader处理后放到dist目录里要怎么配置呢
Layne
@gengxuelei
Nov 25 2016 03:29
blob
blob
blob
小于10k的没有base64,大于10k的没有打包到dist
npm run dev/dist都不行
cinwell.li
@QingWei-Li
Nov 25 2016 03:31
src 前面 /
去掉
Layne
@gengxuelei
Nov 25 2016 03:38
blob
cinwell.li
@QingWei-Li
Nov 25 2016 03:40
。。。奇怪
Layne
@gengxuelei
Nov 25 2016 03:42
如果不带/,就像相当于./了
cinwell.li
@QingWei-Li
Nov 25 2016 03:42
不应该的
不知道为啥没有被 url-loader 处理
Layne
@gengxuelei
Nov 25 2016 03:42
alias: { // 配置路径别名,同webpack 的 resolve.alias
'src': path.join(__dirname, 'src')
},
按说有这个应该是访问到的对吧
cinwell.li
@QingWei-Li
Nov 25 2016 03:43
是的
你这个样式写在哪的 仓库有公开么
Layne
@gengxuelei
Nov 25 2016 03:48
试了一下,写在vue文件,import引入的css,html里的img貌似都不行
暂时没有公开仓库
cinwell.li
@QingWei-Li
Nov 25 2016 03:48
那你写个 demo 项目吧
弄好了我来看
cinwell.li
@QingWei-Li
Nov 25 2016 03:49
直接在里面加的图片是吧?
Layne
@gengxuelei
Nov 25 2016 03:49
{
"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();

cinwell.li
@QingWei-Li
Nov 25 2016 03:50
额 你还是弄个 demo 吧
Layne
@gengxuelei
Nov 25 2016 03:50
好的,我弄个demo
cinwell.li
@QingWei-Li
Nov 25 2016 03:51
是的
Layne
@gengxuelei
Nov 25 2016 03:51
干的漂亮!
cinwell.li
@QingWei-Li
Nov 25 2016 03:51
🌚
Layne
@gengxuelei
Nov 25 2016 03:52
不过,把所有的pages写到app.json里有些冗余,

// 遍历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);

cinwell.li
@QingWei-Li
Nov 25 2016 03:53
只是个 demo 而已,并没有考虑太多实际项目
自己改就好了
Layne
@gengxuelei
Nov 25 2016 03:53
建议通过fs读取目录数组,然后合并一下json里的配置
唉,大神就是大神
这个方案被我用到生产环境了……
cinwell.li
@QingWei-Li
Nov 25 2016 03:53
Layne
@gengxuelei
Nov 25 2016 03:54
这个方案有个小问题就是如果同时监听的文件太多,占用的内存有点大,现在大概十几个文件被监听,占用了1个g内存
cinwell.li
@QingWei-Li
Nov 25 2016 03:55
是的
很多不完善的地方
比如配置某些页面可以忽略全局的 CDN 文件
如果熟悉 chunk,那么把 chunk 也抽离到配置文件里
给入口文件加开关,不一定每次启动都打包所有入口文件
开发模式不使用 CDN,只有生产环境下才使用
Layne
@gengxuelei
Nov 25 2016 03:56
还有就是pc端和app的一些html文件一般是多页面入口的,微信一般是单页面入口的
cinwell.li
@QingWei-Li
Nov 25 2016 03:56
我 roadmap 有提 😂
没时间弄 欢迎 pr
Layne
@gengxuelei
Nov 25 2016 03:57
好的,先去吃饭
Layne
@gengxuelei
Nov 25 2016 06:47
@QingWei-Li 你写的demo也跑不通
直接拉下来跑了一下
有没有'/'都不行
cooking-cli更新到1.2.5也不行
cinwell.li
@QingWei-Li
Nov 25 2016 06:49
OK 那我试试
cinwell.li
@QingWei-Li
Nov 25 2016 06:55
@saopang 是单独的 css 文件么
html {
  background-image: url(~src/pages/home/assets/aaa.png);
}
我这是正常的哦
Layne
@gengxuelei
Nov 25 2016 06:56
在.vue文件里
cinwell.li
@QingWei-Li
Nov 25 2016 06:56
<template>
  <div>
    <h1>首页</h1>
    <p>A vue project.</p>
  </div>
</template>

<script>
  export default {
    name: 'app'
  };
</script>

<style>
  html {
    height: 100px;
    background-image: url(~src/pages/home/assets/aaa.png);
  }
</style>
vue 里也是正常的哦
blob
Layne
@gengxuelei
Nov 25 2016 06:59
blob
这个~是什么鬼
加了我的也好了
cinwell.li
@QingWei-Li
Nov 25 2016 07:00
额 就是要加这个哦
Layne
@gengxuelei
Nov 25 2016 07:00
文档有说嘛
这个是 css loader 的
Layne
@gengxuelei
Nov 25 2016 07:03
如果没有看这篇文档估计死一大片,建议在cooking文档给个提醒
cinwell.li
@QingWei-Li
Nov 25 2016 07:05
额 其实不是必须加的
如果是相对路径
就直接写就好了
😂 vue-loader 文档也有提呀
Layne
@gengxuelei
Nov 25 2016 07:05
绝对路径写着舒服一点
唉,基础不好的折腾脚手架==作死