webpackforspa's Introduction

webpack for single page project

Introduction

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

Installation

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

License

http://www.opensource.org/licenses/mit-license.php

webpackforspa's People

Contributors

Stargazers

Watchers

webpackforspa's Issues

2个bug

if (currentTarget == "build") { // online mode （线上模式）

    debug = false, devServer = false, minimize = true;

} else if (currentTarget == "dev") { // dev mode （开发模式）

    debug = true, devServer = false, minimize = false;
}

publicPath: debug ? '/webpackForSPA/dist/' : '/webpackForSPA/',

1,线上及开发模式 publicPath 都有问题，不能正常引入文件

2,我试着这样设置

线上及开发模式时候 publicPath: './ ‘ 这样打包正常但是图片路径不正确，打包之后的路径不能正确引入background: url(./img/banner-img-6489cfff.jpg) no-repeat top;
不是css中所引入的background: url(../img/banner-img.jpg) no-repeat center top;

关于图片路径问题，我实在想不出来怎么弄了，求解

楼主你好，看到你的分享，按照步骤来做的，npm intsall都报错？

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'dev-hrm' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev-hrm', 'dev-hrm', 'postdev-hrm' ]
5 info lifecycle [email protected]predev-hrm: [email protected]
6 silly lifecycle [email protected]predev-hrm: no script for predev-hrm, continuing
7 info lifecycle [email protected]dev-hrm: [email protected]
8 verbose lifecycle [email protected]dev-hrm: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]dev-hrm: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;E:\webpack\webpackForSPA\node_modules.bin;C:\Program Files\nodejs;D:\RailsInstaller\Git\cmd;D:\RailsInstaller\Ruby2.2.0\bin;C:\Program Files (x86)\Common Files\NetSarang;C:\windows\system32;C:\windows;C:\windows\System32\Wbem;C:\windows\System32\WindowsPowerShell\v1.0;C:\Program Files\Intel\WiFi\bin;C:\Program Files\Common Files\Intel\WirelessCommon;C:\Program Files (x86)\AMD\ATI.ACE\Core-Static;C:\Java\jdk1.7.0_79\bin;D:\mysql-5.6.27-winx64\bin;D:\apache-maven-3.2.3\bin;D:\Program Files (x86)\IDM Computer Solutions\UltraEdit;C:\Program Files (x86)\IDM Computer Solutions\UltraCompare;D:\tomcat\apache-tomcat-7.0.62\bin;D:\apache-ant-1.9.6\bin;D:\nodejs\node_global\node_modules;C:\Program Files\Microsoft\Web Platform Installer;C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0;C:\Program Files (x86)\Windows Kits\8.0\Windows Performance Toolkit;C:\Program Files\Microsoft SQL Server\110\Tools\Binn;C:\Python27;C:\Program Files\nodejs;C:\Program Files (x86)\IDM Computer Solutions\UltraCompare;C:\Users\Administrator\AppData\Roaming\npm
10 verbose lifecycle [email protected]dev-hrm: CWD: E:\webpack\webpackForSPA
11 silly lifecycle [email protected]dev-hrm: Args: [ '/d /s /c', 'webpack-dev-server --config' ]
12 silly lifecycle [email protected]dev-hrm: Returned: code: 1 signal: null
13 info lifecycle [email protected]~dev-hrm: Failed to exec dev-hrm script
14 verbose stack Error: [email protected] dev-hrm: webpack-dev-server --config
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:242:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:852:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
15 verbose pkgid [email protected]
16 verbose cwd E:\webpack\webpackForSPA
17 error Windows_NT 6.1.7601
18 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "dev-hrm"
19 error node v6.3.0
20 error npm v3.10.3
21 error code ELIFECYCLE
22 error [email protected] dev-hrm: webpack-dev-server --config
22 error Exit status 1
23 error Failed at the [email protected] dev-hrm script 'webpack-dev-server --config'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the webpackforspa package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error webpack-dev-server --config
23 error You can get information on how to open an issue for this project with:
23 error npm bugs webpackforspa
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls webpackforspa
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

huangshuwei / webpackforspa Goto Github PK