极速、零配置的 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

查看源代码 ./release/config/webpack.config.js

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

"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

局部安装

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

设置package.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

全局安装

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

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

{
    "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

<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变量来获得传入的参数设置的模式

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 文件，修哪更哪，无需刷新页面即可实时看见修改结果

动态导入：

可使用动态导入的语法

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

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

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 }
            );
    }
}

或者

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

站在巨人的肩膀上

借鉴了 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

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

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

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

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

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).

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

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

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

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)

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

8.soucemap

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

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”。

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