極速、零配置的 web 應用打包工具, 同時支持 react 和 vue 的單頁面應用,提供開箱即用支持 ,基於 webpack4.x

webpack-react-vue-spa-awesome-config

github.com/masx200/web…

webpack-react-vue-spa-awesome-config 是一個命令行工具

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

基於 webpack4.x, 同時支持 react 和 vue 的單頁面應用 通用的 webpack 配置文件,提供開箱即用支持

無需配置：您無需配置任何內容。爲您處理開發和生產構建的至關好的配置，以便您能夠專一於編寫代碼。

少學習 您無需學習和配置許多構建工具。即時從新加載可幫助您專一於開發。在部署時，您的捆綁包會自動優化。

查看源代碼 ./bin/index.js

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

新版本! 能夠經過 npm 或者 yarn 安裝 github 倉庫的模塊了!

使用方法

初始化 package.json

若是沒有初始化 package.json，請先初始化

運行

yarn init
複製代碼

或者

npm init
複製代碼

局部安裝

npm 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"
  }
}
複製代碼

安裝依賴

yarn install
複製代碼

或者

npm install
複製代碼

開發模式

啓動 webpack-dev-server

yarn start
複製代碼

或者

npm start
複製代碼

生產模式

啓動 webpack

yarn build
複製代碼

或者

npm run build
複製代碼

全局安裝

npm install https://github.com/masx200/webpack-react-vue-spa-awesome-config.git -g
複製代碼

或者

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

複製代碼

開發模式

啓動 webpack-dev-server

webpack-react-vue-spa-awesome-config start
複製代碼

生產模式

啓動 webpack

webpack-react-vue-spa-awesome-config build
複製代碼

入口文件是"public/index.html"和'src/index.js'

若是入口文件不存在,則會自動生成入口文件

內部極簡的配置文件

內部 只使用 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！

集成 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

使用的 loader

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

worker-loader 能夠加載 webworker 的文件，文件後綴名要寫成.worker.js

www.webpackjs.com/loaders/wor…

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

github.com/webpack/web…

github.com/webpack/web…

github.com/webpack-con…

該錯誤來自 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/UglifyJsPlugin

workbox

developers.google.cn/web/tools/w…

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

try {
  "serviceWorker" in navigator &&
    window.addEventListener("load", function() {
      navigator.serviceWorker.register("service-worker.js");
    });
} catch (error) {}
複製代碼

借鑑了 Facebook 開發的 Create-react-app的 webpack 配置的一部分，並進行了大量魔改

github.com/facebook/cr…

github.com/facebook/cr…

npm.taobao.org/package/rea…