极速、零配置的 web 应用打包工具, 同时支持 react 和 vue 的单页面应用,提供开箱即用支持 ,基于 webpackwebpack-react-vue-spa-awesome-confighttps://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" 更新:添加了 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 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" }} 安装依赖开发模式启动 webpack-dev-server 或者 生产模式启动 webpack 或者 全局安装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相当于执行 webpack serve --config ./release/config/webpack.config.js --mode=development 启动 webpack相当于执行 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 文件,修哪更哪,无需刷新页面即可实时看见修改结果 动态导入:可使用动态导入的语法 ,处理代码时会单独分离此模块,执行页面对应操作时才加载此模块,使用才加载不使用则不加载(代码懒加载),减少首屏加载代码大小和渲染时间 代码编译使用 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 组件热更新使用的 loadercss-loader / babel-loader /worker-loader/vue-loader/url-loader/style-loader/css-loader/sass-loader/file-loader worker-loader 可以加载 webworker 的文件,文件后缀名要写成.worker.jshttps://www.webpackjs.com/loaders/worker-loader/ 修复了使用 webpack.HotModuleReplacementPlugin 和 worker-loader 不兼容的 bughttps://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)`, },}; 使用的 pluginWorkboxWebpackPlugin.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 的 serviceworkerif ("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(() => {}); }); }} 或者 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 支持 webpack51."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()],}; |
请发表评论