webpack集成

注：内部webpack插件版本基于webpack@3.12.0开发选择，暂不兼容webpack4。

通过以下步骤，可以让webpack项目中使用chameleon的任意组件。

• 1 安装npm包 npm i easy-chameleon chameleon-ui-builtin

• 2 执行脚本 node node_modules/\easy-chameleon/bin/index.js，该脚本会执行检测，安装未安装的第三方npm包

• 3 .babelrc 的preset 添加flow, chameleon中用了flow语法，如果需要用到chameleon-api，建议配置babel-plugin-chameleon-import插件实现按需加载。例如：

{
  "presets": [
    "flow",
    ["env", {
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-0"
  ],
  "plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    [
      "babel-plugin-chameleon-import", {
      "libraryName": "chameleon-api",
      "libraryDirectory": "src/interfaces",
      "libraryFileName": "index.js",
      "defaulLibraryDirectory": "",
      "defaulLibraryFileName": "index.js",
      }
    ]
  ]
}

• 4 入口代码中，引入代码 import 'easy-chameleon/entry/web_global.js';

• 5 修改webpack配置文件,easy-chameleon提供了getConfig方法获取webpack配置，利用webpack-merge将项目原有webpack配置与getConfig方法获取的配置进行合并，例如：

const merge = require('webpack-merge')
const {getConfig} = require('easy-chameleon');
devWebpackConfig = merge(devWebpackConfig, getConfig({
  cmlType: 'web', 
  media: 'dev', 
  hot: true, 
  disableExtract: false,
  context: path.join(__dirname,'../'),
  cmss: {
    rem: false,
    scale: 0.5
  }
}))

getConfig方法参数 getConfig(Object object)

参数类型默认值必填说明cmlTypeString是端类型，可选值为web|wx|weexmediaString是构建模式，可选值为dev|buildhotBooleanfalse否是否开启热更新，只在web端生效disableExtractBooleanfalse否不提取css文件cmssObject否cmss处理的配置，参见下方cmss对象属性列表wxConfigObject否微信端构建配置，参见下方wxConfig对象属性列表

cmss 对象属性列表

wxConfig 对象属性列表

示例

详细示例戳这里webpack集成chameleon