网络访谈

04月06, 2018 无需create-react-app构建根据webpack的react新项目

create-react-app 是由 facebook 官方网荣誉出品的用以构建 react app 新项目的脚手架专用工具，十分强劲且简易实用，不用配备就可以构建一个 react app。但也更是因为许多物品它早已经封裝好啦，并且配备文档还内嵌在了包里，在新项目中不能见，针对许多初学者来讲，要了解这一套物品還是较为艰难。

自己恰好看过一些有关材料，这儿作为手记纪录一下怎样从零刚开始用 webpack 构建一个 react 的新项目。我默认设置你早已在电脑上上用好啦 nodejs，而且有基本的指令行有关专业知识。

文中的详细实例编码能够在 webpack-react-startup 中寻找，喜爱得话请给个 Star

建立新项目文件目录

例如我想构建一个新项目，姓名叫 webpack-react-startup

// 建立新项目文件目录
mkdir webpack-react-startup
cd webpack-react-startup
// npm 原始化，全用默认设置选择项
npm init -y

如今的新项目文件目录构造变为了那样

webpack-react-startup
└ package.json

安裝依靠包安裝 react

做为一个 react 新项目，起码要依靠2个包：react 和 react-dom。 react 从 0.14 版本号刚开始，将 react-dom 分拆出 react 包，因此如今必须独立安裝

npm i --save react react-dom

安裝 webpack

npm i --save-dev webpack webpack-cli webpack-dev-server

这儿 webpack-cli 做为一个指令行专用工具，接受一些主要参数并且用于 webpack 的编译程序器，webpack-dev-server 是一个根据 express 的开发设计网络服务器，还出示了 live reloading 的作用，在开发设计的情况下应用它還是很便捷的，它也有2个 hook api 以便捷拓展自身要想的作用，这一后边会提到。

安裝编译程序软件

一般在写 react 运用的情况下，都是采用 es6/7/8 和 jsx 的一些英语的语法，因此必须安裝可以编译程序这种英语的语法的软件

npm i --save-dev @babel/cli @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript babel-loader html-webpack-plugin style-loader css-loader file-loader

@babel/x 软件是以便让 webpack 可以应用 babel 编译程序 es6/7/8、TypeScript 和 jsx 的英语的语法，而 html-webpack-plugin 会转化成一个 html 文档，它的內容全自动引进了 webpack 产出率的 bundle 文档，style-loader 和 css-loader 适用引进 css 文档，file-loader 用以适用引进照片及字体样式等文档。

依靠安裝完之后，新项目文件目录下能多一个 node_modules 的文档夹，用以储放安裝好的依靠包文档。

配备 webpackwebpack.config.js

webpack 的配备文档名叫 webpack.config.js，这一文档必须回到包括 webpack 配备项的目标。webpack 配备项中最经常采用的是 entry、output 和 rules。

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = 
 // 让 webpack 了解以哪一个控制模块为通道，做依靠搜集
 // 实际参照 concepts/#entry
 entry: './src/index.js',
 // 告知 webpack 装包好的文档储放在哪儿里，及其如何取名
 // 实际参照 concepts/#output
 output: 
 path: path.join(__dirname, '/dist'),
 filename: 'bundle.js'
 module: 
 // 应用 babel-loader 编译程序 es6/7/8、ts 和 jsx 英语的语法
 // 留意：这儿沒有配备 preset，只是在 babel.config.js 文档里边配备
 rules: [
 test: /\.(js|mjs|jsx|ts|tsx)$/,
 exclude: /node_modules/,
 use: 
 loader: 'babel-loader'
 test: /.(png|jpg|svg)$/,
 use: 
 loader: 'file-loader',
 options: 
 name: 'img/[name].[ext]'

 // 这儿一般要想特定自身的 html 文档模版，还可以特定转化成的 html 的文档名
 // 假如不传主要参数，会出现一个默认设置的模版文档
 // 实际参照 jantimon/html-webpack-plugin
 new HtmlWebpackPlugin( 
 template: './'
 

配备 babel

在新项目网站根目录在建一个 babel 配备文档 babal.config.js，內容以下：

假如要想应用一些新的語言特点，必须安裝下列软件：

@babel/plugin-proposal-decorators 适用 decorators @babel/plugin-proposal-class-properties 适用类特性 @babel/plugin-proposal-object-rest-spread 适用目标结构 @babel/plugin-syntax-dynamic-import 适用 import()

module.exports = function () 
 // 实际参照：docs/en/presets
 const presets = [
 "@babel/preset-env",
 "@babel/preset-react",
 "@babel/preset-typescript"
 // 实际参照：docs/en/plugins
 const plugins = [
 ["@babel/plugin-proposal-decorators", legacy: true ],
 ["@babel/plugin-proposal-class-properties", loose: true ],
 ["@babel/plugin-proposal-object-rest-spread", useBuiltIns: true ]
 return presets, plugins 
 

好啦，现在是时候刚开始写点 react 编码了。来到这一步，新项目文件目录是那样的：

webpack-react-startup
├ src
│ ├ 
│ ├ App.js
│ └ index.js
├ babel.config.js
├ package-lock.json
└ package.json

在指令行键入 webpack-dev-server --mode development --open --hot，该指令会全自动开启访问器浏览結果，并打开了热升级，假如编码有改动，会马上体现到访问器呈现上。

开发设计完装包发布可使用指令 webpack --mode production。

指令有点儿长，能够把它放到 package.json 的 scripts 块中，那样，能够立即运作指令 npm start 和 npm run build 来实行：

// package.json
 "scripts": 
 "start": "webpack-dev-server --mode development --open --hot",
 "build": "webpack --mode production"
 

配备 devServer

在前文提及的 webpack-dev-server 出示了许多 api 能够做订制化的要求（能够参照文本文档：configuration/dev-server/ ），例如当地仿真模拟多线程恳求数据信息。

一个新项目通常有许多数据信息必须根据恳求多线程插口取得，在新项目刚开始的情况下，后端开发还没有有为出示这种插口，这时候候不可不自身造一些假的插口用以调节的编码，这时候候可使用 devServer 的 after 选择项来为 devServer 加上自身的多线程插口。

最先，必须在新项目里在建一个 mock 文档夹用以储放当地仿真模拟数据信息有关的编码：

webpack-react-startup
├ mock
│ ├ server.js // express 正中间件文档，为 devServer 加上插口路由器及解决程序
│ ├ config.js // 路由器配备项，插口 URL 详细地址和当地数据信息文档的投射
│ └ index.json // 一个插口仿真模拟数据信息文档
...

在 webpack.config.js 中配备 devServer 选择项

const mockServer = require('./mock/server')
module.exports = 
 devServer: 
 after: (app) = 
 mockServer(app)

 app.use(key, function (req, res) 
 const filename = path.join(__dirname, config[key].local)
 if (filename.match(/\.json$/)) 
 // json 文档立即载入內容回到
 res.json(JSON.parse(fs.readFileSync(filename)))
 else 
 // js 文档被作为正中间件引进
 // 引进前删掉掉该文档的缓存文件，假如文档內容改动，无需重新启动 devServer
 delete require.cache[filename]
 require(filename)(req, res)

除开能够自身仿真模拟插口外，devServer 还出示了 proxy 能够代理商远端的插口，这一合适于后端开发早已提前准备好插口，必须开展前后左右端联调的情况下，从当地恳求远端的插口。
多张运用配备
假如要配备多张运用，必须对上边的配备开展更新改造，关键包含 entry、output 和 HtmlWebpackPlugin 等几类。例如提升一个 about 网页页面。
改动文件目录构造
最先来调节一下文件目录构造，那样看上去更清楚易懂一点：
webpack-react-startup
├ src
| ├ components // 置放 react 部件
│ │ ├ App.js
│ │ └ About.js
| └ pages // 置放各网页页面及通道控制模块
│ ├ 
│ ├ about.js
│ ├ 
│ └ index.js
├ babel.config.js
├ package-lock.json
└ package.json
改动webpack.config.js
// webpack.config.js
module.exports = 
 // 这儿 entry 是一个目标，每一个网页页面和它的通道控制模块是一个 key/value 对
 entry: 
 index: './src/pages/index.js',
 about: './src/pages/about.js'
 output: 
 // 这儿 filename 有一定的更改，[name] 表明 entry 里边的 key
 // 表明每一个网页页面的 bundle 文档以自身的名字取名
 filename: 'js/[name].js'
 plugins: [
 // index 网页页面
 new HtmlWebpackPlugin( 
 template: './src/',
 // 要引入的 entry 控制模块，假如不特定，会把全部 entry 控制模块都引入
 chunks: ['index']
 // about 网页页面
 new HtmlWebpackPlugin( 
 template: './src/',
 // about 网页页面的 html 文档名
 ',
 chunks: ['about']
 
公共性控制模块抽离
应用上边的配备，实行 npm run build 指令后，会在 dist 文件目录寻找装包后的結果。可是 about.js 和 index.js 这2个文档都非常大，由于她们各有都包括了 react 库有关的编码。这儿一般的作法是，将公共性控制模块独立装包到一个文档，在网页页面中分刘海别引入，这儿要采用 webpack 的另外一个软件 SplitChunksPlugin。
注：在 webpack 4.0 之前是用的 CommonsChunkPlugin，4.0之后改成了新的 SplitChunksPlugin，实际参照：plugins/split-chunks-plugin/
它是一个内嵌软件，只必须在 webpack.config.js 文档中写相对的配备便可以了：
module.exports = 
 plugins: [
 new HtmlWebpackPlugin( 
 template: './src/',
 // mons
 chunks: ['commons', 'index']
 new HtmlWebpackPlugin( 
 template: './src/',
 ',
 // mons
 chunks: ['commons', 'about']
 optimization: 
 splitChunks: 
 cacheGroups: 
 // mons 块，用以包括全部通道控制模块同用的编码
 commons: 
 name: "commons",
 chunks: "initial",
 minChunks: 2

适用将 css 导出来到文档
css 款式默认设置是以建立 style 标识的方法，将款式立即载入文本文档的，但在生产制造自然环境期待将 css 导出来到文档，能够安裝 npm install --save mini-css-extract-plugin，随后在 webpack.config.js 中的 plugins 下提升下列配备：
new MiniCssExtractPlugin( 
 // Options similar to the same options in webpackOptions.output
 // both options are optional
 filename: '[name].css',
 chunkFilename: '[id].css',
 )
自然你要能够配备 css-loader 的 options 来打开 css modules，还可以安裝 sass-loader 和 postcss-loader 以适用款式有关的大量作用。
之上便是有关怎样用 webpack 构建一个 react 运用的方式，如今便可以高兴地写 react 编码了。接下去，谈一谈布署有关的事儿。
内嵌 eslint
编码设计风格查验也是是非非常必需的，还能够事先发觉一些 bug，最先安裝依靠 npm install --save-dev eslint-loader eslint eslint-config-react-app @typescript-eslint/eslint-plugin @typescript-eslint/parser，随后提升 rule 配备：
rules: [
 enforce: "pre", // 强制性在 babel 以前实行
 test: /\.(js|mjs|jsx|ts|tsx)$/,
 exclude: /node_modules/,
 use: 
 loader: 'eslint-loader',
 options: 
 useEslintrc: false,
 eslintPath: require.resolve('eslint'),
 baseConfig: 
 // 同时要要安裝：
 // babel-eslint eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
 extends: [require.resolve('eslint-config-react-app')]

内嵌 prettier 全自动文件格式化编码
尽管早已拥有 eslint，但每一个人编号习惯性不一样，编码文件格式都不一样，即便应用 eslint --fix 也只有文件格式化 javascript 的编码，以便使每一个开发设计工作人员递交的编码都是有统一的文件格式，就必须引进另外一个专用工具：prettier。
为何要全自动文件格式化编码呢？
统一应用一种程序编写设计风格，无须要在 code review 时探讨编码设计风格的难题
全自动文件格式化，省时省劲
应用 prettier 关键有下列好多个缘故：
可配备化的编码文件格式化工厂具：内嵌了业内流行的编码文件格式并适用根据配备改动默认设置文件格式
适用多种多样語言：处理了 eslint 只适用 javascript 的困惑
可集成化到大多数数的编写器：无须担忧某一组员应用的编写器不兼容
配备少：无须以便记牢许多配备项页苦恼
应用 prettier 的计划方案有许多种，实际能够参照官方网文本文档：docs/，这儿推存应用 pretty-quick 的计划方案：
yarn add prettier pretty-quick husky --dev
在新项目网站根目录建立 .prettierignore 文档：
**/*.md
**/*.svg
**/*.ejs
**/*.html
.editorconfig
.gitignore
.prettierignore
# ide
.idea
.vscode
# npm
npm-error.log
package.json
package-lock.json
yarn.lock
yarn-error.log
# folder
dist
在新项目网站根目录建立 .prettierrc 文档：
 
 "singleQuote": true,
 "trailingComma": "all",
 "overrides": [
 "files": ".prettierrc",
 "options": "parser": "json" 
 
配备 package.json：
 
 "husky": 
 "hooks": 
 "mit": "pretty-quick --staged"

配备好之后，prettier mit 时将编码文件格式化，那样就确保了递交到编码库里的编码全是历经文件格式化之后的编码了。
适用 TypeScript
尽管前边 babel-loader 和 eslint 的配备都是有 .ts/tsx 的拓展名，但是想编译程序 TypeScript 文档还必须安裝 npm install --save-dev typescript 控制模块。
安裝 react 申明文档： npm install --save-dev @types/react @types/react-dom。
假如要自定 TypeScript 配备，能够在新项目网站根目录在建文档 tsconfig.json。
布署配备
布署到生产制造自然环境的编码全是要历经缩小提升的，可是在开发设计的情况下，以便便捷在访问器 devtool 中精准定位难题，通常为不用缩小的，因此必须将 webpack.config.js 中的配备各自相匹配开发设计自然环境和生产制造自然环境布署。
最先是自然环境的区别，方式有许多，文中是根据指令 webpack --mode production|development 来区别。
const argv = require('minimist')(process.argv.slice(0))
const production = argv.mode === 'production'

 parse: ecma: 8, ,
 compress: ecma: 5, warnings: false, comparisons: false, inline: 2, ,
 mangle: safari10: true, ,
 output: ecma: 5, comments: false, ascii_only: true, ,
 parallel: true,
 cache: true,
 sourceMap: shouldUseSourceMap,
 new OptimizeCSSAssetsPlugin( )
 
好啦，全部配备到这儿就完毕了，详细的实例放到了 webpack-react-startup，热烈欢迎查询及纠正，即然早已看了了，表明你对文中很很感兴趣，顺带给个 Star 吧。
参照材料
watch?v=deyxI-6C2u4
concepts/