# webpack-react-vue-spa-awesome-config **Repository Path**: masx200/webpack-react-vue-spa-awesome-config ## Basic Information - **Project Name**: webpack-react-vue-spa-awesome-config - **Description**: 极速、零配置的 web 应用打包工具, 同时支持 react 和 vue 的单页面应用,提供开箱即用支持 ， 基于 webpack,同时支持 react 和 vue 的单页面应用 通用的 webpack 配置文件,提供开箱即用支持 ，您无需学习和配置许多构建工具。即时重新加载可帮助您专注于开发。在部署时，您的捆绑包会自动优化 - **Primary Language**: JavaScript - **License**: GPL-3.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 18 - **Forks**: 4 - **Created**: 2019-07-31 - **Last Updated**: 2025-03-03 ## Categories & Tags **Categories**: ci **Tags**: webpack ## README # 极速、零配置的 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 ``` # 内部极简的配置文件 ## 内部 只使用 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()], }; ```