Skip to content

快速搭建 webpack react 环境的命令行脚本工具

Notifications You must be signed in to change notification settings

WinmezzZ/webpack-scripts

Repository files navigation

@winme/webpack-scripts

快速搭建 webpack react 环境的命令行脚本工具

安装

npm install @winme/webpack-scripts -D

然后在 package.json 修改启动与打包命令脚本

{
  "scripts" {
    "start": "winme start",
    "build": "winme build"
  }
}

特性

  • 支持热更新,热模块替换
  • 开发环境的输出信息简介明了,打包输出信息完整
  • 开发环境的报错点击可以直接跳转到定位到编辑器对应的行与列
  • 支持 typescript
  • 封装了所有复杂的 webpack,仅需通过配置文件修改少量的配置
  • 支持完全自定义 webpack 配置

说明

如果是老项目迁移,基本无需配置太多,该插件包含了所有主流用到的 loader, plugin,和一些通用 webpack 配置

如果是一个全新项目,只要遵循以下 2 个默认配置,即可快速创建一个 react 项目

记得安装 reactreact-dom

  • 入口文件: src/index 会自动检测是 js 文件还是 ts 文件
  • html 模板文件:index.html

如果你没办法修改或者不喜欢上述默认配置路径,同样可以通过设置配置文件去修改它们以及更多定制化的需求

配置文件

可以在项目下创建 winme-scripts.config.js,使用 commonjs 语法导出配置对象

也可以通过 const { defineConfig } = require('@winme/webpack-scripts');,使用 defineConfig 函数包裹导出对象,这样能够获得属性提醒

参数

publicPath

  • 类型: string
  • 默认值: /

公共路径,等同于 webpack output 中的 publicPath

示例:

const { defineConfig } = require('@winme/webpack-scripts');

module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === 'production' ? '/publicPath/' : '/',
});

buildDir

  • 类型: string
  • 默认值: dist

打包目录

htmlTemplatePath

  • 类型: string
  • 默认值: /path/to/project/index.html

html 模板路径,默认在 index.html 下,也可以自行设置

alias

  • 类型: object
  • 默认值: { @: path.join(__dirname, 'src') }

webpack 路径别名,默认已处理 @ 指向根目录 src

devServer

  • 类型: object
  • 默认值: { port: 3000 }

开发服务器 server 配置

babel

babel 配置,默认配置已经支持 react + ts 环境,如果需要额外配置,会自动合并

postcss

postcss 配置,默认配置了 autoprefixer 插件,如果需要额外配置,会自动合并

modifyVars

  • 类型: object
  • 默认值: -

less 变量

sourcemap

  • 类型: boolean
  • 默认值: false

是否生成生产环境 sourcemap

webpack

  • 类型: (config) => config
  • 默认值: -

自定义 webpack 配置,需返回新的完整配置

示例:

const { defineConfig } = require('@winme/webpack-scripts');

module.exports = defineConfig({
  webpack: config => {
    config.output.path = 'build';
    config.plugins.push(new Webpack.definePlugin());

    return config;
  },
});

disabledBundleSize

  • 类型: boolean
  • 默认值: false

是否禁用打包文件 size 输出信息,禁用后,打包完成将不会在终端输出所有 js 文件的 size 信息

About

快速搭建 webpack react 环境的命令行脚本工具

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published