1.0.0 • Published 5 years ago
@omtty/webpack v1.0.0
项目背景
由于 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 |