[React项目总结] 基于 webpack 搭建前端工程基础篇 #1 Open chenbin92 opened this issue on 13 Jul · 1 comment Labels None yet Milestone No milestone Assignees No one assigned 2 participants Notifications Unsubscribe You’re receiving notifications because you’re subscribed to this thread. Owner chenbin92 commented on 13 Jul • edited 目录 技术选型webpack 基础 安装 webpackwebpack 简介使用webpack-dev-server启动服务器 配置 React, ES6 & Babel 6使用 ESlint 进行代码检查样式处理图片处理区分开发及生产环境构建流程图文件说明参考 1. 技术选型 最近在一个项目初步尝试使用了reactJS,开发周期两周,选用的技术栈大致如下: JavaScript: Language: ES6Framework: React, Redux CSS: Language: SCSSFramework: ant-design Build Tool: Webpack Dependency manage npm Git workflow: Gitlab flow API: JSON 2. webpack 基础 2.1安装 webpack 作为全局变量安装 $ npm install -g webpack $ webpack -v => webpack 1.13.0 作为项目依赖安装 $ npm install webpack --save-dev 2.2 webpack 简介 webpack 的配置项主要包括以下几点: entry: 入口,定义要打包的文件output: 出口,定义打包输出的文件;包括路径,文件名,还可能有运行时的访问路径(publicPath)参数module: webpack将所有的资源都看做是模块,而模块就需要加载器;主要定义一些loaders,定义哪些后缀名的文件应该用哪些loader test: 检测哪些文件需要此loader,是一个正则表达式exclude: 忽略哪些文件 resolve: 定义能够被打包的文件,文件后缀名plugins: 定义一些额外的插件 示例用到的 Loaders 处理样式:sass-loader、style-loader、css-loader,将 sass 转成 css图片处理,url-loader、file-loader、image-webpack-loader, 将图片转换成base64 或者 进行压缩js处理: babel-loader,babel-preset-es2015,babel-preset-react,将es6或更高级的代码转成es5的代码 示例用到的 Plugins 代码热替换:HotModuleReplacementPlugin生成html文件:HtmlWebpackPlugin报错但不退出webpack进程:NoErrorsPlugin代码压缩:UglifyJsPlugin自动打开浏览器: OpenBrowserPlugin设置环境变量: DefinePlugin 2.3 使用 webpack-dev-server 启动服务器 2.3.1 刷新功能 webpack提供的一个静态资源服务器,这个家伙可不太好配置,看官方文档给看懵了,试验了好几次才配成功,后面我们会根据 NODE_ENV 环境变量分别配置 dev mode server 和 prod mode serve;先来看看其功能: 支持两种模式的自动刷新(Automatic Refresh) iframe模式inline模式 支持热更新(Hot Module Replacement) 注: 自动刷新和热更新是两个概念 2.3.2 这里主要介绍自动刷新 inline 模式的配置,inline模式又分为两种配置: 命令行模式: 命令行模式只需要加上 --line选项即可 $ webpack-dev-server --line Node.js API: 使用node.js api需要手动添加配置 var config = { entry: [ 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080', path.resolve(__dirname, 'app/index.js') ], } 2.3.3 配置 Hot Module Replacement 这是webpack最牛逼的特性之一,即模块热替换,在前端代码变动的时候无需整个刷新页面,只把变化的部分替换掉。使用HMR功能也有两种配置方式: 命令行方式: 命令行模式只需要加上 --line --hot 选项。 --hot 会自动把 webpack/hot/dev-server 加入到了webpack配置文件中的入口点。如果执行正确,可以在浏览器的控制台看到以下信息。 [HMR] Waiting for update signal from WDS... [WDS] Hot Module Replacement enabled. Node.js API: 手动配置需要做三件事情: 把 webpack/hot/dev-server 加入到webpack配置文件的entry项把new webpack.HotModuleReplacementPlugin() 加入到webpack配置文件的plugins项把 hot:true 加入到webpack-dev-server的配置项里面 2.3.4 完整配置,主要分为三部分: webpack.config.js: webpack常规配置,配置入口文件,输出文件,loaders等等server.js: 将server部分分离到一个单独到的文件配置 package.json: 自定义启动命令 <!-- webpack.config.js --> var webpack = require('webpack'); var path = require('path'); var config = { entry: [ path.resolve(__dirname, 'app/index.js') // 定义入口文件 ], output: { // 定义出口目录 path: path.resolve(__dirname, 'build'), filename: 'bundle.js', publicPath: '/' }, resolve: { // resolve 指定可以被 import 的文件后缀 extensions: ['', '.js', '.jsx'] }, module: { }, plugins: [ new webpack.HotModuleReplacementPlugin() ] } module.exports = config; <!-- server.js --> var webpack = require('webpack'); var webpackDevServer = require('webpack-dev-server'); var config = require('./webpack.config.js'); var compiler = webpack(config); var server = new webpackDevServer(compiler, { historyApiFallback: true, hot: true, inline: true, progress: true, contentBase: './app', stats: { colors: true } }); config.entry.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server"); server.listen(8080, "localhost", function(err) { if(err) { console.log(err); } console.log('Listening at localhost:8080...'); }); <!-- package.json --> "scripts": { "start": "node server.js" } 现在你可以通过运行 npm start 启动服务器来。 3. 配置 React, ES6 & Babel 6 ES6 和 JSX 转换 在最新的babel 6.x 版本中,在指定哪些代码转换器将被启用时,需要配置 presets 。最简单配置的方法就是项目根目录下建一个 .babelrc 文件: // .babelrc { "presets": [ "es2015", "react" ] } 配置好以上代码,你就可以开始用 es2015, jsx 了,相关的依赖包 * babel-loader: 转换JSX * babel-core: 即babel的包 * babel-preset-es2015: es2015的babel预设 4. 使用 ESlint 进行代码检查 特点: 默认规则包含所有 JSLint、JSHint 中存在的规则,易迁移规则可配置性高:可设置「警告」、「错误」两个 error 等级,或者直接禁用;ESLint 支持 JSX, 不过目前为 alpha 版本,正式版发布之前可以先使用 eslint-plugin-react 替代 配置: 可以通过以下三种方式配置 ESLint: 使用 .eslintrc 文件(支持 JSON 和 YAML 两种语法)在 package.json 中添加 eslintConfig 配置块直接在代码文件中定义 下面主要演示通过 .eslintrc 配置的步骤: 4.1 在项目根目录下面新建 .eslintrc 文件 $ touch .eslintrc 4.2 Specifying Parser Options { "parserOptions": { "ecmaVersion": 6, // 指定ECMAScript 版本 "sourceType": "module", // 设置为 "script" (默认) 或 "module"(如果你的代码是 ECMAScript 模块) "ecmaFeatures": { "jsx": true // 启用 JSX } } } 4.3 Specifying Environments { "env": { "browser": true, "node": true, "es6": true, "mocha": true } } 4.4 Configuring Plugins "plugins": [ "plugin1", "eslint-plugin-plugin2" ] 4.5 Configuring Rules { "rules": { "eqeqeq": "off", "curly": "error", "quotes": ["error", "double"] } } 4.6 Extending Configuration Files extends 属性值可以是: 在配置中指定的一个字符串字符串数组:每个配置继承它前面的配置 *rules 属性可以做下面的任何事情以扩展(或覆盖)规则: 参数:0 关闭,1 警告,2 错误 启用额外的规则覆盖基础配置中的规则的默认选项禁用基础配置中的规则 4.7 以下是eslint配置文件常见的格式 { "parserOptions": { //EsLint通过parserOptions,允许指定校验的ecma的版本,及ecma的一些特性 "ecmaVersion": 6, //指定ECMAScript支持的版本,6为ES6 "sourceType": "module", //指定来源的类型,有两种”script”或”module” "ecmaFeatures": { // ecmaFeatures指定你想使用哪些额外的语言特性 "jsx": true //启动JSX } }, "parser": "babel-eslint", // EsLint默认使用esprima做脚本解析,也可以切换成babel-eslint解析 "env": { // Environment可以预设好的其他环境的全局变量,如brower、node环境变量、es6环境变量、mocha环境变量等 "browser": true, "node": true, "es6": true, "mocha": true }, "plugins": [ // EsLint允许使用第三方插件 "react" ], extends: [ // Extends是EsLint默认推荐的验证你可以使用配置选择哪些校验是你所需要的 "eslint:recommended" ], rules: [ // 自定义规则 ], "globals": { // 即插件在执行过程中用到的其它全局变量 } } 4.8 Ignoring Files and Directories 通过在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。 4.9 在Sublime中安装插件: SublimeLinter SublimeLinter-contrib-eslint 4.10 相关插件 babel-eslint: ESLint 是前端JS代码检测利器。而 babel-eslint 则允许你检测所有的 Babel 代码eslint: JavaScript 语法检测利器:分析出你代码潜在的错误和非标准用法eslint-plugin-react: ESLint 中关于 React 语法检测的插件 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标签将其应用到最终的浏览器环境。 $ npm install css-loader style-loader sass-loader node-sass --save-dev 安装好依赖后,通过以下简单的配置就可以使用sass;这里需要注意的一点是需要开启 sourceMap 功能,便于调试。 devtool: "source-map", module: { loaders: [ { test: /(\.css|\.scss)$/, loaders: ["style", "css?sourceMap", "sass?sourceMap"] } ] } 6. 图片处理 图片处理常见的loader有以下三种: file-loader: 默认情况下会根据图片生成对应的 MD5 hash 的文件格式url-loader: url-loader类似于file-loader,但是url-loader可以根据自定义文件大小或者转化为 base64 格式的 dataUrl,或者单独作为文件,也可以自定义对应的 hash 文件名image-webpack-loader: 提供压缩图片的功能 // url-loader 配置 module: { loaders: [ { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ 'url?limit=10000&name=img/[hash:8].[name].[ext]', // 图片小于8k就转化为 base64, 或者单独作为文件 'image-webpack' // 图片压缩 ] } ] } // file-loader 配置 module: { loaders: [ test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ 'file?hash=sha512&digest=hex&name=[hash].[ext]', // 生成 md5 hash 格式的文件名 'image-webpack' // 图片压缩 ] ] } 对于小质量的图片资源,可以由 url-loader 实现将其进行统一打包,代码中 url-loader?limit=8192 的含义就是对于所有小于 8kb 的图片资源转换成base64 格式。这在一定程度上可以替代CSS Sprites方案,用于减少对于小图片资源的HTTP请求数量。 7. 配置生产环境 7.1 前端开发环境通常分为两种: 开发环境: 需要日志输出,sourcemap ,错误报告等等生产环境:需要做代码压缩,对文件名进行 hash 处理等等 为了区分我们可以创建两个文件分别进行不同环境下的配置: webpack.config.dev.js // 开发环境webpack.config.prod.js // 生产环境 7.2 区分环境 webpack 提供了 DefinePlugin 设置环境变量,后面会根据设置的不同环境变量决定是否打包压缩,还是启动dev server 或者是 prod server plugins: [ ... new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') // or development }), ] 判断当前环境是否是生产环境 var isProduction = function () { return process.env.NODE_ENV === 'production'; }; 7.3 代码压缩 webPack 提供了内建插件,直接配置以下代码即可压缩代码 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) 7.4 添加 Hash 缓存 对于没有修改的文件,从缓存中获取文件对于已经修改的文件,不要从缓存中获取 output: { ... filename: '[chunkhash:8].bundle.js' // chunkhash 默认是16位,可自定义配置 ... }, 7.5 自动生成页面 文件名带上 hash 值后,这个值在每次编译的时候都会发生变化,都需要在 html 文件里手动修改引用的文件名,这种重复工作很琐碎且容易出错,这里我们可以使用 html-webpack-plugin 来帮我们自动处理这件事情, 用来简化创建服务于 webpack bundle 的 HTML 文件,流程如下: // 在 app 目录下建一个 index.tpl.html 作为钩子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> </head> <body> <div id="root"></div> </body> </html> // 在 webpack.config.dev.js 和 webpack.config.prod.js 添加配置代码,即可生成相对应的 index.html plugins: [ new HtmlWebpackPlugin({ template: 'app/index.tpl.html', inject: 'body', filename: 'index.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. 参考: React 入门react-howto题叶-Webpack 入门指迷webpack使用优化(基本篇)Optimizing React + ES6 + Webpack Production Build基于webpack搭建前端工程解决方案探索【前端构建】WebPack实例与前端性能优化【翻译】Webpack——令人困惑的地方如何 10 倍提高你的 Webpack 构建效率
目录
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;先来看看其功能:
支持两种模式的自动刷新(Automatic Refresh)
支持热更新(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配置文件中的入口点。如果执行正确,可以在浏览器的控制台看到以下信息。Node.js API: 手动配置需要做三件事情:
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. 参考: