mooli-scripts 脚手架

安装

yarn add mooli-scripts --dev

特性

• 支持所有常用文件后缀
• 超快的开发热更新
• 支持多页面
• 智能配置，外加 TS 提示

使用方法

创建文件 webpack.config.js

import webpackMooli from 'mooli-scripts';

export default webpackMooli(3000);

然后把下面的指令加入到文件 package.json

{
  "scripts": {
    "start": "mooli-scripts start --env development",
    "build": "mooli-scripts build --env production"
  }
}

获取配置信息

import webpackMooli from 'mooli-scripts';

export default webpackMooli(3000, (mooli) => {
  mooli.getConfig(); // config配置信息
  mooli.getEnvironment(); // 环境信息
  mooli.getPort(); // 端口
  ......
});

设置配置信息

import webpackMooli from 'mooli-scripts';

export default webpackMooli(3000, (mooli) => {
  mooli.target('node'); // target构建目标
  mooli.devtool('eval-cheap-source-map'); // devtool
  mooli.cache(false); // cache缓存
  mooli.mode('development); // mode模式
  mooli.chunkHash(8); // 设置chunkhash
  mooli.chunkHash(8); // 设置chunkhash
  mooli.setUglifyConfig({
    parallel: 4
  }); // 设置terser-webpack-plugin参数
  ......
});

入口文件

框架会优先使用 package.json中的 main 字段作为入口文件，如果没有这个字段或者文件不存在，框架会接着自动查找文件 index, Index, src/index, src/Index，只要他们携带 .js, .ts, .jsx, .tsx 中的任意一个后缀就算找到。

当然了，您也可以手动指定

import webpackMooli from 'mooli-scripts';

export default webpackMooli(3000, (mooli) => {
  mooli.entry('./src/entries/index.tsx'); // 字符串形式
  mooli.entry({
    a: './src/entries/a.tsx',
    b: './src/entries/b.tsx',
  }); // 对象形式
  mooli.entry(['./src/entries/a.tsx', './src/entries/b.tsx']); // 数组形式
});

output 输出配置

import webpackMooli from 'mooli-scripts';

export default webpackMooli(3000, (mooli) => {
  mooli.output((output) => {
    output.path = path.join(__dirname.replace('dist'), mooli.getEnvironment());
  });
});

optimization 配置

import webpackMooli from 'mooli-scripts';

export default webpackMooli(3000, (mooli) => {
  mooli.optimization((optimization) => {
    optimization.minimize = mooli.getEnvironment() === 'production';
  });
});

stats 配置

import webpackMooli from 'mooli-scripts';

export default webpackMooli(3000, (mooli) => {
  mooli.stats((stats) => {
    stats.assets = false;
  });
});

resolve 模块路径解析

import webpackMooli from 'mooli-scripts';

export default webpackMooli(3000, (mooli) => {
  mooli.resolve((resolve) => {
    resolve.alias = {
      '@site': path.join(process.cwd(), 'site'),
    };
  });
});

域名

默认使用 IP 0.0.0.0，这样本机和局域网都能访问到您的项目。

您也可以使用域名

import webpackMooli from 'mooli-scripts';

export default webpackMooli(3000, (mooli) => {
  mooli.devServer((server) => {
    server.host = '自定义域名或者IP';
    // 代理
    server.proxy = {
      '^/api': {
        target: `https://********.com/`,
        changeOrigin: true,
        secure: false,
        logLevel: 'debug',
      },
    };
  });
});

模版文件

框架会自动找这些文件 index, public/index, src/index, src/public/index, assets/index, src/assets/index， 只要它们携带 .html .htm 中的任意一种格式就算找到。

当然了，您也可以手动指定

import webpackMooli from 'mooli-scripts';

export default webpackMooli(3000, (mooli) => {
  // 单页面
  mooli.pluginHtml((plugin) => {
    plugin.setTemplate('./src/entries/index.html');
  });
  mooli.pluginHtml({
    template: './site/entries/a.html',
    filename: 'a.html',
    chunks: ['a']
  })
  // 多页面配置
  mooli.pluginHtml([
    {
      template: './site/entries/a.html',
      filename: 'a.html',
      chunks: ['a']
    },
    {
      template: './site/entries/b.html',
      filename: 'b.html',
      chunks: ['b']
    }
  ]）
});

Css Modules

强烈推荐各位使用 css-modules 特性，有了它，我们不再需要关心样式是否会被污染或者覆盖了。

当然了，您也可以关掉它

import webpackMooli from 'mooli-scripts';

export default webpackMooli(3000, (mooli) => {
  mooli.disableCssModule();
});

其他 plugin 设置

import webpackMooli from 'mooli-scripts';

export default webpackMooli(3000, (mooli) => {
  mooli.pluginErrorOverlay(); // 错误提示插件
  mooli.pluginHotModuleReplace(); // 热替换插件
  mooli.pluginReactRefresh(); // react热更新插件
  mooli.pluginCopy(); // 拷贝文件插件
  mooli.pluginDefine(); // 全局变量插件
  mooli.pluginProgressBar(); // 编译进度条插件
  mooli.pluginClean(); // 清除打包目录插件
  mooli.pluginMiniCss(); // 处理压缩css插件
  mooli.pluginHtml(); // 处理html文件插件
  ......
});

其他 rules 设置

import webpackMooli from 'mooli-scripts';

export default webpackMooli(3000, (mooli) => {
  mooli.ruleTsx(); // tsx 规则
  mooli.ruleJsx(); // jsx 规则
  mooli.ruleCssNodeModules(); // cssModule 规则
  mooli.ruleCss(); // css 规则
  mooli.ruleScss(); // scss 规则
  mooli.ruleLess(); // less 规则
  mooli.ruleAsset(); // asset 规则
  mooli.ruleHtml(); // html 规则
  mooli.ruleJson5(); // json5 规则
  mooli.ruleRaw(); // md 规则
  ......
});