webpack-react-vue-spa-awesome-config: 极速、零配置的 web 应用打包工具, 同时支持 react 和 vue 的单页面应用,提供开箱即用支持，基于 webpack,同时支持 react 和 vue 的单页面应用通用的 webpack 配置文件,提供开箱即用支持，您无需学习和配置许多构建工具。即时重新加载可帮助您专注于开发。在部署时，您的捆绑包会自动优化

# 极速、零配置的 web 应用打包工具, 同时支持 react 和 vue 的单页面应用,提供开箱即用支持 ,基于 webpack

# webpack-react-vue-spa-awesome-config

https://github.com/masx200/webpack-react-vue-spa-awesome-config

## webpack-react-vue-spa-awesome-config 是一个命令行工具，也可以下载本软件包，自定义 webpack 配置，启动示例

### 极速、零配置的 web 应用打包工具, 同时支持 react 和 vue 的单页面应用,提供开箱即用支持

### Fast, zero-configuration web application packaging tool that supports both single-page applications for react and vue, out-of-the-box support

# 基于 webpack, 同时支持 react 和 vue 的单页面应用 通用的 webpack 配置文件,提供开箱即用支持

## 无需配置：您无需配置任何内容。为您处理开发和生产构建的相当好的配置，以便您可以专注于编写代码。

# 少学习 您无需学习和配置许多构建工具。即时重新加载可帮助您专注于开发。在部署时，您的捆绑包会自动优化。

愿世上再无 webpack 配置师

[查看源代码 ./bin/index.js](https://github.com/masx200/webpack-react-vue-spa-awesome-config/blob/master/bin/index.js)

[查看源代码 ./release/config/webpack.config.js](https://github.com/masx200/webpack-react-vue-spa-awesome-config/blob/master/release/config/webpack.config.js)

![react](image/react.JPG)

![vue](image/vue.JPG)

![webpack](image/webpack.JPG)

# 配置一些其他的加载器的选项的文件

"babel.config.js"

"tsconfig.json"

"postcss.config.js"

"terser.config.js"

# 更新：添加了 `fork-ts-checker-webpack-plugin`

# 更新：添加了 `ts-loader`

# 更新 ：支持 `vue3` 和 `vue-loader16` 了

# 更新 ：使用`@next/react-refresh-utils`支持 React 热更新了

# 更新 : 命令行程序支持的参数

## 开发模式

`start`

## 生产模式

`build`

## 开发模式

`--mode=development`

## 生产模式

`--mode=production`

## 使用的自定义配置文件

`--config=webpack.config.js`

## 输出文件公共的网址

`--output-public-path=https://masx200.github.io/`

# 更新 :新增 `babel-plugin-htm` ,支持`HTM (Hyperscript Tagged Markup)`

https://github.com/developit/htm

# 更新!可以通过命令行传入 --output-public-path= 参数

`publicPath`指定在浏览器中引用时输出文件的公共 URL 地址。

The `publicPath` specifies the public URL address of the output files when referenced in a browser.

# 新版本! 可以通过 npm 或者 yarn 安装 github 仓库的模块了!

# 使用方法

### 初始化 package.json

如果没有初始化 package.json，请先初始化

运行

```
yarn init
```

## 局部安装

```shell
yarn add @masx200/webpack-react-vue-spa-awesome-config

```

设置`package.json`

```json
{
    "scripts": {
        "start": "webpack-react-vue-spa-awesome-config start",
        "build": "webpack-react-vue-spa-awesome-config build"
    }
}
```

## 安装依赖

```
yarn install
```

## 开发模式

启动 webpack-dev-server

```
yarn start
```

或者

```
npm start
```

## 生产模式

启动 webpack

```
yarn build
```

或者

```
npm run build
```

## 全局安装

```shell
yarn global add @masx200/webpack-react-vue-spa-awesome-config

```

## 开发模式

启动 webpack-dev-server

```
webpack-react-vue-spa-awesome-config start
```

## 生产模式

启动 webpack

```
webpack-react-vue-spa-awesome-config build
```

# 入口文件

是"public/index.html"和"src/index.tsx"或者 "src/index.ts"或者 "src/index.jsx"或者 "src/index.js"

如果入口文件不存在,则会自动生成入口文件

# 修改自定义的 `webpack` 配置文件

`webpack.config.js`

```js
const {
    createconfig,
} = require("@masx200/webpack-react-vue-spa-awesome-config");

module.exports = (env, argv) => {
    const config = createconfig(env, argv);

//do something with webpackconfig
    return config;
};
```

`package.json`

```json
{
    "scripts": {
        "start": "webpack-react-vue-spa-awesome-config --config=./webpack.config.js --mode=development ",
        "build": "webpack-react-vue-spa-awesome-config --config=./webpack.config.js --mode=production "
    }
}
```

## 启动 webpack-dev-server

```
yarn start
```

相当于执行

```
webpack serve  --config ./release/config/webpack.config.js  --mode=development
```

## 启动 webpack

```
yarn build
```

相当于执行

```
webpack  --config ./release/config/webpack.config.js     --mode=production
```

# 给 浏览器自动添加 `polyfill`

```html
<script src="https://cdn.bootcss.com/babel-polyfill/7.12.1/polyfill.min.js"></script>
```

# 内部极简的配置文件

## 内部 只使用 webpack.config.js 和 package.json

### 内部实现原理 仅仅使用一个 webpack.config.js 文件即可同时处理开发模式和生产模式

webpack 使用配置文件启动的时候,默认不支持通过`--mode=development`或者`--mode=production`来设置 webpack 的模式,

在 `webpack.config.js`文件中通过如下方式来判断 webpack 的模式,即读取`process.argv`变量来获得传入的参数设置的模式

```javascript
process.argv.includes("--mode=production")
    ? (process.env.NODE_ENV = "production")
    : (process.env.NODE_ENV = "development");
```

# 默认关闭了 `eslint`！

可以在`vscode`中安装`eslint`插件来检查代码

# 集成 postcss,自动增加前缀

# webpack 中 alias 别名配置,

可以使用`@`代替`src`目录

# 局部刷新：

启用 Webpack 内置的 HMR，增量更新 css 文件和 js 文件，修哪更哪，无需刷新页面即可实时看见修改结果

# 动态导入：

可使用动态导入的语法

```javascript
import().then();
```

，处理代码时会单独分离此模块，执行页面对应操作时才加载此模块，使用才加载不使用则不加载(代码懒加载)，减少首屏加载代码大小和渲染时间

# 代码编译

使用 style-loader 和 css-loader 处理 CSS，把 CSS 从 JS 中单独抽离出来

使用 sass-loader 处理 Sass，通过 node-sass 编译 sass 文件为 css 文件

使用 less-loader 处理 Less，通过 less 编译 less 文件为 css 文件

使用 babel-loader 根据预设环境和 browserslist 处理编写的 ES6 代码和 TS 代码，并生成浏览器可识别的 ES5 代码

使用 vue-loader 把`*.vue` 文件编译成 vue 组件转成 js 代码

# 代码分割：

对业务代码进行打包，分割成 WebpackRuntime 代码块、第三方依赖代码块、公共业务代码块、单个业务代码块

# 代码合并：

通过对相同模块、相同功能或复用多次的代码进行整体合并，起到减包作用

# 压缩合并：

CSS 压缩：内置 MiniCssExtractPlugin 和 OptimizeCSSAssetsPlugin，对抽离出来的 CSS 进行压缩去重

JS 压缩：内置 terser，对抽离出来的 JS 进行压缩去重，terser 用于压缩 ES6

# 摇树优化：

启用 Webpack 内置的 Tree Shaking，禁止 babel 把代码转换成 Commonjs 规范

，使用 ESM 规范的静态声明特点来去除不被引用或不被执行的代码块，起到减包作用

# 使用 terser-webpack-plugin 删除注释和 console.log

# 生产环境自动关闭 sourcemap，压缩混淆 js 和 css 和 html 代码

# 开发环境支持模块热更新，和 sourcemap

## 使用`vue-loader`实现`Vue`组件热更新

## 使用的 loader

css-loader / babel-loader /worker-loader/vue-loader/url-loader/style-loader/css-loader/sass-loader/file-loader

# worker-loader 可以加载 webworker 的文件，文件后缀名要写成.worker.js

https://www.webpackjs.com/loaders/worker-loader/

### 修复了使用 webpack.HotModuleReplacementPlugin 和 worker-loader 不兼容的 bug

https://github.com/webpack/webpack-dev-server/issues/1595

https://github.com/webpack/webpack/issues/6642

https://github.com/webpack-contrib/worker-loader/issues/174

该错误来自 Web 工作者，因为 Web worker window 上不可用。

webpack.config.js

```javascript
module.exports = {
    output: {
        globalObject: `( (typeof window !== "undefined" ? window : false) ||
    (typeof WorkerGlobalScope !== "undefined" ? WorkerGlobalScope : false) ||
    this)`,
    },
};
```

## 使用的 plugin

WorkboxWebpackPlugin.GenerateSW/MiniCssExtractPlugin/VueLoaderPlugin/HtmlWebpackPlugin/TerserPlugin/OptimizeCSSAssetsPlugin/webpack.HotModuleReplacementPlugin/WebpackDeepScopeAnalysisPlugin

# 提供 workbox 支持单页面应用缓存

https://developers.google.cn/web/tools/workbox/

JavaScript Libraries for adding offline support to web apps

Workbox is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build Progressive Web Apps.

## 性能

停止在网络上等待！您可以通过缓存和提供文件来提高 Web 应用程序的性能，这些文件由服务工作人员提供支持。

## 弹性

即使在不可靠的连接上，您的 Web 应用程序仍然可以使用正确的运行时缓存策略。

## 增强

想要构建一个渐进的 Web 应用程序？Workbox 可以轻松创建离线初次体验。

# 注册 google 的 workbox 的 serviceworker

```javascript
if ("production" === process.env.NODE_ENV) {
    if (
        location.hostname !== "localhost" &&
        "127.0.0.1" !== location.hostname
    ) {
        "serviceWorker" in navigator &&
            window.addEventListener(
                "load",
                function () {
                    navigator.serviceWorker
                        .register("service-worker.js")
                        .catch(() => {});
                },
                { once: true }
            );
    }
}
```

或者

```javascript
import "@masx200/webpack-react-vue-spa-awesome-config/registerserviceworker.js";
```

## 站在巨人的肩膀上

### 借鉴了 Facebook 开发的 [Create-react-app](https://github.com/facebook/create-react-app)的 webpack 配置的一部分，并进行了大量魔改

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js

https://github.com/facebook/create-react-app

https://npm.taobao.org/package/react-scripts

# 支持 webpack5

1."webpack-dev-server"无法启动

https://github.com/webpack/webpack/issues/13367

将命令`webpack-dev-server`替换成`webpack serve`

2.

https://github.com/webpack-contrib/copy-webpack-plugin

由于插件`webpack-copyfiles-plugin`已经不兼容了，直接替换成
`copy-webpack-plugin`

3.

https://github.com/webpack/webpack/issues/11637

将`NamedModulesPlugin` 替换为 `optimization.moduleIds: 'named'`

4.

https://webpack.js.org/plugins/split-chunks-plugin/#splitchunksname

修改了 configuration.optimization.splitChunks.name

configuration.optimization.splitChunks.name should be one of these:
false | string | function
-> Give chunks created a name (chunks with equal name are merged).

5.

https://webpack.docschina.org/blog/2020-10-10-webpack-5-release/#changes-to-the-structure

`[hash]` 作为完整的编译 hash 值，现已被弃用
迁移：使用 `[fullhash]` 代替，或最好选用其他 hash 选项

6.

https://github.com/GoogleChrome/workbox/issues/1790

WARNING in GenerateSW has been called multiple times, perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate! Please see for more information.

只在生产环境运行插件 ，开发环境不运行此插件。

new WorkboxWebpackPlugin.GenerateSW

7.

https://webpack.docschina.org/configuration/module/#ruletype

ERROR in ./src/index.js 1:0  
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)

```js
[
    {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        type: "javascript/auto",
        loader: require.resolve("babel-loader"),
    },
];
```

8.soucemap

https://webpack.docschina.org/configuration/devtool/#root

```js
module.exports = { devtool: isEnvDevelopment ? "inline-source-map" : false };
```

9.Hot Module Replacement 失效解决办法

https://www.cnblogs.com/guangzan/p/14744226.html

https://webpack.docschina.org/guides/hot-module-replacement/

原因分析

项目根目录存在 .browserslistrc 文件，或者 package.json 存在 “browserslist”。

```js
module.exports = {
    target: "web",
    devServer: {
        hot: true,
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
};
```

masx200/webpack-react-vue-spa-awesome-config

简介

发行版 (19)

贡献者

语言

近期动态

masx200/webpack-react-vue-spa-awesome-config .gitee-modal { width: 500px !important; }

简介

发行版 (19)

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

语言

近期动态

搜索帮助

masx200/webpack-react-vue-spa-awesome-config