🌈webpack for single page project
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
libs update config fle Jul 3, 2016
mockServer webpackForSPA Jun 30, 2016
src update the hrm.js Jul 3, 2016
.gitattributes 修改项目类型 Dec 14, 2016
.gitignore update the project Jul 1, 2016
LICENSE.txt add LICENSE Jun 30, 2016
README.md Update README.md Aug 7, 2017
package.json Update package.json Sep 3, 2016
webpack.config.js 合并请求 Oct 30, 2016


webpack for single page project


This this a simple single page project by webpack. Help you quickly start to learn webpack. More detailed introduction please read my blog...


project: $ npm install

global: $ npm install webpack -g

How to use

First copy the repo into your disk.

$ git clone https://github.com/huangshuwei/webpackForSPA.git

Then $ cd webpackForSPA

Next you can see the result by different command mode

  • online mode: $ npm run build
  • dev mode: $ npm run dev
  • dev with HRM mode: $ npm run dev-hrm

If you use 'dev with HRM mode' ,you should start the node server first(use node server to mock backend server).

$ cd mockServer

$ node server.js

What can this project do with webpack

1.Extract css

2.Loading styles、images...

3.Generate html (html contain build bundles that include a hash in the filename which changes every compilation)

4.Generate common chunk

5.Splitting bundles

6.Setting environment variables

7.Compress the build

8.Add hashes to build bundles

9.Auto Refresh Browser

10.Hot Module Replacement(HRM)

11.Developing with backend server(like java、C#、nodejs、php)

12.Distinguish dev and build

13.Merge config

14.Clean publishing directory

Useful links