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

fanxing miniapp cli

const path = require('path');
const yargs = require('yargs');
const { getJsEntry } = require('../utils');

// 默认服务端口
const DEF_WEB_PORT = '9002';
// 默认 CDN 域名（appp build 的时候不需要域名）
const DEF_CDN_DOMAIN = process.env.APP_BUILD ? '' : 'https://s4fx.kgimg.com';
// CDN URI 前缀
const CDN_URI_PREFIX = '/pub2';
// 页面服务 URI 前缀
const WEB_URI_PREFIX = '/cterm/';
// 服务端口
const WEB_PORT = process.env.PORT || DEF_WEB_PORT;
// 静态资源 CDN 域名
const CDN_DOMAIN = typeof process.env.CDN_DOMAIN !== 'undefined' ? process.env.CDN_DOMAIN : DEF_CDN_DOMAIN;
// 环境变量
const ENV = (process.env.NODE_ENV || 'development').trim();
const isProduction = ENV === 'production';
let PAGE_NAME = yargs.argv.page || '';
if (PAGE_NAME.includes(',')) {
  PAGE_NAME = `*(${PAGE_NAME.replace(/,/g, '|')})`;
}

// 资源路径
const BASENAME = path.dirname(__dirname);
const PATH_SRC = path.resolve(BASENAME, 'src');

// 文件 hash
const HASH = '[hash:6]';
const CHUNK_HASH = '[chunkhash:6]';
const CONTENT_HASH = '[contenthash:6]';

const CWD = process.cwd();

// 不经 webpack 打包的资源
const assets = [
  {
    src: path.resolve(CWD, `./node_modules/react/umd/react.development.js`),
    path: path.resolve(`./node_modules/react/umd/react.development.js`),
    pub: './assets/js/',
    hash: true,
  },
  {
    src: path.resolve(CWD, `./node_modules/react-dom/umd/react-dom.development.js`),
    path: path.resolve(`./node_modules/react-dom/umd/react-dom.development.js`),
    pub: './assets/js/',
    hash: true,
  },
];

module.exports = {
  env: ENV,
  isProduction: isProduction,
  path: {
    src: PATH_SRC,
    dev: path.resolve(BASENAME, 'dev'),
    pub: path.join(path.resolve(BASENAME), CDN_URI_PREFIX, WEB_URI_PREFIX),
    cache: path.resolve(BASENAME, '.cache'),
  },
  uri: {
    cdnDomain: CDN_DOMAIN,
    pub: `${CDN_URI_PREFIX}${WEB_URI_PREFIX}`,
  },
  port: WEB_PORT,
  webserver: WEB_URI_PREFIX,
  cdn: `${CDN_DOMAIN}${CDN_URI_PREFIX}${WEB_URI_PREFIX}`,
  cssCdn: `${CDN_DOMAIN}${CDN_URI_PREFIX}${WEB_URI_PREFIX}`,
  imgCdn: `${CDN_DOMAIN}${CDN_URI_PREFIX}${WEB_URI_PREFIX}`,
  imgDir: 'img',
  // 是否清理生成文件夹
  clean: true,
  // sourcemap, 请写具体的 sourcemap 名称，而不是写 true
  sourceMap: {
    development: 'cheap-module-inline-source-map',
    production: false,
  },
  cssSourceMap: false,
  // 生产环境是否提取 css
  extractCss: true,
  // 是否启用 css 模块化
  cssModule: false,
  // 生产环境下资源(js, css, html)是否压缩
  compress: true,
  // 不经 webpack 打包的资源（app build 的时候不用）
  assets: process.env.APP_BUILD ? [] : assets,
  // 利用DefinePlugin给应用注入变量
  injectVar: {
    'process.env': {
      NODE_ENV: JSON.stringify(ENV),
    },
  },
  // webpack resolve.alias 包别名
  alias: {
    '@': path.join(PATH_SRC),
    IMG: path.join(PATH_SRC, 'common', 'img'),
    CSS: path.join(PATH_SRC, 'common', 'css'),
    JS: path.join(PATH_SRC, 'common', 'js'),
    COMPONENTS: path.join(PATH_SRC, 'common', 'components'),
    CORE: path.join(PATH_SRC, 'miniapp-common', 'core'),
    '%': path.join(PATH_SRC, 'page'),
    '@fx/ext': path.join(PATH_SRC, 'fx-ext'),
  },
  // 文件名与哈希
  hash: HASH,
  chunkhash: CHUNK_HASH,
  contenthash: CONTENT_HASH,
  hashName: this.isProduction ? `[name]_${HASH}` : `[name]`,
  picHashName: `[name]_${HASH}`,
  chunkhashName: this.isProduction ? `[name]_es5_${CHUNK_HASH}` : '[name]',
  contenthashName: this.isProduction ? `[name]_${CONTENT_HASH}` : '[name]',
  // 自动扫描js entry，约定src/page/xxx/(m|pc)/app/*.js[x]
  // { 'sample/m/app/index': [path.join(PATH_SRC, 'page/sample/m/app/index.js')] }
  entry: getJsEntry(`/*(m|pc|streamer_pc)/app/*.js`, path.join(process.cwd(), '/')),
  html: [
    { key: 'index', path: path.join(__dirname, 'index.html'), type: 'm' },
    { key: 'widget', path: path.join(__dirname, 'widget.html'), type: 'm' },
    { key: 'streamer_pc', path: path.join(__dirname, 'streamer_pc.html'), type: 'streamer_pc' },
  ],
  sdkVersion: '1.0.0'
};