Giter Club home page Giter Club logo

express-webpack-full-live-reload-example's Introduction

express-webpack-full-live-reload-example

A workflow with full live reload for webpack&express application.

The explaining post could be found here.

This branch master is for webpack 4, use branch webpack_2 or webpack_1 if you need the older version.

Start

  1. Clone this repo.

  2. Install dependencies.

     yarn
     yarn global add supervisor
    
  3. Try these out.

    • yarn start to develop with full live reload.
    • yarn browsersync is a alternative for development. It may be faster when modifying the express views (templates) only.
    • yarn production to emit outputs and run the express for production.
    • yarn build if you care about what is hold in memory for development...

Preview

example preview

express-webpack-full-live-reload-example's People

Contributors

kenanpengyou avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

express-webpack-full-live-reload-example's Issues

Node Sass could not find a binding for your current environment

ERROR in Missing binding F:\Project\Webpack\express-webpack-full-live-reload-exa
mple\node_modules\node-sass\vendor\win32-x64-51\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit
with Node.js 7.x

Found bindings for the following environments:

  • Windows 64-bit with Node.js 6.x

This usually happens because your environment has changed since running npm ins tall.
Run npm rebuild node-sass to build the binding for your current environment.
@ ./client/page2/index.scss 4:14-191 13:2-17:4 14:20-197

尝试了node 6.3.0 与 7.0.0 npm 3.10.9 依然是这个错误,是什么原因?

npm start with sass require image error

ERROR in .//.npminstall/css-loader/0.23.1/css-loader?sourceMap!.//.npminstall/resolve-url-loader/1.6.0/resolve-url-loader!.//.npminstall/sass-loader/3.2.3/sass-loader?sourceMap!./client/page1/index.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./common_image.png in /Users/rehorn/Documents/Code/node/express-webpack-full-live-reload-example/client/page1
@ ./
/.npminstall/css-loader/0.23.1/css-loader?sourceMap!.//.npminstall/resolve-url-loader/1.6.0/resolve-url-loader!.//.npminstall/sass-loader/3.2.3/sass-loader?sourceMap!./client/page1/index.scss 6:272-301

ERROR in .//.npminstall/css-loader/0.23.1/css-loader?sourceMap!.//.npminstall/resolve-url-loader/1.6.0/resolve-url-loader!.//.npminstall/sass-loader/3.2.3/sass-loader?sourceMap!./client/page2/index.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./common_image.png in /Users/rehorn/Documents/Code/node/express-webpack-full-live-reload-example/client/page2
@ ./
/.npminstall/css-loader/0.23.1/css-loader?sourceMap!.//.npminstall/resolve-url-loader/1.6.0/resolve-url-loader!.//.npminstall/sass-loader/3.2.3/sass-loader?sourceMap!./client/page2/index.scss 6:272-301

ERROR in Cannot find module 'node-sass'

关键报错信息类似

ERROR in Cannot find module 'node-sass'
@ ./client/page1/index.scss 4:14-191 13:2-17:4 14:20-197
ERROR in Cannot find module 'node-sass'
@ ./client/page2/index.scss 4:14-191 13:2-17:4 14:20-197

于是执行 npm install node-sass,报错,

>[email protected] install /root/projects/vm/node_modules/node-sass
>node scripts/install.js
sh: 1: node: Permission denied
npm ERR! Linux 4.4.0-31-generic
npm ERR! argv "/root/software/node/bin/node" "/root/software/node/bin/npm" "install" "node-sass"
npm ERR! node v4.5.0
npm ERR! npm  v2.15.9
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn

于是使用

# npm config set unsafe-perm true 
# npm install node-sass -g

安装完毕后,再次执行npm start
错误依旧。。

请教可能是什么问题引起的呢?

关于“适时刷新”的不解

我执行 npm run 后,修改了 server 下 page 视图,结果过了 大概10秒后就刷新了一次页面,且之后是每隔 10秒的样子就会刷新一次。不知是作者所设想了效果吗?
我的设想效果如下:
当 server 端page视图发生变更后,过个1-2秒刷新一次浏览器,之后就不用再定时刷新了吧!

更改文件不能自动刷新,并报如下错误

XMLHttpRequest cannot load http://localhost:8081/01262bb4bd96c4ad0a55.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.6.149:8081' is therefore not allowed access.
pagename1.bundle.js:1 [HMR] Update check failed: Error: Manifest request to http://localhost:8081/01262bb4bd96c4ad0a55.hot-update.json timed out.
at XMLHttpRequest.n.onreadystatechange (http://192.168.6.149:8081/js/pagename1.bundle.js:1:578)

Module not found: Error: Can't resolve './client/home'

错误信息如下:
ERROR in multi ./client/home webpack-hot-middleware/client?reload=true
Module not found: Error: Can't resolve './client/home' in 'D:\Demos\express-demo\express-webpack'
@ multi ./client/home webpack-hot-middleware/client?reload=true

入口文件一定得是index.js吗?

重命名server/routes/index.jsroutes.js就会报错,因为想把index.js当做首页的入口,能不能支持自定义文件名。然后把client下面的page1page2重命名为indexusers之后,输入npm run build之后public文件夹里对应的只有bundle.js,对应的css文件没有了。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.