guoyongfeng/webpack-dev-boilerplate

基于React + Webpack + Babel的开发脚手架

基于React + Webpack + Babel的项目脚手架

这个脚手架工程模板用于快速启动基于 React + Webpack 为技术栈的前端项目

Features 功能特性

• 可以解析 JSX 语法
• 可以解析 ES6 语法新特性
• 支持 LESS 预处理器
• 支持 SASS 预处理器
• 编译完成自动打开浏览器
• 区分开发环境和生产环境
• 实现组件级热更新
• 实现代码的热替换，浏览器实时刷新查看效果
• 分离业务功能代码和公共依赖代码
• 单独分离 CSS 样式文件
• 支持编译 HTML 模板
• 支持文件 MD5 戳，解决文件缓存问题
• 支持图片、图标字体等资源的编译
• 支持浏览器源码调试
• 可以进行代码规则校验
• 支持 mocha 测试用例运行
• 支持一行命令产出待部署资源

1. start

$ git clone https://github.com/GuoYongfeng/webpack-dev-boilerplate
$ cd webpack-dev-boilerplate
$ npm install

2. dev

2.1 开发调试

//首先运行dll预打包
$ npm run start:pre
//打包完成，启动项目
$ npm start

查看效果 http://127.0.0.1:9090

2.2 代码检查

$ npm run lint

2.3 测试用例

$ npm run test:watch

2.4 产出资源

$ npm run build

3. 技术栈

• Webpack
• React
• ES6
• Redux
• React-router
• react-router-redux
• Babel
• Autoprefixer
• PostCSS
• CSS modules
• Less
• Sass
• Eslint

webpack-dev-boilerplate's Issues

allsome! thank you very much!

It's great! thank you very much!

这个组件级更新 是绕过了生命周期的 为什么要这样做呢

Do you want to request a feature or report a bug?
你希望向我报告BUG还是提交一个内容需求？

What is the current behavior?
目前的问题表现是什么样的？

If the current behavior is a bug, please provide the steps to reproduce .
如果这是个确认的问题，请描述一下具体的文章位置或是复现的步骤。

What is the expected behavior?
你预期的效果是什么样的呢？

升级了react 的版本 ‘npm run build'后部署环境报错！

报错信息：

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.

升级了react 的版本

"axios": "^0.15.3",
    "better-npm-run": "0.0.8",
    "es6-promise": "^4.0.5",
    "material-ui": "^0.16.4",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-redux": "^4.4.6",
    "react-router": "^3.0.0",
    "react-router-redux": "^4.0.7",
    "react-tap-event-plugin": "^2.0.1",
    "redux": "^3.6.0",
    "redux-thunk": "^2.1.0"

建议

在build的时候能不能加一个针对windows系统的配置

关于HtmlWebpackPlugin的问题

我看你的代码，可以在npm run dev 下面生成html 但是js和 index.html在一级，我用在我的项目中也可以，但是我想把js资源文件放在assets下面 index.html放在根目录下面，但是我build的时候可以，但是运行的时候就不可以，路径问题原因吧，我不知道怎么改，
我的 output 的 publicPath：‘/assets/’
devServer的 publicPath：‘/assets/’
这个不是写的 ‘/’ 所以要在 HtmlWebpackPlugin的filename修改，但是不知道要改成什么路径！

npm install 出错

verbose get http://172.16.51.11:7001/react-dom not expired, no request
没有办法 下载 什么原因

请问如何对多页面支持

你好，初次接触react + webpack 开发；对于该脚手架有一些疑惑

• 请问这个脚手架如何对多页面进行支持的；
• 对于单页面不同模块之间的调用是如何支持的；

能否丰富一下脚手架的基础展示，谢谢

脚手架 `npm run build` 不能正常显示页面, Cannot read property 'call' of undefined

Do you want to request a feature or report a bug?
你希望向我报告BUG还是提交一个内容需求？
Bug,
What is the current behavior?
目前的问题表现是什么样的？
我下载脚手架 运行后, npm run start:pre npm run start 能正常显示网页, npm run build 后, 我本地网页不能运行啊.
If the current behavior is a bug, please provide the steps to reproduce .
如果这是个确认的问题，请描述一下具体的文章位置或是复现的步骤。
接上一个问题的答案, 我打开本地build后的页面运行时,出现了, 报错.
具体是:
｀ Uncaught TypeError: Cannot read property 'call' of undefined｀
｀ Uncaught TypeError: Cannot read property 'shape' of undefined｀
What is the expected behavior?
你预期的效果是什么样的呢？
我目前想到的是build 后能够看到和 npm run start后一样的能够运行项目的效果.

ZFPX

有监听到文件的变化但是浏览器的刷新不是实时的，基本都需要自己手动刷新是什么鬼= =

如图，求解。。

脚手架支持node版本问题

Do you want to request a feature or report a bug?
bug

What is the current behavior?
只支持6.0node版本以上。

If the current behavior is a bug, please provide the steps to reproduce .
文档说明或是支持低版本

What is the expected behavior?
文档说明或是支持低版本

请问大神为什么要有start:pre这个命令

我看其他人的git里面就直接npm start了. 为什么您这个会有一个start pre啊? 能否加载到start里面 先执行一个pre再运行原来的start?