These are chat archives for QingWei-Li/cooking

29th
Jun 2016
ISCLOUDX
@ISCLOUDX
Jun 29 2016 06:47
@QingWei-Li ElemeFE/cooking#57
老板 我发了个issuses
好像修改get-base-config.js 里面的内容就可以解决问题
cinwell.li
@QingWei-Li
Jun 29 2016 06:49
。。。
ISCLOUDX
@ISCLOUDX
Jun 29 2016 06:49
font: {
          test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
          loader: 'url-loader',
          query: {
            limit: limit,
            name: path.join(assetsPath, '[name].[hash:7].[ext]')
          }
        },
        svg: {
          test: /\.svg(\?\S*)?$/,
          loader: 'url-loader',
          query: {
            limit: limit,
            name: path.join(assetsPath, '[name].[hash:7].[ext]')
          }
        },
        image: {
          test: /\.(gif|png|jpe?g)(\?\S*)?$/,
          loader: 'url-loader',
          query: {
            limit: limit,
            name: path.join(assetsPath, '[name].[hash:7].[ext]')
          }
        }
cinwell.li
@QingWei-Li
Jun 29 2016 06:51
还是说只是 url-loader 里的路径需要这样处理?
ISCLOUDX
@ISCLOUDX
Jun 29 2016 06:51
是的
我先试试
path.posix.join
cinwell.li
@QingWei-Li
Jun 29 2016 06:57
vuejs-templates/webpack@d6e0a09
原来真有这问题。。
所有的 path.join 的地方都要换掉。。
ISCLOUDX
@ISCLOUDX
Jun 29 2016 06:58
果然
我修改了你那个get-base-config
'use strict'

const path = require('path')
const webpack = require('webpack')
const PATH = require('./path')

module.exports = userConfig => {
  let limit = 1

  if (userConfig.urlLoaderLimit !== false) {
    limit = userConfig.urlLoaderLimit || 10000
  }
  const assetsPath = userConfig.assetsPath || 'static'

  return {
    output: {
      path: path.resolve(PATH.CWD_PATH, 'dist'),
      publicPath: '/dist/',
      filename: '[name].js',
      chunkFilename: '[id].js'
    },

    template: true,

    plugins: {
      occurenceorder: new webpack.optimize.OccurenceOrderPlugin()
    },

    resolve: {
      extensions: ['', '.js', '.json']
    },

    resolveLoader: {},

    module: {
      loaders: {
        js: {
          test: /\.(jsx?|babel|es6)$/,
          include: PATH.CWD_PATH,
          exclude: /node_modules|bower_components/,
          loaders: ['babel-loader']
        },
        json: {
          test: /\.json$/,
          loaders: ['json-loader']
        },
        css: {
          test: /\.css$/,
          loaders: ['style-loader', 'css-loader']
        },
        html: {
          test: /\.html$/,
          loaders: ['html-loader?minimize=false']
        },
        font: {
          test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
          loader: 'url-loader',
          query: {
            limit: limit,
            name:  path.posix.join(assetsPath, '[name].[hash:7].[ext]')
          }
        },
        svg: {
          test: /\.svg(\?\S*)?$/,
          loader: 'url-loader',
          query: {
            limit: limit,
            name:  path.posix.join(assetsPath, '[name].[hash:7].[ext]')
          }
        },
        image: {
          test: /\.(gif|png|jpe?g)(\?\S*)?$/,
          loader: 'url-loader',
          query: {
            limit: limit,
            name:  path.posix.join(assetsPath, '[name].[hash:7].[ext]')
          }
        }
      }
    }
  }
}
这样就对了
暂时没有发现其他问题
什么时候可以更新呀
cinwell.li
@QingWei-Li
Jun 29 2016 07:03
我在改
ISCLOUDX
@ISCLOUDX
Jun 29 2016 07:03
好哒
cinwell.li
@QingWei-Li
Jun 29 2016 07:11
DONE
kokoro
@kokoroX
Jun 29 2016 07:14
请问一下 要怎么在使用less插件或者sass插件的情况下引入autoprefixer?
cinwell.li
@QingWei-Li
Jun 29 2016 07:15
vue-loader 自带 autoprefixer 的
如果是单独的样式文件,不在 vue 文件里,就需要自己配 autoprefixer 插件了
kokoro
@kokoroX
Jun 29 2016 07:17
可以提供个思路吗 有一些单独的样式 需要用到autoprefixer 但是我用cooking.add()不行的样子
用 postcss-loader 和 autoperfixer
kokoro
@kokoroX
Jun 29 2016 07:28
3Q 是直接extends: ['vue', 'lint', 'less', 'postcss', 'autoperfixer']吗?
cinwell.li
@QingWei-Li
Jun 29 2016 07:28
并没有 autoperfixer 的 cooking 插件 😂
需要自己配置一个
cooking-postcss 配置也是针对 css 文件的
  cooking.add('preLoader.postcss', {
    test: /\.scss$/,
    loaders: ['postcss-loader']
  })

  cooking.add('postcss', function() {
    return [
      require('postcss-autoprefixer')
    ]
  })
然后自己去下载 postcss postcss-loader postcss-autoprefixer 的依赖
ISCLOUDX
@ISCLOUDX
Jun 29 2016 07:39
用什么对vue文件里面的style type=less 处理呀
cinwell.li
@QingWei-Li
Jun 29 2016 07:40
vue-loader 自带 autoprefix 的吧
kokoro
@kokoroX
Jun 29 2016 07:41
@QingWei-Li 对啊 之前用官方脚手架的时候 autoprefixer都自带着。。话说 postcss-autoprefixer是autoprefixer吗?没有这个npm仓库
貌似就是 autoprefixer
autoprefixer 是 vue-loader 自带的
kokoro
@kokoroX
Jun 29 2016 07:46
@QingWei-Li 还是不行。。报了一堆错 是不是postcss和less的一些语法有冲突
cinwell.li
@QingWei-Li
Jun 29 2016 07:46
什么错
kokoro
@kokoroX
Jun 29 2016 07:47
@QingWei-Li 在vue文件里直接写样式是会帮带上前缀 不过在js里import进来的文件就没有
 ERROR in ./~/css-loader!/Users/aiya/.cooking/~/less-loader!./~/postcss-loader!./example/pagination/index.less
    /Users/aiya/Desktop/demo/example/pagination/index.less:6:4: Unknown word

    .@{pagination-prefix-cls} {
       ^
      font-size: @font-size-base;

    ERROR in ./~/css-loader!/Users/aiya/.cooking/~/less-loader!./~/postcss-loader!./example/pagination/index.less
    Module build failed: TypeError: Cannot read property 'replace' of undefined
        at Object.Parser.parse (/Users/aiya/.cooking/node_modules/less/lib/less/parser/parser.js:114:22)
        at Object.parse (/Users/aiya/.cooking/node_modules/less/lib/less/parse.js:61:18)
        at Object.render (/Users/aiya/.cooking/node_modules/less/lib/less/render.js:25:18)
        at Object.module.exports (/Users/aiya/.cooking/node_modules/less-loader/index.js:62:7)
     @ ./example/pagination/index.less 4:14-182 13:2-17:4 14:20-188

    ERROR in /Users/aiya/.cooking/~/less-loader/stringify.loader.js!./example/style/themes/default.less
    /Users/aiya/Desktop/demo/example/style/themes/default.less:139:1: Unknown word
    @label-color                 : @text-color;
    // Input
    ^
    @input-height-base: 28px;

    ERROR in /Users/aiya/.cooking/~/less-loader/stringify.loader.js!./example/style/themes/default.less
    Module build failed: Error: Final loader didn't return a Buffer or String
        at DependenciesBlock.onModuleBuild (/usr/local/lib/node_modules/cooking/node_modules/webpack-core/lib/NormalModuleMixin.js:299:42)
        at nextLoader (/usr/local/lib/node_modules/cooking/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
        at /usr/local/lib/node_modules/cooking/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
        at runSyncOrAsync (/usr/local/lib/node_modules/cooking/node_modules/webpack-core/lib/NormalModuleMixin.js:159:13)
        at nextLoader (/usr/local/lib/node_modules/cooking/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
        at /usr/local/lib/node_modules/cooking/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
        at context.callback (/usr/local/lib/node_modules/cooking/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
        at /Users/aiya/Desktop/demo/node_modules/postcss-loader/index.js:72:17
        at runMicrotasksCallback (node.js:367:7)
        at _combinedTickCallback (node.js:376:9)
        at process._tickCallback (node.js:407:11)
     @ ./~/css-loader!/Users/aiya/.cooking/~/vue-loader/lib/style-rewriter.js!/Users/aiya/.cooking/~/less-loader!/Users/aiya/.cooking/~/vue-loader/lib/selector.js?type=style&index=0!./example/app.vue

    ERROR in /Users/aiya/.cooking/~/less-loader/stringify.loader.js!./example/style/mixins/index.less
    /Users/aiya/Desktop/demo/example/style/mixins/index.less:1:1: Unknown word
    // Mixins
    ^
    // --------------------------------------------------

    ERROR in /Users/aiya/.cooking/~/less-loader/stringify.loader.js!./example/style/mixins/index.less
    Module build failed: Error: Final loader didn't return a Buffer or String
        at DependenciesBlock.onModuleBuild (/usr/local/lib/node_modules/cooking/node_modules/webpack-core/lib/NormalModuleMixin.js:299:42)
        at nextLoader (/usr/local/lib/node_modules/cooking/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
        at /usr/local/lib/node_modules/cooking/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
        at runSyncOrAsync (/usr/local/lib/node_modules/cooking/node_modules/webpack-core/lib/NormalModuleMixin.js:159:13)
        at nextLoader (/usr/local/lib/node_modules/cooking/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
        at /usr/local/lib/node_modules/cooking/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
        at context.callback (/usr/local/lib/node_modules/cooking/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
        at /Users/aiya/Desktop/demo/node_modules/postcss-loader/index.js:72:17
        at runMicrotasksCal
cinwell.li
@QingWei-Li
Jun 29 2016 07:48
哦 不该 preLoader 你试试 postLoader
在 less-loader 之后再 postcss-loader
kokoro
@kokoroX
Jun 29 2016 07:52
less我是用的那个cooking-less 这样是不是不能改顺序?得自己引loader吗
报错没刚才多了 还有2个less-loader相关的报错
cinwell.li
@QingWei-Li
Jun 29 2016 07:53
可以改啊 那就不用 cooking-less 了
原则上不应该去动插件的配置 不然就覆盖原来的配置
kokoro
@kokoroX
Jun 29 2016 08:14
cooking.add('loader.less', {
  test: /\.less$/,
  loaders: ['less-loader']
});

cooking.add('loader.css', {
  test: /\.css$/,
  loaders: ['css-loader']
});

cooking.add('loader.postcss', {
  test: /\.css$/,
  loaders: ['postcss-loader']
});

cooking.add('postcss', function() {
  return [
    require('autoprefixer')
  ];
});

cooking.add('loader.style', {
  test: /\.css$/,
  loaders: ['style-loader']
});
这样配有什么问题吗 @import还是报错
cinwell.li
@QingWei-Li
Jun 29 2016 08:15
有问题
  1. 样式相关的 loader 还和 ExtractTextPlugin 有关,除非你不想使用提取样式文件的功能
你这么配置,dev 和 prod 环境得到的 css 都是在最终的 js 文件里
cooking.add('loader.style', {
  test: /\.css$/,
  loaders: ['style-loader']
});
已经配置了匹配 css 文件的 loader 这里加上 style-loader 虽然你放在后面可以,但是只是碰巧顺序符合了
应该是 loaders: [style-loader!css-loader]
还有 less 文件也要配置 stlye-loader
🌚 具体还是看看 webpack 样式相关的 loader 配置吧
kokoro
@kokoroX
Jun 29 2016 08:19
@QingWei-Li 好的 谢谢耐心解答 顺便再问一个问题 自己要是封装了插件 只能传了npm才能用吗?
这边回复效率好高。。👏
cinwell.li
@QingWei-Li
Jun 29 2016 08:20
是的
如果你想开发一个插件的话,可以到 ~/.cooking 目录下 npm install 插件路径 来进行测试
kokoro
@kokoroX
Jun 29 2016 09:17
cooking.add('loader.less', {
  test: /\.less$/,
  loaders: ['style-loader', 'css-loader', 'autoprefixer-loader', 'less-loader']
});

cooking.add('loader.css', {
  test: /\.css$/,
  loaders: ['style-loader', 'css-loader', 'autoprefixer-loader']
});
能用了 @QingWei-Li 3q
cinwell.li
@QingWei-Li
Jun 29 2016 09:18
嗯 你这样就要自己配置下 extractTextPlugin 了 如果要导出样式文件的话 🌚
这么一说似乎可以写一个 cooking 的 autoprefixer 插件 🌚