@fxext/cli/lib/webpack/rules.js

fanxing miniapp cli

const PostConf = require('./postcss.conf');
const path = require('path');

module.exports = (config, builder, { framework }) => {
  // const includePaths = [path.resolve('node_modules'), config.path.src];
  // 样式
  const styleLoaders = [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
      options: {
        modules: config.cssModule,
        sourceMap: config.cssSourceMap,
        importLoaders: 2,
      },
    },
  ];
  if (framework === 'vue') {
    styleLoaders.unshift({
      loader: 'vue-style-loader'
    });
  }
  const rules = [
    {
      test: /\.ico$/,
      loader: 'url-loader',
      options: {
        name: '[name].[ext]',
      },
    },
    {
      test: /\.(jpe?g|png|gif|svg|eot|ttf|woff|woff2|mp3|mp4)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10,
            name: `${config.imgDir}/${config.picHashName}.[ext]`,
            esModule: false,
          },
        },
      ],
    },
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    },
    {
      test: /\.jsx?$/,
      loader: 'happypack/loader?id=1',
      exclude: /node_modules/,
    },
    {
      test: /\.css$/,
      use: styleLoaders.concat([
        {
          loader: 'postcss-loader',
          options: {
            plugins: PostConf(),
          },
        },
      ]),
    },
    {
      test: /\.s(a|c)ss$/,
      oneOf: [
        {
          resource: /\.pc\./,
          use: [
            ...styleLoaders,
            {
              loader: 'postcss-loader',
              options: {
                plugins: PostConf(builder.pcDesignWidth / 10),
              },
            },
            {
              loader: 'sass-loader',
              options: {
                implementation: require('sass'),
              },
            },
          ],
        },
        {
          resource: /^(?!.*(\.(pc)?\.)).*$/,
          use: [
            ...styleLoaders,
            {
              loader: 'postcss-loader',
              options: {
                plugins: PostConf(builder.designWidth / 10),
              },
            },
            {
              loader: 'sass-loader',
              options: {
                implementation: require('sass'),
              },
            },
          ],
        }
      ],
    },
    {
      test: /\.proto$/,
      use: {
        loader: 'protobufjs-loader-webpack4',
        options: {
          /* controls the "target" flag to pbjs - true for
           * json-module, false for static-module.
           * default: false
           */
          json: true,

          /* import paths provided to pbjs.
           * default: webpack import paths (i.e. config.resolve.modules)
           */
          paths: ['/path/to/definitions'],

          /* additional command line arguments passed to
           * pbjs, see https://github.com/dcodeIO/ProtoBuf.js/#pbjs-for-javascript
           * for a list of what's available.
           * default: []
           */
          pbjsArgs: ['--no-encode'],
        },
      },
    },
  ];
  return rules;
};