# @omtty/webpack > 前端打包工具 Latest version **1.0.0** (published 2019-06-18) · ISC license · 0 weekly downloads ## Install ```sh npm install @omtty/webpack pnpm add @omtty/webpack yarn add @omtty/webpack bun add @omtty/webpack ``` Provides the command `omt-webpack`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2019-06-18 | | First published | 2019-06-18 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 35 | | Unpacked size | 59.8 KB | | Known vulnerabilities | 0 (+6 in 1 direct dependencies) | | Install scripts | no | | Author | ziteng | | Maintainers | omtty | | Keywords | webpack, vue, react, javascript, pack | ## Links - npm: https://www.npmjs.com/package/@omtty/webpack - npm.io page: https://npm.io/package/@omtty/webpack ## Dependencies (35) - [glob](https://npm.io/package/glob.md) ^7.1.4 - [less](https://npm.io/package/less.md) ^3.9.0 - [omit](https://npm.io/package/omit.md) ^1.0.1 - [open](https://npm.io/package/open.md) ^6.3.0 - [voca](https://npm.io/package/voca.md) ^1.4.0 - [chalk](https://npm.io/package/chalk.md) ^2.4.2 - [yargs](https://npm.io/package/yargs.md) ^13.2.4 - [webpack](https://npm.io/package/webpack.md) 4.28.0 - [npm-auth](https://npm.io/package/npm-auth.md) ^1.1.0 - [babel-cli](https://npm.io/package/babel-cli.md) ^6.26.0 - [babel-core](https://npm.io/package/babel-core.md) ^6.20.0 - [css-loader](https://npm.io/package/css-loader.md) ^2.1.1 - [csv-loader](https://npm.io/package/csv-loader.md) ^3.0.2 - [url-loader](https://npm.io/package/url-loader.md) ^1.1.2 - [xml-loader](https://npm.io/package/xml-loader.md) ^1.2.1 - [file-loader](https://npm.io/package/file-loader.md) ^3.0.1 - [json-loader](https://npm.io/package/json-loader.md) ^0.5.7 - [less-loader](https://npm.io/package/less-loader.md) ^5.0.0 - [autoprefixer](https://npm.io/package/autoprefixer.md) ^9.5.1 - [babel-loader](https://npm.io/package/babel-loader.md) ^7.0.0 - [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.20.0 - [postcss-loader](https://npm.io/package/postcss-loader.md) ^3.0.0 - [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.7.0 - [react-hot-loader](https://npm.io/package/react-hot-loader.md) ^4.8.6 - [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.11.1 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^3.4.1 - [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.18.0 - [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^5.0.3 - [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.16.0 - [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^0.6.0 - [awesome-typescript-loader](https://npm.io/package/awesome-typescript-loader.md) ^5.2.1 - [babel-plugin-react-require](https://npm.io/package/babel-plugin-react-require.md) ^3.1.1 - [progress-bar-webpack-plugin](https://npm.io/package/progress-bar-webpack-plugin.md) ^1.12.1 - [babel-plugin-add-module-exports](https://npm.io/package/babel-plugin-add-module-exports.md) ^1.0.2 - [babel-plugin-syntax-dynamic-import](https://npm.io/package/babel-plugin-syntax-dynamic-import.md) ^6.18.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.0 (latest) — 2019-06-18 ## README ## 项目背景 由于 webpack 的配置比较繁琐，并且不同的项目之间 90%左右的配置都是一样的，omt-webpack 简化了 webpack 的配置，只要简单的几个配置就可以直接使用，同时又不失去灵活性 ## 安装 yarn install @omtty/webpack ## omt-webpack cli ```bash 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)再去从外部获取这些扩展依赖，[点击这里查看更多](https://www.webpackjs.com/configuration/externals/) | string array object function regex | 选填 | | resolveAlias | 创建 import 或 require 的别名，来确保模块引入变得更简单具体查看[这里](https://www.webpackjs.com/configuration/resolve/#resolve-alias) | object | 选填 | | extraResolveExtensions | 自动解析确定的扩展 | array | 选填 | | extraBabelPresets | babel-loader的options.presets具体查看[这里](https://www.webpackjs.com/loaders/babel-loader/) | array | 选填 | | extraBabelPlugins | babel-loader的options.plugins具体查看[这里](https://www.webpackjs.com/loaders/babel-loader/) | array | 选填 | | extraModuleRules | 创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式，具体查看[这里](https://www.webpackjs.com/configuration/module/#module-rules) | array | 选填 | | extraJsLoaders | 额外的js和jsx loader | string object | 选填 | | extraTsLoaders | 额外的ts和tsx loader | string object | 选填 | | lessModifyVars | less modify vars | object | 选填 | ### .omt.webpack.js 配置样例 ```javascript module.exports = { // entry支持模糊匹配，如："src/**/*.js" entry: "src/index.js" }; ``` 一般情况下只要指定了entry就可以正常编译代码了 ### .omt.webpack.js 复杂配置样例 ```javascript 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 ```js 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 | --- _Source: https://npm.io/package/@omtty/webpack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._