Open chenbin92 opened 8 years ago
反馈一个错误,config.entry.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server"); 这个应该放在 var compiler = webpack(config); 语句执行之前,不然实时修改刷新不好使。其实原理就是:配置项中的inline:true 无法起作用,所以需要单独额外配置。
[There is no inline: true flag in the webpack-dev-server configuration, because the webpack-dev-server module has no access to the webpack configuration. Instead, the user must add the webpack-dev-server client entry point to the webpack configuration.](https://webpack.github.io/docs/webpack-dev-server.html)
跪求搭建react的环境和项目的详细步骤
有源码吗?
运行项目时,export不是内部或外部命令也不是可运行的程序或批处理文件,这是怎么回事
能有个阿里云的实际例子就好了。前面说的这些都知道。只是在开始上线部署的时候,还是有点懵逼。比如如何发布,如何每次根据版本号升级系统等。
@suxiaoX @liangzhm 服务端渲染:https://github.com/hubcarl/egg-react-webpack-boilerplate
前端渲染,可以通过 https://github.com/hubcarl/easywebpack-cli 工具初始化
目录
1. 技术选型
最近在一个项目初步尝试使用了reactJS,开发周期两周,选用的技术栈大致如下:
JavaScript:
CSS:
Build Tool:
Dependency manage
Git workflow:
API:
2. webpack 基础
2.1安装 webpack
作为全局变量安装
作为项目依赖安装
2.2 webpack 简介
webpack 的配置项主要包括以下几点:
示例用到的 Loaders
示例用到的 Plugins
2.3 使用 webpack-dev-server 启动服务器
2.3.1 刷新功能
webpack提供的一个静态资源服务器,这个家伙可不太好配置,看官方文档给看懵了,试验了好几次才配成功,后面我们会根据 NODE_ENV 环境变量分别配置 dev mode server 和 prod mode serve;先来看看其功能:
支持热更新(Hot Module Replacement)
注: 自动刷新和热更新是两个概念
2.3.2 这里主要介绍自动刷新 inline 模式的配置,inline模式又分为两种配置:
命令行模式: 命令行模式只需要加上
--line
选项即可Node.js API: 使用node.js api需要手动添加配置
2.3.3 配置 Hot Module Replacement
这是webpack最牛逼的特性之一,即模块热替换,在前端代码变动的时候无需整个刷新页面,只把变化的部分替换掉。使用HMR功能也有两种配置方式:
命令行方式: 命令行模式只需要加上
--line --hot
选项。--hot
会自动把webpack/hot/dev-server
加入到了webpack配置文件中的入口点。如果执行正确,可以在浏览器的控制台看到以下信息。webpack/hot/dev-server
加入到webpack配置文件的entry项new webpack.HotModuleReplacementPlugin()
加入到webpack配置文件的plugins项hot:true
加入到webpack-dev-server的配置项里面2.3.4 完整配置,主要分为三部分:
package.json: 自定义启动命令
现在你可以通过运行
npm start
启动服务器来。3. 配置 React, ES6 & Babel 6
ES6 和 JSX 转换
在最新的babel 6.x 版本中,在指定哪些代码转换器将被启用时,需要配置
presets
。最简单配置的方法就是项目根目录下建一个.babelrc
文件:配置好以上代码,你就可以开始用 es2015, jsx 了,相关的依赖包
4. 使用 ESlint 进行代码检查
特点:
配置:
可以通过以下三种方式配置 ESLint:
.eslintrc
文件(支持 JSON 和 YAML 两种语法)package.json
中添加 eslintConfig 配置块下面主要演示通过
.eslintrc
配置的步骤:4.1 在项目根目录下面新建
.eslintrc
文件4.2 Specifying Parser Options
4.3 Specifying Environments
4.4 Configuring Plugins
4.5 Configuring Rules
4.6 Extending Configuration Files
extends 属性值可以是:
*rules 属性可以做下面的任何事情以扩展(或覆盖)规则: 参数:0 关闭,1 警告,2 错误
4.7 以下是eslint配置文件常见的格式
4.8 Ignoring Files and Directories
通过在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。
4.9 在Sublime中安装插件:
4.10 相关插件
4.11工作流集成
4.12 更多参考
eslint 配置参考 Lint Like It’s 2015
4.13 运行
"eslint app
5. 样式处理
主要使用sass预处理器编写样式,需要先通过sass-loader处理成css,然后再通过css-loader加载成css模块,最后由style-loader加载器对其做最后的处理,从而运行时可以通过style标签将其应用到最终的浏览器环境。
安装好依赖后,通过以下简单的配置就可以使用sass;这里需要注意的一点是需要开启 sourceMap 功能,便于调试。
6. 图片处理
图片处理常见的loader有以下三种:
对于小质量的图片资源,可以由 url-loader 实现将其进行统一打包,代码中
url-loader?limit=8192
的含义就是对于所有小于 8kb 的图片资源转换成base64 格式。这在一定程度上可以替代CSS Sprites方案,用于减少对于小图片资源的HTTP请求数量。7. 配置生产环境
7.1 前端开发环境通常分为两种:
为了区分我们可以创建两个文件分别进行不同环境下的配置:
7.2 区分环境
webpack 提供了 DefinePlugin 设置环境变量,后面会根据设置的不同环境变量决定是否打包压缩,还是启动dev server 或者是 prod server
判断当前环境是否是生产环境
7.3 代码压缩
webPack 提供了内建插件,直接配置以下代码即可压缩代码
7.4 添加 Hash 缓存
7.5 自动生成页面
文件名带上 hash 值后,这个值在每次编译的时候都会发生变化,都需要在 html 文件里手动修改引用的文件名,这种重复工作很琐碎且容易出错,这里我们可以使用
html-webpack-plugin
来帮我们自动处理这件事情, 用来简化创建服务于 webpack bundle 的 HTML 文件,流程如下:8 构建流程图
最终实现的构建流程如下图所示:
Configuration tasks
npm start
: 启动开发模式下的servernpm run start:prod
: 启动生产模式的servernpm run build
: 打包生产模式的代码npm run lint
: eslint 代码检查npm run lint:watch
: eslint 监视npm run remove:build
: 删除dist目录npm run clean:build
: 清除dist目录9. 文件说明
.babelrc
: 配置 es2015,react 解析器.eslintrc
: 配置 eslint 代码检查server.js
: 配置本地 server (包含 dev server 和 prod server )webpack.config.dev.js
: 开发模式相关配置webpack.config.prod.js
: 生产模式相关配置10. 参考: