@sweet-milktea/milktea
webpack配置函数
Last updated 11 days 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工具运行。

  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';

// mode { string }: 开发模式 development,生产模式 production
// webpackLog { 'progress' | 'stats' }: 日志输出类型。progress:进度条,stats:传统的输出方式。默认为progress
const mode = 'development';

const compiler = webpack(webpackConfig({
  // 配置项
}, mode, webpackLog));

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的类型
  • loaders: 重写loaders的默认规则
    • js { object } : 重写默认的javascript规则
    • ts { object } : 重写默认的typescript规则
    • sass { object } : 重写默认的sass规则
    • css { object } : 重写默认的css规则
    • favicon { object } : 重写网站图标的规则
    • fontFile { object } : 重写字体文件的规则
    • html { object } : 重写html的规则,默认为pug
    • image { object } : 重写图片文件的规则
    • svg { object } : 重写svg的规则
    • vue { object } : 重写vue的规则
  • 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)
    • presets { Array<any> } : 自定义presets
    • plugins { Array<any> } : 自定义plugins
    • resetPresets { Array<any> } : 重写presets
    • resetPlugins { Array<any> } : 重写plugins
    • exclude { RegExp } : exclude规则
    • include { RegExp } : include规则
  • ts { object } : typescript配置
    • presets { Array<any> } : 自定义babel的presets
    • plugins { Array<any> } : 自定义babel的plugins
    • exclude { RegExp } : exclude规则
    • include { RegExp } : include规则
  • sass { object } : sass配置
    • publicPath { string }
    • modules { boolean } : 开启css-in-modules
    • exclude { RegExp } : exclude规则
    • include { RegExp } : include规则
    • prependData { string | Function } : 注入sass变量(参考sass-loader,sass-loader >= 8)
    • data { string | Function } : 注入sass变量(参考sass-loader,sass-loader < 8)
    • localIdentName { string } : 配置localIdentName(参考css-loader)
    • getLocalIdent { Function } : 配置getLocalIdent(参考css-loader)
  • css { object } : css配置(默认使用less)
    • publicPath { string }
    • modules { boolean } : 开启css-in-modules
    • exclude { RegExp } : exclude规则
    • include { RegExp } : include规则
    • modifyVars { object } : 注入less变量(参考less-loader)
    • localIdentName { string } : 配置localIdentName(参考css-loader)
    • getLocalIdent { Function } : 配置getLocalIdent(参考css-loader)
  • html { Array<object> } : html配置(默认使用pug)
    • template { string } : html模板文件地址
    • excludeChunks { Array<string> } : 不包括的入口
  • frame { string } : 值为reactvue,是否为react或vue模式,并自动注入loaders和plugins
  • chainWebpack { Function } : 通过webpack-chain的API扩展或修改webpack配置
  • filesMap { boolean | object } : 输出filesMap.json文件,记录了文件的映射。

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

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

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文件。

关于node-sass

node-sass如果安装失败,可以先到https://github.com/sass/node-sass/releases下载binding.node文件,然后将该文件添加到SASS_BINARY_PATH环境变量内。

Current Tags

  • 0.11.4                                ...           latest (11 days ago)

38 Versions

  • 0.11.4                                ...           11 days ago
  • 0.11.2                                ...           21 days ago
  • 0.11.1                                ...           a month ago
  • 0.11.0                                ...           2 months ago
  • 0.10.0                                ...           2 months ago
  • 0.9.0                                ...           2 months ago
  • 0.8.1                                ...           3 months ago
  • 0.7.1                                ...           3 months ago
  • 0.7.0                                ...           3 months ago
  • 0.6.6                                ...           4 months ago
  • 0.6.5                                ...           4 months ago
  • 0.6.4                                ...           4 months ago
  • 0.6.2                                ...           4 months ago
  • 0.6.1                                ...           4 months ago
  • 0.6.0                                ...           5 months ago
  • 0.5.0                                ...           5 months ago
  • 0.4.6                                ...           5 months ago
  • 0.4.5                                ...           6 months ago
  • 0.4.4                                ...           6 months ago
  • 0.4.3                                ...           6 months ago
  • 0.4.2                                ...           6 months ago
  • 0.4.1                                ...           6 months ago
  • 0.3.12                                ...           6 months ago
  • 0.3.11                                ...           6 months ago
  • 0.3.10                                ...           6 months ago
  • 0.3.9                                ...           7 months ago
  • 0.3.8                                ...           7 months ago
  • 0.3.7                                ...           7 months ago
  • 0.3.6                                ...           7 months ago
  • 0.3.4                                ...           8 months ago
  • 0.3.3                                ...           8 months ago
  • 0.3.2                                ...           8 months ago
  • 0.3.1                                ...           8 months ago
  • 0.3.0                                ...           8 months ago
  • 0.2.0                                ...           8 months ago
  • 0.1.1                                ...           8 months ago
  • 0.1.0                                ...           8 months ago
  • 0.0.1                                ...           8 months ago
Maintainers (1)
Downloads
Today 2
This Week 2
This Month 56
Last Day 0
Last Week 3
Last Month 61
Dev Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |