从零手工搭建webpack4+react16.11项目的实践

Posted 2021-04-26 每天学前端

当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放 在前几天，react16.11已经发布，而react中文官方文档还未跟进，现在大多数的项目还是基于webpack3的，不得不感叹前端这些主流技术栈的发展速度，真的很快。版本与版本之间的过渡比较兼容还好，一旦变化较大，则需要大量的时间精力去维护。例如react16与之前的变化

旧的声明周期：

新的生命周期：

总结如下：

• reac16新的生命周期弃用了componentWillMount

  、componentWillReceiveProps、componentWillReceivePorps

• 新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子（componentWillMount、componentWillReceivePorps，componentWillUpdate）

• React16并没有删除这三个钩子函数，但是不能和新增的钩子函数（getDerivedStateFromProps、getSnapshotBeforeUpdate）混用，

  假如你的项目还在使用以上弃用的生命周期，在16.8的实践中控制台给出了弃用生命周期的警告
  

• reactReact17将会除componentWillMount、componentWillReceivePorps，componentWillUpdate

• 新增了对错误的处理（componentDidCatch）

以上是题外话，如果你的项目要升级react版本，而你项目中又使用了大量的

componentWillMount

、componentWillReceiveProps、componentWillReceivePorps，那么去做升级的工作是巨大的，甚至你的项目需要回归测试才可以上上线。

另外一种情况，可能你需要新建一个项目，没有时间精力去从零搭建配置，那么你可能回去GitHub上找一个开源的项目，采用他们现有的搭建配置，这无疑又会陷入上述的版本迭代的麻烦中

也许你会说我们有脚手架，是的cli确实帮我们简化了很多搭建上的琐碎事，但是我们有从零搭建的能力岂不是更好?

进入正题

按照步骤依次操作：

新建一个文件夹，名称和自定义，我这里称之为demo

在文件夹内执行yarn init（这里也可以使用npm，我个人比较习惯用yarn），按照提示依次填写结束生成package.json

安装依赖

yarn add webpack -Dyarn add webpack-cli -Dyarn add uglifyjs-webpack-plugin -Dyarn add babel-loader @babel-core -D

在生成的package.json中，添加npm scripts

 "scripts": { "build": "webpack --mode production" }, "devDependencies": {    "@babel/core": "^7.6.4", "babel-loader": "^8.0.6", "uglifyjs-webpack-plugin": "^2.2.0", "webpack": "^4.41.2", "webpack-cli": "^3.3.9" }

webpack 运行时默认读取项目下的 webpack.config.js 文件作为配置。新键webpack.config.json文件

const path = require('path');const UglifyPlugin = require('uglifyjs-webpack-plugin')
module.exports = { entry: './src/index.js', // 入口文件 output: { // 打包输出的配置 path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { // 对babel的配置 rules: [ { test: /\.jsx?/, include: [ path.resolve(__dirname, 'src') ], use: 'babel-loader', }, ], }, resolve: { // 代码模块路径解析的配置 modules: [ "node_modules", path.resolve(__dirname, 'src') ],
        extensions: [".js", ".json", ".jsx", "less", "css"], }, plugins: [ // 插件的配置 new UglifyPlugin() // 压缩js代码 ]}

新建src目录，在src目录中新建index.js，写你的任意js代码

// src/index.jsconsole.log('每天学前端')

在命令行终端执行 yarn build

这个时候在你的项目目录下可以以看到dist目录，且打包出了bundle.js。以上就实现了打包的基本配置

---

配置 html CSS 和 文件处理模块

安装依赖

yarn add html-webpack-plugin -D

在 webpack 配置中，将 html-webpack-plugin 添加到 plugins 列表中：

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { // ... plugins: [ new HtmlWebpackPlugin(), ],}

这样配置好之后，构建时 html-webpack-plugin 会为我们创建一个 HTML 文件，其中会引用构建出来的 JS 文件。实际项目中，默认创建的 HTML 文件并没有什么用，我们需要自己来写 HTML 文件，可以通过 html-webpack-plugin 的配置，传递一个写好的 HTML 模板：

module.exports = { // ... plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', // 配置输出文件名和路径 template: 'template/dev.html', // 配置文件模板 }), ],}

构建css，这里用less

安装依赖：

yarn add style-loader css-loader less-loader less -D

对css和less文件的loader解析配置：

{ test: /\.css/, include: [ path.resolve(__dirname, 'src'),     ], use: [        'style-loader',        'css-loader',    ],},{ test: /\.less/, include: [ path.resolve(__dirname, 'src'), ], use: [ 'style-loader',          'css-loader', 'less-loader' ],},

安装并配置file-loader， file-loader可帮助我们处理图片文件

module.exports = { // ... module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: {}, }, ], }, ], },}

构建react

安装依赖

yarn add @babel/preset-react @babel/preset-env -D

这是针对react进行的配置，必须要有。也可以自己新建文件.babelrc，对该项做配置

rules: [ { test: /\.jsx?$/, // jsx/js文件的正则 include: [ // zhi'zai path.resolve(__dirname, 'src') ], use: { // loader 是 babel loader: 'babel-loader', options: { // babel 转义的配置选项 babelrc: false, presets: [ // 添加 preset-react require.resolve('@babel/preset-react'), [require.resolve('@babel/preset-env'), { modules: false }] ], cacheDirectory: true } }            },            // ...    ]

安装webpack-dev-server，并且在package.json中，加上启动服务的脚本

"build": "webpack --mode production","start": "webpack-dev-server --mode development",

继续装依赖

yarn add react react-dom react-router-dom

接下来的事情基本上就是配置入口文件，和写路由了

在src第一级目录下新建index.jsx，作为入口文件

// src/index.jsximport { render } from 'react-dom';import router from './router'
render(router, document.getElementById('app'));

在src第一级目录下新建文件夹router，里面新建index.jsx

// src/router/index.jsximport React from "react";import { BrowserRouter, Switch, Route } from "react-router-dom";import Home from "../pages/home/index";import News from "../pages/news/index";import SelfCenter from "../pages/selfCenter/index";
export default ( <BrowserRouter> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/news" component={News} /> </Switch> </BrowserRouter>);

在件home组件

//  src/pages/home/index.jsximport React from 'react';import './index.less';import { Link } from 'react-router-dom';
export default class Home extends React.Component { constructor(props) { super(props) } render() { return ( <div className="home-page"> 我是home页 <Link to="/news">news</Link> </div> ) }}

其他的组件页面，这里便不在赘述

此时启动项目 yarn start

此时我们的项目便初步搭建完毕且能够启动了

此时应该说，前期基本准备工作已经做完了，后面应该还有构建路由，权限分发控制，一般需要前后端协作，配置ui组件库，当然具体的情况要看你的业务需求...

webpack的配置还有很多，其中每一项都有很多的用法，具体需要自行参阅webpack官方文档，所以webpack本身用起来并不难，而是配置的点和小技巧很多

这里简单的说一下一些常见的优化

开启hmr，hmr可以实现局部加载，而不是刷新页面

// ...devServer: { contentBase: path.join(__dirname, 'dist'), port: 8005, // 开启 hmr 支持 hot: true, proxy: {}},

optimization 公用的代码抽离出来

module.exports = { // ... webpack 配置
 optimization: { splitChunks: { chunks: "all", // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件 }, },}

html-webpack-plugin 插件可以帮助我们压缩 HTML 和其中的js、css：

module.exports = { // ... plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', // 配置输出文件名和路径 template: 'template/dev.html', // 配置文件模板 minify: { // 压缩 HTML 的配置 minifyCSS: true, // 压缩 HTML 中出现的 CSS 代码 minifyJS: true // 压缩 HTML 中出现的 JS 代码 } }), ],}

使用css-loader 压缩css

module.exports = { module: { rules: [ // ... { test: /\.css/, include: [ path.resolve(__dirname, 'src'), ], use: [ 'style-loader', { loader: 'css-loader', options: { minimize: true, // 使用 css 的压缩功能 }, }, ], }, ], }}

在生成环境，可以使用  optimize-css-assets-webpack-plugin 在 optimization 字段下压缩css

const UglifyJs = require('uglifyjs-webpack-plugin');optimization: { splitChunks: { name: 'vendors', chunks: 'initial' }, runtimeChunk: { name: 'runtime' },            minimizer: [ new UglifyCss({ cssProcessorOptions: { parser, discardComments: { removeAll: true } } }) ] }

压缩图片，按需引入依赖等等，Tree shaking 还有很多

这就是所有内容了