[React项目总结] 基于 webpack 搭建前端工程基础篇 · Issue #1 · chenbin92/react

您所在的位置：网站首页 › webpack创建项目 › [React项目总结] 基于 webpack 搭建前端工程基础篇 · Issue #1 · chenbin92/react

[React项目总结] 基于 webpack 搭建前端工程基础篇 · Issue #1 · chenbin92/react

2022-03-26 23:11| 来源: 网络整理| 查看: 265

目录技术选型 webpack 基础安装 webpack webpack 简介使用webpack-dev-server启动服务器配置 React, ES6 & Babel 6 使用 ESlint 进行代码检查样式处理图片处理区分开发及生产环境构建流程图文件说明参考 1. 技术选型

最近在一个项目初步尝试使用了reactJS，开发周期两周，选用的技术栈大致如下：

JavaScript:

Language: ES6 Framework: React, Redux

CSS:

Language: SCSS Framework: 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: 自定义启动命令

【本文地址】

[React项目总结] 基于 webpack 搭建前端工程基础篇 · Issue #1 · chenbin92/react

[React项目总结] 基于 webpack 搭建前端工程基础篇 · Issue #1 · chenbin92/react

今日新闻

推荐新闻