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

[masx200]

项目推荐

• 项目地址：
  https://github.com/masx200/webpack-react-vue-spa-awesome-config

• 类别：javascript

• 项目后续更新计划：

• 项目描述：

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

• 源代码
  查看源代码 ./bin/index.js

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

• 推荐理由：

可以学习webpack4,也可以通过一个简单的命令来打包web应用,零配置,开箱即用

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

内部极简的配置文件,仅仅使用一个 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");

局部安装

cnpm install https://github.com/masx200/webpack-react-vue-spa-awesome-config.git --save

或者

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

设置package.json

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

开发模式

启动 webpack-dev-server

yarn start

或者

npm start

生产模式

启动 webpack

yarn build

或者

npm run build

• 站在巨人的肩膀上
  借鉴了 Facebook 开发的 Create-react-app的 webpack 配置的一部分，并进行了大量魔改

默认关闭了 eslint！

集成 postcss,自动增加前缀

webpack 中 alias 别名配置,

可以使用@代替src目录

局部刷新：

启用 Webpack 内置的 HMR，配合 react-hot-loader，增量更新 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 压缩：内置 uglifyjs 和 terser，对抽离出来的 JS 进行压缩去重，uglifyjs 用于压缩 ES5，terser 用于压缩 ES6

摇树优化：

启用 Webpack 内置的 Tree Shaking，禁止 babel 把代码转换成 Commonjs 规范，使用 ESM 规范的静态声明特点来去除不被引用或不被执行的代码块，起到减包作用

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

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

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

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

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

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

webpack/webpack-dev-server#1595

webpack/webpack#6642

webpack-contrib/worker-loader#174

webpack.config.js

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

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.

[521xueweihan]

@masx200 请按照要求和提示重新填写