alibaba / ice

🚀 ice.js: The Progressive App Framework Based On React(基于 React 的渐进式应用框架)
https://ice.work
MIT License
17.83k stars 2.09k forks source link

ice.config.js 是否支持编译打包生成的单个js css文件,目前默认的配置生成了一堆文件,查看文档无果,没有找到相应的配置。 #2485

Closed gluo1130 closed 5 years ago

gluo1130 commented 5 years ago

问题描述

ice.config.js 是否支持编译打包生成的单个js css文件,目前默认的配置生成了一堆文件,查看文档无果,没有找到相应的配置。

错误信息

image

ice: ice2.x npm: 6.2.0 node: v10.9.0

package.json:

{
  "name": "fe-saas",
  "version": "1.0.0",
  "description": "该模板提供了 Redux、Mock、国际化、权限管理、注册登录等完整的方案,且内置了丰富的区块,主要用于展示现有区块的分类以及区块组合的效果,使用时需要根据需求进行删除和添加",
  "author": {
    "name": "",
    "email": "",
    "url": ""
  },
  "dependencies": {
    "@alifd/next": "^1.15.10",
    "@antv/data-set": "^0.9.5",
    "@ice/form": "^0.1.3",
    "@icedesign/container": "^1.x",
    "@icedesign/data-binder": "^1.x",
    "@icedesign/ellipsis": "^1.x",
    "@icedesign/form-binder": "^1.0.3",
    "@icedesign/foundation-symbol": "^1.0.0",
    "@icedesign/img": "^1.0.0",
    "@icedesign/label": "^1.0.3",
    "@icedesign/layout": "^1.x",
    "@icedesign/notification": "^1.0.5",
    "@icedesign/panel": "^1.0.3",
    "@icedesign/theme": "^1.x",
    "@icedesign/title": "^1.0.3",
    "antd": "^3.20.1",
    "axios": "^0.17.1",
    "bizcharts": "^3.2.2",
    "bizgoblin": "0.0.1",
    "classnames": "^2.2.5",
    "echarts": "^4.2.1",
    "echarts-for-react": "^2.0.15-beta.0",
    "enquire-js": "^0.1.2",
    "extract-text-webpack-plugin": "^3.0.2",
    "history": "^4.7.2",
    "hoist-non-react-statics": "^2.5.5",
    "intl": "^1.2.5",
    "invariant": "^2.2.4",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.10",
    "mini-css-extract-plugin": "^0.7.0",
    "mockjs": "^1.0.1-beta3",
    "moment": "^2.23.0",
    "node-sass": "^4.12.0",
    "path-to-regexp": "^2.2.1",
    "prop-types": "^15.5.8",
    "react": "^16.2.0",
    "react-ace": "^7.0.2",
    "react-document-title": "^2.0.3",
    "react-dom": "^16.4.1",
    "react-intl": "^2.8.0",
    "react-redux": "^5.0.7",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "5.0.0-alpha.6",
    "redux": "3.6.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.0.3",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "eslint": "^4.13.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-babel": "^4.1.1",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.5.1",
    "ice-plugin-fusion": "^0.1.4",
    "ice-plugin-moment-locales": "^0.1.0",
    "ice-scripts": "^2.1.4"
  },
  "scripts": {
    "start": "ice-scripts dev",
    "build": "ice-scripts build",
    "prepublishOnly": "npm run build",
    "lint": "eslint . --ext '.js,.jsx' --fix"
  },
  "publishConfig": {
    "registry": "http://npm.baidu-int.com/",
    "access": "public"
  },
  "scaffoldConfig": {
    "builder": "ice-scripts",
    "name": "fe-saas",
    "title": "fe-saas",
    "screenshot": "https://img.alicdn.com/tfs/TB1bqV5JwTqK1RjSZPhXXXfOFXa-2860-1580.png",
    "screenshots": [
      "https://img.alicdn.com/tfs/TB1bqV5JwTqK1RjSZPhXXXfOFXa-2860-1580.png",
      "https://img.alicdn.com/tfs/TB1n_CXJwHqK1RjSZFgXXa7JXXa-2862-1580.png",
      "https://img.alicdn.com/tfs/TB1Qll_JrvpK1RjSZFqXXcXUVXa-2860-1580.png"
    ],
    "defaultLayout": "BasicLayout"
  },
  "themeConfig": {
    "primary-color": "#FFFFFF",
    "secondary-color": "#333333"
  },
  "engines": {
    "node": ">=8.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/ice-lab/react-materials/tree/master/scaffolds/ice-design-pro"
  },
  "buildConfig": {
    "babelPluginImportConfig": {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": true
    }
  },
  "title": "fe-saas"
}

ice.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const proxyTarget = "http://yq01-impl-rd04.epc.baidu.com:8400";
const path = require('path');

module.exports = {
  entry: 'src/index.js',
  publicPath: './',
  hash: true,
  outputDir: 'dist',
  vendor: true,
  // 资源压缩
  minify: true,
  proxy: {
    '/saas_api': {
      enable: true,
      pathRewrite: { "^/saas_api": "/saas_api" },
      changeOrigin: true,
      target: proxyTarget,
      bypass: function (req, res, proxyOpt) {
        // 添加 HTTP Header 标识 proxy 开启
        res.set('X-ICE-PROXY', 'on');
        res.set('X-ICE-PROXY-BY', proxyTarget);
      }
    }
  },
  plugins: [
    ['ice-plugin-fusion', {
      themePackage: '@icedesign/theme',
      uniteBaseComponent: '@alife/next',
      themeConfig: {
        nextPrefix: 'nextfd-'
      }
    }],
    ['ice-plugin-moment-locales', {
      locales: ['zh-cn'],
    }],
  ],
  // outputAssetsPath: {
  //   js: 'js-dist',
  //   css: 'css-dist',
  // },
  // externals: {
  //   react: 'React'
  // },
  // disableVendor 设置为 true 对应 vendor 设置为false
  chainWebpack: (config, { command }) => {
    // // 修改 webpack devServer.hot
    // config.devServer.hot('dist');

    // // 修改 webpack output.path
    // config.output.path('dist');

    // 执行 ice-scripts dev 命令时
    if (command === 'dev') {
      config.devServer.historyApiFallback(true);
    }

    // 执行 ice-scripts build 命令时
    if (command === 'build') {
      config.optimization.minimize(true);
    }

    config.module
      .rule('new-rule')
      .test(/\.css$/)
      .use([
        MiniCssExtractPlugin.loader,
        "css-loader"
      ])
      .loader('sass-loader');
  },
  // 定义有关相对路径
  alias: {
    '@api': path.resolve(__dirname, 'src/api/'),
    '@ajax': path.resolve(__dirname, 'src/ajax/'),
    '@utils': path.resolve(__dirname, 'src/utils/'),
    '@const': path.resolve(__dirname, 'src/const/'),
    '@components': path.resolve(__dirname, 'src/components/'),
  }
};
imsobear commented 5 years ago

https://ice.work/docs/guide/dev/dynamic-load 搜索下 React.lazy

gluo1130 commented 5 years ago

这个和React.lazy有啥关系?我想问的是怎么编译打包成一个js文件 和 一个css文件。想问下ice2.0这个ice.config.js 支持配置么?

daysai commented 5 years ago

这个和React.lazy有啥关系?我想问的是怎么编译打包成一个js文件 和 一个css文件。想问下ice2.0这个ice.config.js 支持配置么?

多个js文件的原因就是用了 React.lazy

gluo1130 commented 5 years ago

这个和React.lazy有啥关系?我想问的是怎么编译打包成一个js文件 和 一个css文件。想问下ice2.0这个ice.config.js 支持配置么?

多个js文件的原因就是用了 React.lazy

ok 多谢