carloluis / Webpack Demo
Licence: mit
webpack 4 config. demo ⚙️
Stars: ✭ 131
Programming Languages
javascript
184084 projects - #8 most used programming language
es6
455 projects
Projects that are alternatives of or similar to Webpack Demo
Frontie Webpack
Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js
Stars: ✭ 102 (-22.14%)
Mutual labels: webpack, webpack4
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+893.89%)
Mutual labels: webpack, webpack4
Generate Pages Tutorial
教你一步步从零构建 webpack 开发多页面环境
Stars: ✭ 63 (-51.91%)
Mutual labels: webpack, tutorial
Webpack Seed
🚀 A Multi-Page Application base on webpack and babel. webpack搭建基于ES6,支持模板的多页面项目
Stars: ✭ 113 (-13.74%)
Mutual labels: webpack, webpack4
Expo Three Demo
🍎👩🏫 Collection of Demos for THREE.js in Expo!
Stars: ✭ 76 (-41.98%)
Mutual labels: tutorial, demo
Circleci Demo Python Django
Example Django application running on CircleCI
Stars: ✭ 100 (-23.66%)
Mutual labels: tutorial, demo
Universal React Demo
ES6 demo of a simple but scalable React app with react-router, code splitting, server side rendering, and tree shaking.
Stars: ✭ 50 (-61.83%)
Mutual labels: webpack4, demo
Vue Meizi
vue最新实战项目,vue2 + vuex + webpack + es6 干货多多,新手福利
Stars: ✭ 1,476 (+1026.72%)
Mutual labels: webpack, demo
React Bootstrap Webpack Starter
ReactJS 16.4 + new React Context API +react Router 4 + webpack 4 + babel 7+ hot Reload + Bootstrap 4 + styled-components
Stars: ✭ 103 (-21.37%)
Mutual labels: webpack, webpack4
Webpack4 Es6 React
A front-end project based on webpack4, react16, es6, antd and other technologies
Stars: ✭ 61 (-53.44%)
Mutual labels: webpack, webpack4
Git Cheats
Git Cheats - Interactive Cheatsheet For Git Commands
Stars: ✭ 124 (-5.34%)
Mutual labels: tutorial, demo
Vue Multiple Pages
A multiple Pages Starter use Vue-cli3
Stars: ✭ 1,079 (+723.66%)
Mutual labels: webpack, webpack4
Multi Page App With React
🔧 A lightweight, flexible webpack setup with React for multi page application development
Stars: ✭ 82 (-37.4%)
Mutual labels: webpack, webpack4
Webpack
Serve webpack assets properly from golang frameworks
Stars: ✭ 97 (-25.95%)
Mutual labels: webpack, webpack4
React Redux Antdesign Webpack Starter
react + redux + ant design + react-router 4 + webpack 4 starter
Stars: ✭ 44 (-66.41%)
Mutual labels: webpack, webpack4
Html Inline Css Webpack Plugin
☄️ A webpack plugin for convert external stylesheet to the embedded stylesheet
Stars: ✭ 48 (-63.36%)
Mutual labels: webpack, webpack4
Angular 7 Webpack 4 Boilerplate
Ready to use Angular 7 project with webpack 4 configuration for development and production
Stars: ✭ 102 (-22.14%)
Mutual labels: webpack, webpack4
Knowledge
文档着重构建一个完整的「前端技术架构图谱」,方便 F2E(Front End Engineering又称FEE、F2E) 学习与进阶。
Stars: ✭ 1,620 (+1136.64%)
Mutual labels: webpack, webpack4
Webpack 4 Demo · Legato 🎶
Demo project to start using and experiment with Webpack 4
Start
Restore dependencies and start development server:
yarn && yarn dev
Check your browser console at localhost:8080
Features
-
entry
/output
custom config. - chunk splitting (
app
|vendors
) - html creation: html-webpack-plugin
- copying files: copy-webpack-plugin
- webpack-dev-server
- Sass support
- Hot Module Replacement
Webpack
Install webpack
yarn add webpack webpack-cli --dev
More
This project started with Webpack 4
in beta version:
# add webpack 4 (currently on 4.0.0-beta.2)
yarn add [email protected] webpack-cli --dev
Zero Config (#0CJS)
Entry / Output
No need for explicit specify entry
and output
properties in the webpack configuration.
In Webpack 4 those fields are defaulted to:
{
"entry": "./src",
"output": "./dist"
}
Mode
Webpack mode
reduce the required configuration for an useful build:
-
development
: this mode provide useful error messages and is optimized for speed (unminified bundle) -
production
: enables optimizations out of the box (scope hoisting, tree shaking, minification, etc.)
webpack --mode production
There is also another hidden none
mode which disables everything (available only inside the configuration object).
Changes
- Dropped Node.js 4 support. Therefore, more benefits from ES6 features (optimizations from V8).
- Sets of defaults with production and development modes.
- Changes on plugins (Some actives depending on mode.
CommonsChunkPlugin
was removed) - Optimizations, performance boost and many more...
- Read changeset of Webpack v4.0.0
Articles
- 🚀 webpack 4 beta — try it today! 🚀
- webpack 4: mode and optimization
- webpack 4: import() and CommonJs
- webpack 4: Code Splitting, chunk graph and the splitChunks optimization
- webpack 4: released today!! ✨
- release notes & changelog
License
MIT © Carloluis
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].