{"id":18369068,"url":"https://github.com/dog-days/webpack-launcher","last_synced_at":"2025-04-06T17:31:57.453Z","repository":{"id":33840925,"uuid":"161300964","full_name":"dog-days/webpack-launcher","owner":"dog-days","description":"webpack starter just like create-react-app webpack config, but it just focuses on the webpack.","archived":false,"fork":false,"pushed_at":"2022-12-08T08:08:17.000Z","size":732,"stargazers_count":5,"open_issues_count":23,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-21T23:34:58.818Z","etag":null,"topics":["gzipped-files","mock","mock-server","mockjs","proxy-server","static-server","webpack4"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dog-days.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-11T08:20:59.000Z","updated_at":"2020-01-08T07:45:50.000Z","dependencies_parsed_at":"2023-01-15T02:53:47.964Z","dependency_job_id":null,"html_url":"https://github.com/dog-days/webpack-launcher","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dog-days%2Fwebpack-launcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dog-days%2Fwebpack-launcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dog-days%2Fwebpack-launcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dog-days%2Fwebpack-launcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dog-days","download_url":"https://codeload.github.com/dog-days/webpack-launcher/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247522446,"owners_count":20952552,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gzipped-files","mock","mock-server","mockjs","proxy-server","static-server","webpack4"],"created_at":"2024-11-05T23:28:20.202Z","updated_at":"2025-04-06T17:31:55.729Z","avatar_url":"https://github.com/dog-days.png","language":"JavaScript","readme":"# Webpack Launcher\n\nwebpack 启动器，简化 webpack 繁杂配置，提供便捷的使用方式。\n\n**目前此工具只在 mac 平台进行测试，后续会针对 windows 进行测试**。\n\n## 安装和使用\n\n### 安装\n\n```sh\nnpm i webpack-launcher -D\n```\n\n### 简单使用\n\n安装完毕后运行运行一下命令，即可运行样板代码。\n\n```sh\nnpm run init-webpack-launcher\nnpm start\n```\n\n**注意**：\n\n`npm run init-webpack-launcher`（postinstall 会添加添加此命令，直接使用即可）。此命令的内容为：`webpack-launcher init`，运行此命令后可在终端看到如下信息：\n\n```sh\nAdding ./public folder.\nAdding ./src folder.\nDeleting npm run init-webpack-launcher\nAdding npm run eject as webpack-launcher eject\nAdding npm run start as webpack-launcher start\nAdding npm run build as webpack-launcher build\nAdding npm run serve-build as webpack-launcher serve-build\n```\n\n如果 public 文件夹存在，程序会直接中断。\n\n如果 src 文件夹存在，直接使用已存在的 src 文件夹并警告：\n\n```sh\nAdding ./public folder.\n\nThe src folder is exited, use the exited src folder instead.\nPlease make sure the entry file ./src/index.js is exited.\n\nDeleting npm run init-webpack-launcher\nRewriting npm run eject as webpack-launcher eject\nRewriting npm run start as webpack-launcher start\nRewriting npm run build as webpack-launcher build\nRewriting npm run serve-build as webpack-launcher serve-build\n```\n\n### 结合 React 使用\n\n首先安装 `@babel/preset-react@7.x.x`\n\n这里需要在项目根目录添加 `.babelrc.js` ：\n\n```js\n'use strict';\n\nmodule.exports = {\n  presets: [\n    // 支持 react jsx\n    ['@babel/react'],\n  ],\n};\n```\n\n然后在 src/index.js 入口文件添加 React 代码即可，其他无改动。\n\n### 使用 Less\n\n安装 `npm i less less-loader` ，安装完后 `npm start` 启动即可，无需做任何其他配置。\n\n### 使用 Sass\n\n安装 `npm i node-sass sass-loader` ，安装完后 `npm start` 启动即可，无需做任何其他配置。\n\n注意：安装 node-sass 可能会出现各种错误，或者安装不了，即使你切换到淘宝镜像，也解决不了这种问题。本人通过在 `~/.npmrc` 添加如下代码，然后安装没出现什么问题，安装也挺快（ps：不过我已经不用 Sass，不知道现在什么情况）。\n\n```sh\nsass_binary_site=https://npm.taobao.org/mirrors/node-sass/\n```\n\n## webpack-launcher 配置文件\n\nwebpack-launcher 配置文件命名为 `.webpack.launcher.js`，直接在项目根目录新建文件即可，默认的配置为：\n\n```js\n// 这里可配置一些常用的配置，如果满足不了，需要 eject\n// 相对路径为，npm 项目根目录\nmodule.exports = {\n  // 因为有些网站访问web app不是在根目录，可能是根目录中的的文件夹，basename是用来设置这种情况的\n  // 例如`/demo`，访问网站根目录demo文件中的web app\n  servedPath: '/',\n  appSrc: './src',\n  appIndexJs: './src/index.js',\n  appBuild: './build',\n  appPublic: './public',\n  appHtml: './public/index.html',\n  // https://webpack.docschina.org/configuration/dev-server/#devserver-host\n  host: 'localhost',\n  // https://webpack.docschina.org/configuration/dev-server/#devserver-port\n  port: 8888,\n  // https://webpack.docschina.org/configuration/dev-server/#devserver-proxy\n  // proxy 优先级高于 mock\n  proxy: {},\n  // 默认使用使用 mock 服务\n  // 不需要可以关闭 mock 服务\n  useMockServer: true,\n  // 是否开启 https\n  https: false,\n  // 设置 webpack alias\n  // https://webpack.docschina.org/configuration/resolve/#resolve-alias\n  alias: {},\n  // 设置 process.env.NODE_ENV 等全局变量\n  // 格式 webpack.DefinePlugin 一样。\n  // https://webpack.docschina.org/plugins/define-plugin/\n  globals: {},\n  // 是否开启 sourceMap 包括 less、postcss、js 等 sourceMap,只对生产环境有效\n  sourceMap: true,\n  // webpackHotDevClient，有两种选择：\n  // default: webpack 默认的热替换热替换方式(需要手动开启)\n  // create-react-app: craate-react-app 热替换方式(默认开启这个)\n  webpackHotDevClient: 'create-react-app',\n  // 打包的 js、css 文件会被 gzip（后缀名还是 js 或者 css，但是内容已经 gzip）\n  // 默认不开启\n  buildGzip: false,\n  // 是否压缩，压缩包命名例如 `{name}-frontend-v{version}.tar.gz`\n  tar: undefined,\n  // dll 建议配置\n  dllEntry: undefined,\n  appDllBuild: './public/dll',\n  // Automatically split vendor and commons\n  // https://twitter.com/wSokra/status/969633336732905474\n  // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366\n  // webpack 配置 optimization.splitChunks\n  // create-react-app 的默认值为：\n  // {\n  //   chunks: 'all',\n  //   name: false,\n  // },\n  splitChunks: undefined,\n  // Keep the runtime chunk seperated to enable long term caching\n  // https://twitter.com/wSokra/status/969679223278505985\n  // webpack 配置 optimization.runtimeChunk\n  runtimeChunk: false,\n};\n```\n\n**功能列表会逐一说明，说有配置都是可选的。**\n\n## 功能列表\n\n- 默认的 babel 配置\n\n- HTTP API 模拟（mock）\n- 反向代理\n- 域名 host 绑定\n- Https\n- 别名（alias）\n- 环境全局变量（如 process.env.NODE_ENV）\n- 热替换\n- webpack dll\n- js、css 内容 gzip\n- 构建 tar.gz 压缩包\n- 构建后的 web 静态服务\n\n### 默认 babel 配置\n\n```js\n'use strict';\n\nconst { NODE_ENV } = process.env;\n\nmodule.exports = {\n  presets: [\n    [\n      '@babel/env',\n      {\n        targets: {\n          browsers: ['ie \u003e= 11'],\n        },\n        // 测试环境需要把 import转换成 commonjs require 模式\n        modules: NODE_ENV === 'test' || NODE_ENV === 'TEST' ? 'commonjs' : false,\n        // 为了避免一些问题，使用 false\n        loose: false,\n      },\n    ],\n  ],\n  plugins: [\n    // Currently, @babel/preset-env is unaware that using import()\n    // with Webpack relies on Promise internally.\n    // Environments which do not have builtin support for Promise,\n    // like Internet Explorer, will require both the promise and\n    // iterator polyfills be added manually.\n    '@babel/plugin-syntax-dynamic-import',\n    // 这个是 es7 提案，并不是标准，用法如下\n    // 这里使用 legacy (stage 1) decorators 语法和行为。\n    // @decorator\n    // class Test {}\n    // 当 legacy = true 时，需要用在 `@babel/plugin-proposal-class-properties`\n    // 之前，否则无效\n    ['@babel/plugin-proposal-decorators', { legacy: true }],\n    // 使用 class properties 新用法\n    // class Test {\n    //   displayName = 'test';\n    // }\n    '@babel/plugin-proposal-class-properties',\n    // 需要配套安装 @babel/runtime（dependencies，非 devDependencies）\n    // 其中 helper 功能可以减少转换生成的代码（通过引用 @babel/runtime）\n    '@babel/plugin-transform-runtime',\n  ],\n};\n```\n\n### HTTP API 模拟（mock）\n\n这个功能在开发前期比较常用，可以保证和后端的同步开发。`webpack-launcher` mock 有以下优点：\n\n- 容易上手\n\n  express API 使用方式，如下：\n\n  ```js\n  module.exports = function(mockApp) {\n    mockApp.get('/keeper/v1/topic', function(req, res) {\n      res.send({ url: req.url, query: req.query });\n    });\n\n    mockApp.post('/keeper/v1/topic', function(req, res) {\n      res.send({ url: req.url, query: req.query });\n    });\n\n    mockApp.patch('/keeper/v1/topic/:id', function(req, res) {\n      res.send({\n        url: req.url,\n        query: req.query,\n        body: req.body,\n        'data|10': [{ 'id|+1': 1 }],\n      });\n    });\n\n    mockApp.delete('/keeper/v1/topic/:id', function(req, res) {\n      res.send({ url: req.url, query: req.query });\n    });\n  };\n  ```\n\n- 动态加载，服务启动后，修改 mock 文件后，无需重启服务，再次访问即可\n\n- 直接支持 mock.js 语法\n\n后续会继承一些更便捷的组合方式提供选用，使用者也可以基于 mock 用法进行开发新用法。\n\n#### mock 使用\n\n`webpack-launcher` 一切准备后之后，在项目根目录新建 `mock` 文件夹，并新建 `.mock.config.js` 文件。\n\n`.mock.config.js` 是 mock 程序的唯一入口，结构为：\n\n```js\nmodule.exports = function(mockApp) {\n  // 可以简单的把 mockApp 当做 express app\n};\n```\n\n在 `.mock.config.js` 中编写好 mock 内容，然后 `npm start` 启动服务（中途修改 mock 内容无需重启）。\n\n如果你要完全禁止这 mock 可以在 `.webpack.launcher.js` 进行如下配置：\n\n```js\nmodule.exports = {\n  useMockServer: false,\n};\n```\n\n### proxy（反向代理）\n\n这个用法跟 webpack-dev-server proxy 配置一样，请参考 [webpack 文档](https://www.webpackjs.com/configuration/dev-server/#devserverproxy)。\n\n### 域名 host 绑定\n\n使用此项功能可以在 `.webpack.launcher.js` 进行如下配置，默认值为 localhost：\n\n```js\nmodule.exports = {\n  host: 'webpack.launcher.com',\n};\n```\n\n启动服务后，会自动更新 host 到系统 hosts 文件。\n\n### 使用 Https\n\n是否使用 https 协议启动服务，默认不开启，用法请看 [webpack-dev-server 文档](https://www.webpackjs.com/configuration/dev-server/#devserver-https)，这里`.webpack.launcher.js` 配置简化为：\n\n```js\nmodule.exports = {\n  https: true,\n};\n```\n\n### 别名（alias）\n\nwebpack alias，用法请看 [webpack alias 文档](https://www.webpackjs.com/configuration/resolve/#resolve-alias)，这里 `.webpack.launcher.js` 配置 简化为：\n\n```js\nmodule.exports = {\n  alias: {\n    src: path.resolve('./src'),\n    // dayjs 可以减少代码量，目前没用到 moment 的地方\n    // 大部分 api dayjs 都可以替换 moment\n    // 以后用到需要看看有没有影响\n    moment: path.resolve('./node_modules/dayjs/dayjs.min.js'),\n    // 为了减少打包体积，无需引入多余的 icon\n    '@ant-design/icons/lib/dist$': path.resolve('./src/icons.js'),\n  },\n};\n```\n\n### 环境全局变量\n\n即 [webpack DefinePlugin](https://www.webpackjs.com/plugins/define-plugin/) 配置：\n\n```js\nnew webpack.DefinePlugin({\n  PRODUCTION: JSON.stringify(true),\n  VERSION: JSON.stringify('5fa3b9'),\n  BROWSER_SUPPORTS_HTML5: true,\n  TWO: '1+1',\n  'typeof window': JSON.stringify('object'),\n});\n```\n\n这里 `.webpack.launcher.js` 配置 简化为：\n\n```js\nmodule.exports = {\n  globals: {\n    PRODUCTION: JSON.stringify(true),\n    VERSION: JSON.stringify('5fa3b9'),\n    BROWSER_SUPPORTS_HTML5: true,\n    TWO: '1+1',\n    'typeof window': JSON.stringify('object'),\n  },\n};\n```\n\n### js、css 内容 gzip\n\n这个是新功能，也是 webpack-launcher 的特色，一般开启 gzip 都是在 web 服务器（如 Nginx）处理，web 服务器响应内容给浏览器客户端时会进行内容 gzip 压缩，然后浏览器进行解压后使用。\n\n而使用了此功能，静态文件 js 和 css 文件会被 gzip，无需 web 服务器进行压缩，省略了这一步。如果使用此功能，web 服务器需要做一个特殊处理，响应头需要添加 `Content-Encoding: gzip`（Nginx 不能设置为 gzip: true，而是手动添加响应头）。\n\n`.webpack.launcher.js` 配置如下：\n\n```js\nmodule.exports = {\n  buildGzip: true,\n};\n```\n\n### 热替换\n\n热替换有两种值选择：\n\n- default\n\n  webpack 默认的热替换热替换方式（需要手动开启），如果你想使用 `react-hot-loader` 你就必须使用此方式。\n\n- create-react-app\n\n  craate-react-app 热替换方式（webpack-launcher 默认开启这个）\n\n### DLL 功能\n\n如果你使用 webpack 直接配置 dll，那么这将会比较繁杂，但是如果你使用 `webpack-launcher`，那边将会非常简单。\n\n`.webpack.launcher.js` 配置如下：\n\n```js\nmodule.exports = {\n  dllEntry: {\n    main: ['react', 'react-dom'],\n    other: ['redux', 'react-redux'],\n  },\n};\n```\n\n**请确保 node_modules 下提取到 dll 的包已存在**，如果你使用的是 lerna 之类的多包管理工具（monorepo），不用担心，也没问题。\n\n`webpack-launcher dll` 支持多个入口，根据实际项目情况划分即可。\n\n#### 那么怎么生存 dll 代码呢？\n\n这个你完全可以不能担心，只要你运行 `npm start` 或者 `npm run build` ，程序会对比当前的 dllEntry 配置，如果发现 dllEntry 结构、package 版本变化（node_modules package 版本）会自动运行 `npm run build-dll` 命令内容，并生存 dll 文件。dll 生成后的文件位于根目录 `./public/dll` 文件夹下。\n\n没错生存的 dll 文件名都附带 8 位 hash 命名，不存在不同版本缓存问题，所以如果你手动运行了 `npm run build`，那边你需要重启服务。\n\n### 构建 tar.gz 压缩包\n\n`.webpack.launcher.js` 配置如下：\n\n```js\nmodule.exports = {\n  tar: `{name}-frontend-v{version}.tar.gz`,\n};\n```\n\n其中 `{name}` 会替换为 package.json 的 name 字段，`{version}` 会替换为 package.json 的 `version` 字段。\n\n### 构建后的 web 静态服务\n\n为了方便验收构建后的 web app，webpack launcher 也提供了静态服务功能，同时 `.webpack.launcher.js` 的 配置页使用于静态服务（除开 webpack 开发环境相关的配置，如 alias 等）。\n\n`npm run build` 构建成功后，直接运行 `npm run serve-build` 即可（proxy 、mock 配置一样可用）。\n\n## eject\n\n如果你想要更好的自定义其他 webpack 功能，你需要用到 eject 功能（如果你用过 create-react-app eject 功能更），那么很好理解。\n\n`npm run eject` 后终端会输出如下信息：\n\n```sh\n? Are you sure you want to eject? This action is permanent. Yes\n\nEjecting...\n\n  Adding ./.eslintrc.js\n  Adding ./.babelrc.js\n  Adding ./config/webpack.config.js\n  Adding ./config/webpackDevServer.config.js\n  Adding ./config/webpackLauncher.config.js\n  Adding ./config/webpack.dll.config.js\n  Adding ./scripts/start.js\n  Adding ./scripts/build.js\n  Adding ./scripts/serveBuild.js\n\nEjected sucessfully!\n```\n\n然后你就可以为所欲为了。","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdog-days%2Fwebpack-launcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdog-days%2Fwebpack-launcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdog-days%2Fwebpack-launcher/lists"}