webpack-project-config-reference

A common configuration reference for webpack(4) project, extends from webpack3

Some basic features

• simple project demo
• basic support for SASS/ES6/React
• extract css files in production mode
• hot module replacement, automatically find free port for devServer
• support dynamic link library for vendor chunks
• separate production and development environment config
• extract common files around chunks
• jquery plugins usage
• build result notifications
• insert stylesheets and scripts to html file
• html, css/scss, js/jsx code style quality check (htmlhint stylelint eslint)
• building performance improving (thx for v4)
• postcss for css compatibility

More detail

v3 config introduction

v4 config introduction

Usage

1. Make sure that you have Python2.7 NodeJS NPM installed and environment variables are correctly set
2. Clone or just download this project locally, and walk into the project
3. Open the server with node server
4. Walk into the public directory with cd public, install the packages we need by npm i
5. Building the project with npm run build:prod, full commands list
6. Visit http://localhost:8088/views/home/home.html with your favorite browser
7. Adjust configuration in /public/webpack/webpack.config.js, code are well commented by CN, enjoy yourself with source code

Commands list

Reference by package.json, commands are for windows system and scheme is http by default

Add an argument -- --analysis after each of these commands will enable the webpack-bundle-analyzer, thus you can optimize your build processon further

Adjust it to whatever you like

Name	Description
npm run build:dll	build dynamic link library, build this first if you have never built it (under dir /dll)
npm run build:dev	build with development mode, using HMR
npm run build:prod	build with production mode
npm run build:dev:https	build with development mode, using https and HMR
npm run build:prod:profile	build with production mode and show building profile