为小程序编译添加webpack loader

[ekil1100]

问题描述

在使用taro+apollo的时候，我想要引用.gql文件，但是在添加了小程序的loader后依旧编译失败。

index.js 配置文件

const config = {
  projectName: 'glaiolus',
  date: '2019-12-23',
  designWidth: 750,
  deviceRatio: {
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2,
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: {
    babel: {
      sourceMap: true,
      presets: [
        [
          'env',
          {
            modules: false,
          },
        ],
      ],
      plugins: ['transform-decorators-legacy', 'transform-class-properties', 'transform-object-rest-spread'],
    },
  },
  defineConstants: {},
  copy: {
    patterns: [],
    options: {},
  },
  weapp: {
    webpackChain(chain) {
      chain.merge({
        module: {
          rule: {
            myloader: {
              test: /\.(graphql|gql)$/,
              exclude: /node_modules/,
              use: [
                {
                  loader: 'graphql-tag/loader',
                  options: {},
                },
              ],
            },
          },
        },
      })
    },
    module: {
      postcss: {
        autoprefixer: {
          enable: true,
          config: {
            browsers: ['last 3 versions', 'Android >= 4.1', 'ios >= 8'],
          },
        },
        pxtransform: {
          enable: true,
          config: {},
        },
        url: {
          enable: true,
          config: {
            limit: 10240, // 设定转换尺寸上限
          },
        },
        cssModules: {
          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            namingPattern: 'module', // 转换模式，取值为 global/module
            generateScopedName: '[name]__[local]___[hash:base64:5]',
          },
        },
      },
    },
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    module: {
      postcss: {
        autoprefixer: {
          enable: true,
          config: {
            browsers: ['last 3 versions', 'Android >= 4.1', 'ios >= 8'],
          },
        },
        cssModules: {
          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            namingPattern: 'module', // 转换模式，取值为 global/module
            generateScopedName: '[name]__[local]___[hash:base64:5]',
          },
        },
      },
    },
  },
  mini: {
    webpackChain(chain) {
      chain.merge({
        module: {
          rule: {
            myloader: {
              test: /\.(graphql|gql)$/,
              exclude: /node_modules/,
              use: [
                {
                  loader: 'graphql-tag/loader',
                  options: {},
                },
              ],
            },
          },
        },
      })
    },
  },
}

module.exports = function(merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}

编译报错

错误  编译失败  src/pages/nodes/nodes.gql
SyntaxError: /Users/Like/work/byteark/gladiolus/src/pages/nodes/nodes.gql: Unexpected token, expected ; (1:9)
> 1 | fragment deviceInfo on DeviceList {
    |          ^
  2 |   count
  3 |   list {
  4 |     id
    at Parser.pp$5.raise (/Users/Like/.nvm/versions/node/v12.13.0/lib/node_modules/@tarojs/cli/node_modules/babylon/lib/index.js:4454:13)
    at Parser.pp.unexpected (/Users/Like/.nvm/versions/node/v12.13.0/lib/node_modules/@tarojs/cli/node_modules/babylon/lib/index.js:1761:8)
    at Parser.pp.semicolon (/Users/Like/.nvm/versions/node/v12.13.0/lib/node_modules/@tarojs/cli/node_modules/babylon/lib/index.js:1742:38)
    at Parser.pp$1.parseExpressionStatement (/Users/Like/.nvm/versions/node/v12.13.0/lib/node_modules/@tarojs/cli/node_modules/babylon/lib/index.js:2236:8)
    at Parser.parseExpressionStatement (/Users/Like/.nvm/versions/node/v12.13.0/lib/node_modules/@tarojs/cli/node_modules/babylon/lib/index.js:5934:20)
    at Parser.pp$1.parseStatement (/Users/Like/.nvm/versions/node/v12.13.0/lib/node_modules/@tarojs/cli/node_modules/babylon/lib/index.js:1911:17)
    at Parser.parseStatement (/Users/Like/.nvm/versions/node/v12.13.0/lib/node_modules/@tarojs/cli/node_modules/babylon/lib/index.js:5910:22)
    at Parser.pp$1.parseBlockBody (/Users/Like/.nvm/versions/node/v12.13.0/lib/node_modules/@tarojs/cli/node_modules/babylon/lib/index.js:2268:21)
    at Parser.pp$1.parseTopLevel (/Users/Like/.nvm/versions/node/v12.13.0/lib/node_modules/@tarojs/cli/node_modules/babylon/lib/index.js:1778:8)
    at Parser.parse (/Users/Like/.nvm/versions/node/v12.13.0/lib/node_modules/@tarojs/cli/node_modules/babylon/lib/index.js:1673:17) {
  pos: 9,
  loc: Position { line: 1, column: 9 },
  _babel: true,
  codeFrame: '\u001b[0m\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 1 | \u001b[39mfragment deviceInfo on \u001b[33mDeviceList\u001b[39m {\n' +
    ' \u001b[90m   | \u001b[39m         \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n' +
    ' \u001b[90m 2 | \u001b[39m  count\n' +
    ' \u001b[90m 3 | \u001b[39m  list {\n' +
    ' \u001b[90m 4 | \u001b[39m    id\u001b[0m'
}

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[luckyadam]

在 2.0 时代，小程序才是使用 webpack 编译
#4837

[taro-bot]

CC @luckyadam

[shenghanqin]

@lastingman 等待2.0的发布，或者提前测试一下2.0 beta版本。等2.0发布后第一时间使用webpack loader，嘻嘻。

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~