All Projects → dongyuanxin → Webpack Demos

dongyuanxin / Webpack Demos

📦 Demos && Courses for Webpack 4

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Webpack Demos

Vue Element Admin
🎉 A magical vue admin https://panjiachen.github.io/vue-element-admin
Stars: ✭ 73,044 (+11457.59%)
Mutual labels:  webpack, webpack4
React Redux Boilerplate
Awesome React Redux Workflow Boilerplate with Webpack 4
Stars: ✭ 307 (-51.42%)
Mutual labels:  webpack, webpack4
Vue Electron Template
An Electron & Vue.js template with Hot-reloading enabled and common Vue plugins, dev, debug and build scripts configured.
Stars: ✭ 260 (-58.86%)
Mutual labels:  webpack, webpack4
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (-63.77%)
Mutual labels:  webpack, webpack4
Vue Cms
基于 Vue 和 ElementUI 构建的一个企业级后台管理系统
Stars: ✭ 415 (-34.34%)
Mutual labels:  webpack, webpack4
Webpack 4 Quickstart
Webpack 4 tutorial: All You Need to Know, from 0 Conf to Production Mode
Stars: ✭ 229 (-63.77%)
Mutual labels:  webpack, webpack4
Webpack Cdn Plugin
A webpack plugin that use externals of CDN urls for production and local node_modules for development
Stars: ✭ 306 (-51.58%)
Mutual labels:  webpack, webpack4
Js Library Boilerplate
Javascript Starter Boilerplate - Webpack 4, Babel 7, UMD, Hot Reloading, and more
Stars: ✭ 202 (-68.04%)
Mutual labels:  webpack, webpack4
Webpack Boilerplate
A minimal webpack 5 boilerplate with only Babel, SASS and lodash (optional) on board
Stars: ✭ 404 (-36.08%)
Mutual labels:  webpack, webpack4
Mocker Api
mocker-api that creates mocks for REST APIs. It will be helpful when you try to test your application without the actual REST API server.
Stars: ✭ 374 (-40.82%)
Mutual labels:  webpack, webpack4
React Multi Page App
🍡 react multi page app/react多页面应用
Stars: ✭ 226 (-64.24%)
Mutual labels:  webpack, webpack4
Webpack Starter Basic
A simple webpack starter project for your basic modern web development needs.
Stars: ✭ 552 (-12.66%)
Mutual labels:  webpack, webpack4
Frontend Boilerplate
An ES20XX starter with common frontend tasks using Webpack 4 as module bundler and npm scripts as task runner.
Stars: ✭ 224 (-64.56%)
Mutual labels:  webpack, webpack4
Wpk
a friendly, intuitive & intelligent CLI for webpack
Stars: ✭ 232 (-63.29%)
Mutual labels:  webpack, webpack4
Webpack Command
[DEPRECATED] Lightweight, modular, and opinionated webpack CLI that provides a superior experience
Stars: ✭ 218 (-65.51%)
Mutual labels:  webpack, webpack4
Vue2 Spa Tutorial
Vue2.x(即将升Vue 3)、 Webpack 4.x、Babel 7.x
Stars: ✭ 267 (-57.75%)
Mutual labels:  webpack, webpack4
Styled React Boilerplate
Minimal & Modern boilerplate for building apps with React & styled-components
Stars: ✭ 198 (-68.67%)
Mutual labels:  webpack, webpack4
Webpack Static Html Pages
Webpack template/example with multiple static html pages
Stars: ✭ 202 (-68.04%)
Mutual labels:  webpack, webpack4
Js Library Boilerplate Basic
Javascript Minimal Starter Boilerplate - Webpack 5 🚀, Babel 7, UMD, Unit Testing
Stars: ✭ 354 (-43.99%)
Mutual labels:  webpack, webpack4
Annotated Webpack Config
This is the companion github repo for the "An Annotated webpack 4 Config for Frontend Web Development" article.
Stars: ✭ 425 (-32.75%)
Mutual labels:  webpack, webpack4

webpack-demos:全网最贴心 webpack 系列教程和配套代码

Wow!全网最贴心的webpack4系列中文教程和配套代码 👇

放在开头

由于完全是博主利用业余时间编写和整理的,所以有些地方难免有失偏颇,还请多多海涵。如果您发现错误,欢迎致信 [email protected][email protected] ,我一定会在第一时间检查和修复!!!

如果本教程和示例代码对您的工作、学习或者爬坑有帮助,请动动您的小手,给个 Star,让更多的朋友了解并且参与进来,蟹蟹 ٩('ω')و

最后,欢迎转载和引用,但请指明出处(github 仓库或者博客文章地址均可)。这套教程和代码确实花费了博主很多精力和时间!

项目背景

上半年在做 web 项目的时候,在webpack上踩了很多坑。由于使用的是 webpack4,所以网上现成的教程并不多,而且大多数不成体系。还有很多教程,把很多知识点杂糅在一起进行讲解,对于新手来说真的很不友好。

所以我花费了 3 个多月整理了这份教程,一共分成 16 节,每节都有讲解,并且准备了配套代码。*应该说很贴心了吧哈哈哈。*当然,自己回查也很方便!

本来想着做成掘金小册,或者录个视频赚赚钱。奈何深感水平不够,只有一腔热情,所以直接开放了教程和源码。

项目地址

课程目录

  1. webpack4 系列教程: 前言: https://godbmw.com/passages/2018-07-29-webpack-demos-introduction/
  2. webpack4 系列教程(一): 打包 JS : https://godbmw.com/passages/2018-07-30-webpack-pack-js/
  3. webpack4 系列教程(二): 编译 ES6 : https://godbmw.com/passages/2018-07-31-webpack-compile-es6/
  4. webpack4 系列教程(三): 多页面解决方案--提取公共代码 : https://godbmw.com/passages/2018-08-06-webpack-mutiple-pages/
  5. webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载 : https://godbmw.com/passages/2018-08-08-webpack-spa-split-lazy/
  6. webpack4 系列教程(五): 处理 CSS : https://godbmw.com/passages/2018-08-17-webpack-css/
  7. webpack4 系列教程(六): 处理 SCSS : https://godbmw.com/passages/2018-08-18-webpack-scss/
  8. webpack4 系列教程(七): SCSS 提取和懒加载 : https://godbmw.com/passages/2018-08-28-webpack-scss-lazy/
  9. webpack4 系列教程(八): JS Tree Shaking : https://godbmw.com/passages/2018-09-01-js-tree-shaking/
  10. webpack4 系列教程(九): CSS Tree Shaking : https://godbmw.com/passages/2018-09-02-css-tree-shaking/
  11. webpack4 系列教程(十): 图片处理汇总 : https://godbmw.com/passages/2018-09-11-webpack-image/
  12. webpack4 系列教程(十一):字体文件处理 : https://godbmw.com/passages/2018-10-09-webpack-chracter-file/
  13. webpack4 系列教程(十二):处理第三方 JavaScript 库 : https://godbmw.com/passages/2018-10-09-webpack-js-pacakge/
  14. webpack4 系列教程(十三):自动生成 HTML 文件 : https://godbmw.com/passages/2018-10-17-automatic-html/
  15. webpack4 系列教程(十四):Clean Plugin and Watch Mode : https://godbmw.com/passages/2018-10-18-webpack-clean-and-watch-mode/
  16. webpack4 系列教程(十五):开发模式与 webpack-dev-server :https://godbmw.com/passages/2018-10-19-webpack-dev-server/
  17. webpack4 系列教程(十六):开发模式和生产模式·实战 : https://godbmw.com/passages/2018-10-19-webpack-dev-and-prod/

代码目录

  1. demo01: 打包JS
  2. demo02: 编译ES6
  3. demo03: 多页面解决方案--提取公共代码
  4. demo04: 单页面解决方案--代码分割和懒加载
  5. demo05: 处理CSS
  6. demo06: 处理Scss
  7. demo07: 提取Scss (CSS等等)
  8. demo08: JS Tree Shaking
  9. demo09: CSS Tree Shaking
  10. demo10: 图片处理--识别, 压缩, Base64编码, 合成雪碧图
  11. demo11: 字体文件处理
  12. demo12: 处理第三方JS
  13. demo13: 生成Html文件
  14. demo14: Watch Mode && Clean Plugin
  15. demo15: 开发模式--webpack-dev-server
  16. demo16: ⭐ 生产模式和开发模式分离 ⭐

关于作者

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].