项目背景

由于 webpack 的配置比较繁琐，并且不同的项目之间 90%左右的配置都是一样的，omt-webpack 简化了 webpack 的配置，只要简单的几个配置就可以直接使用，同时又不失去灵活性

安装

yarn install @omtty/webpack

omt-webpack cli

omt-webpack --cmd [build | dev] [--debug]

• build: 编译模式，该模式下可以和debug配合使用来决定编译的代码为dev还是prod版本
• dev: 开发模式，会启动devServer

配置

.omt.webpack.js 是 omt-webpack 的配置文件，需要放在项目的根目录下面

常用配置项

| 名称 | 描述 | 类型 | 默认值 | | ---------- | ------------ | --------------- | ------ | | entry | 项目入口 | string | array | 必填 | | outputPath | 项目输出目录 | string | dist | | appSrc | 项目存放代码的目录 | string | src | | appPublic | 项目的公共资源目录| string | public | | disableCssModules | 是否禁用css modules功能 | boolean | false, 默认开启css modules | | publicPath | 获取chunk资源的根目录，必须以/结尾，这里可以为URL地址，如果指定了一个错误的值，则在加载这些资源时会收到 404 错误 | string | / | | externals | 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖，点击这里查看更多 | string array object function regex | 选填 | | resolveAlias | 创建 import 或 require 的别名，来确保模块引入变得更简单具体查看这里 | object | 选填 | | extraResolveExtensions | 自动解析确定的扩展 | array | 选填 | | extraBabelPresets | babel-loader的options.presets具体查看这里 | array | 选填 | | extraBabelPlugins | babel-loader的options.plugins具体查看这里 | array | 选填 | | extraModuleRules | 创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式，具体查看这里 | array | 选填 | | extraJsLoaders | 额外的js和jsx loader | string object | 选填 | | extraTsLoaders | 额外的ts和tsx loader | string object | 选填 | | lessModifyVars | less modify vars | object | 选填 |

.omt.webpack.js 配置样例

module.exports = {
  // entry支持模糊匹配，如："src/**/*.js"
  entry: "src/index.js"
};

一般情况下只要指定了entry就可以正常编译代码了

.omt.webpack.js 复杂配置样例

const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  appSrc: "src",
  appPublic: "public",
  outputPath: "./dist",
  resolveAlias: {
    zord: path.resolve(__dirname, "./components/index")
  },
  extraTsLoaders: [
    {
      loader: require.resolve("react-docgen-typescript-loader"),
      options: {
        docgenCollectionName: "DJ_REACT_CLASSES"
      }
    }
  ],
  extraBabelPlugins: [
    "transform-runtime",
    [
      "import",
      [
        {
          libraryName: "antd",
          style: true
        }
      ]
    ],
    "transform-decorators-legacy"
  ],
  devServer: {
    port: 8000,
    before: app => {
    }
  },
  disableCssModules: true,
  lessModifyVars: {
    "font-size-base": "12px",
    "font-size-lg": "14px"
  },
  extraPlugins: [new CleanWebpackPlugin()]
};

Node API

import applyOmtWebpack from "@omt/webpack";
applyOmtWebpack(config, options);

applyOmtWebpack(config, options)

config的配置参考.omt.webpack.js的配置

options

| 名称 | 描述 | 类型 | 默认值 | | ---------- | ------------ | --------------- | ------ | | cwd | 项目的运行目录，根目录 | string | 必填 | | watch | 是否启动监听模式 | boolean | false | | debug | production or development | boolean | false, production | | cmd | build / dev | string | build |