@sweet-milktea/milktea
webpack配置函数
Last updated 14 hours ago by duan602728596 .
Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @sweet-milktea/milktea 
SYNC missed versions from official npm registry.

@sweet-milktea/milktea

使用

如何使用

  1. 在工程目录下创建.sweetrc.jssweet.config.js文件,然后通过cli工具运行。(支持typescript,即.sweetrc.tssweet.config.ts文件)

  2. 在node内运行函数。

import webpack from 'webpack';
import {
  dll as dllConfig,        // dll编译配置
  config as webpackConfig, // webpack配置
  serverRenderConfig,      // webpack服务器端渲染配置
  callback,                // webpack的回调函数
  callbackOnlyError        // webpack的回调函数(只显示错误信息)
} from '@sweet-milktea/milktea';

// sweetConfig { SweetConfig | string | null | undefined }: webpack配置,覆盖文件,优先级最高
// mode { string }: 开发模式 development,生产模式 production
// webpackLog { 'progress' | 'stats' }: 日志输出类型。progress:进度条,stats:传统的输出方式。默认为progress
// hot { boolean }: 添加webpack.HotModuleReplacementPlugin插件,开启热更新功能
const compiler = webpack(
  webpackConfig({
    // 配置项
    sweetConfig: null,
    mode: 'development',
    webpackLog: 'progress',
    hot: true
  })
);

compiler.run(callback);

配置文件.sweetrc.js说明

使用方法

根目录下创建.sweetrc.js文件。代码如下所示:

module.exports = {
  ... // 配置
};

module.exports = function(info) {
  return {
    ... // 配置
  };
};

配置项

  • mode { string } : 开发模式还是生产模式
  • dll { Array<string> } : 配置需要编译的dll模块
  • entry { any } : 文件入口(参考webpack)
  • output { any } : 文件出口(参考webpack)
  • alias { object } : 模块别名(参考webpack)
  • externals { object } : 外部扩展(参考webpack)
  • resolve { object } : 解析(参考webpack)
  • devtool { string }: 设置SourceMap的类型
  • rules { Array<object> } : 自定义规则
  • noParse RegExp | Array<RegExp> | Function : 防止解析任何与给定正则表达式相匹配的文件(参考webpack)
  • plugins { Array<any> } : 自定义webpack插件
  • js { object } : javascript配置
    • targets { object } : 配置@babel/preset-env的编译目标
    • ecmascript { boolean } : 是否编译到ecmascript的最新语法(即不使用@babel/preset-env,通常适用于node、nwjs和electron)
    • typescript { boolean } : 是否使用typescript编译(即使用@babel/preset-typescript)
    • presets { Array<any> } : 自定义presets
    • plugins { Array<any> } : 自定义plugins
    • exclude { RegExp } : exclude规则
    • include { RegExp } : include规则
  • ts { object } : typescript配置
    • configFile { string } : typescript的配置文件
    • presets { Array<any> } : 自定义babel的presets
    • plugins { Array<any> } : 自定义babel的plugins
    • exclude { RegExp } : exclude规则
    • include { RegExp } : include规则
    • forkTsCheckerWebpackPlugin { boolean } : 设置为false时,关闭fork-ts-checker-webpack-plugin插件注入
  • sass { object } : sass配置
    • modules { boolean } : 开启css-in-modules
    • exclude { RegExp } : exclude规则
    • include { RegExp } : include规则
    • additionalData { string | Function } : 注入sass变量(参考sass-loader)
  • css { object } : css配置(默认使用less)
    • modules { boolean } : 开启css-in-modules
    • exclude { RegExp } : exclude规则
    • include { RegExp } : include规则
    • modifyVars { object } : 注入less变量(参考less-loader)
    • additionalData { string | Function } : (参考less-loader)
  • html { Array<object> } : html配置(默认使用pug)
    • template { string } : html模板文件地址
    • 其他html-webpack-plugin的配置
  • frame { string } : 值为reactvue,是否为react或vue模式,并自动注入loaders和plugins
  • chainWebpack { Function } : 通过webpack-chain的API扩展或修改webpack配置
  • filesMap { boolean | object } : 输出filesMap.json文件,记录了文件的映射。
  • hot { boolean } : 添加webpack.HotModuleReplacementPlugin插件,开启热更新功能。

下面的配置是关于服务器端渲染的

  • serverRender { boolean } : 是否开启服务器端渲染
  • severEntry { any } : 服务器端的文件入口(参考webpack)
  • serverOutput { any } : 服务器端文件出口(参考webpack)
  • serverExternals { object } : 服务器端的外部扩展(参考webpack)
  • serverDevtool { string } : 服务器端的SourceMap的类型(参考webpack)
  • serverChainWebpack{ Function } : 通过webpack-chain的API扩展或修改SSR的webpack配置

关于vue

如果使用vue,需要手动安装@vue/babel-plugin-jsx(vue3) ,vue-loadervue-svg-loader@0.17.0-beta.1@vue/compiler-sfc(vue3)。

关于typescript

使用typescript,需要手动安装typescriptts-loader
如果js.typescripttrue,则不会配置ts-loader,且ts配置无效。因为这时typescript编译使用的是babel。

info

info是当前环境的信息。

  • info.environment:当前环境,可能的值为dllclientserver。分别为编译dll文件、编译浏览器端代码、编译node端代码。

引入svg

react

import svgUrl, { ReactComponent as SvgComponent } from './image.svg';
// svgUrl:svg的图片地址
// SvgComponent:svg作为react组件

vue

在vue项目中,如果svg文件匹配*.component.svg,则文件作为vue组件引入,否则作为图片地址引入。

import svgUrl from './image.svg';
import SvgComponent from './image.component.svg';
// svgUrl:svg的图片地址
// SvgComponent:svg作为vue组件

api、服务器端渲染

环境变量

内置了环境变量,根据环境变量判断不同的编译环境。

  • process.env.SWEET_SERVER_RENDER:判断当前环境是否为服务器端渲染。

使用typescript

在项目内添加tsconfig.json文件。

Current Tags

  • 2.0.0                                ...           latest (14 hours ago)
  • 1.0.0-beta.7                                ...           next (3 months ago)

68 Versions

  • 2.0.0                                ...           14 hours ago
  • 1.5.0                                ...           8 days ago
  • 1.4.0                                ...           8 days ago
  • 1.3.0                                ...           a month ago
  • 1.2.1                                ...           2 months ago
  • 1.2.0                                ...           2 months ago
  • 1.1.2                                ...           2 months ago
  • 1.1.1                                ...           3 months ago
  • 1.1.0                                ...           3 months ago
  • 1.0.0                                ...           3 months ago
  • 1.0.0-beta.7                                ...           3 months ago
  • 1.0.0-beta.6                                ...           4 months ago
  • 1.0.0-beta.4                                ...           4 months ago
  • 1.0.0-beta.3                                ...           4 months ago
  • 1.0.0-beta.1                                ...           5 months ago
  • 1.0.0-beta.0                                ...           5 months ago
  • 0.16.3                                ...           6 months ago
  • 0.16.2                                ...           6 months ago
  • 0.16.1                                ...           6 months ago
  • 0.16.0                                ...           6 months ago
  • 0.15.4                                ...           9 months ago
  • 0.15.2                                ...           9 months ago
  • 0.15.1                                ...           9 months ago
  • 0.15.0                                ...           9 months ago
  • 0.14.3                                ...           10 months ago
  • 0.14.2                                ...           10 months ago
  • 0.14.1                                ...           10 months ago
  • 0.14.0                                ...           10 months ago
  • 0.13.0                                ...           a year ago
  • 0.12.0                                ...           a year ago
  • 0.11.4                                ...           a year ago
  • 0.11.2                                ...           a year ago
  • 0.11.1                                ...           a year ago
  • 0.11.0                                ...           a year ago
  • 0.10.0                                ...           a year ago
  • 0.9.0                                ...           a year ago
  • 0.8.1                                ...           a year ago
  • 0.7.1                                ...           a year ago
  • 0.7.0                                ...           a year ago
  • 0.6.6                                ...           a year ago
  • 0.6.5                                ...           a year ago
  • 0.6.4                                ...           a year ago
  • 0.6.2                                ...           a year ago
  • 0.6.1                                ...           a year ago
  • 0.6.0                                ...           a year ago
  • 0.5.0                                ...           a year ago
  • 0.4.6                                ...           a year ago
  • 0.4.5                                ...           a year ago
  • 0.4.4                                ...           a year ago
  • 0.4.3                                ...           a year ago
  • 0.4.2                                ...           a year ago
  • 0.4.1                                ...           a year ago
  • 0.3.12                                ...           a year ago
  • 0.3.11                                ...           a year ago
  • 0.3.10                                ...           a year ago
  • 0.3.9                                ...           a year ago
  • 0.3.8                                ...           a year ago
  • 0.3.7                                ...           a year ago
  • 0.3.6                                ...           2 years ago
  • 0.3.4                                ...           2 years ago
  • 0.3.3                                ...           2 years ago
  • 0.3.2                                ...           2 years ago
  • 0.3.1                                ...           2 years ago
  • 0.3.0                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 7
This Month 28
Last Day 7
Last Week 20
Last Month 39
Dependencies (31)
Dev Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |