react搭建

转载 于 2019-05-16 05:29:41 发布 · 90 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5cdcddb0f265da037c7d0ae0
文章标签：

#webpack #json #javascript #ViewUI

本文详细介绍如何从零开始搭建React项目，包括目录结构、文件创建、基础依赖安装及Webpack配置。涵盖生产与开发环境配置、代码分离、缓存策略、热更新与懒加载等高级特性。

搭建目录结构

  1. 创建文件夹并进入
    mkdir react-family && cd react-family
  2. init npm
    npm init 按照提示填写项目基本信息,一路回车就好了,这时候文件目录下只有一个package.json文件
  3. 创建整体框架
    mkdir src && cd src
    mkdir components pages layouts redux config utils services
    在跟目录下创建 webpack.base.config.js
    在pages下创建 template.html
    在src下创建 index.js

安装基础依赖

1.安装webpack

yarn add webpack webpack-cli --dev 或 npm install --save-dev webpack webpack-cli复制代码

        推荐使用 --save-dev 安装，因为现在webpack版本很多，全局安装不利于各个项目管理。 

yarn add html-webpack-plugin --dev复制代码

用于生成html的插件 

yarn add clean-webpack-plugin --dev 复制代码

使用 CleanWebpackPlugin 插件可以在每次构建前都清楚 dist 文件夹, 这样每次构建完, dist 目录下只有会生成要用到的文件

yarn add uglifyjs-webpack-plugin --dev 复制代码

用于压缩js文件,并且可以在打包的时候,去除console等

yarn add open-browser-webpack-plugin --dev 复制代码

用于开发环境执行yarn run dev 时,自动打开浏览器


2.安装babel(用于编译react,jsx,es6,js等)

yarn add @babel/cli @babel/core @babel/preset-env @babel/preset-react babel-loader --dev 或 npm i -D @babel/cli @babel/core @babel/preset-env @babel/preset-react babel-loader复制代码

这里使用的是@babel,是最新版的babel,老版的不用@符号 @babel/polyfill看情况安装

3.安装react相关的

yarn add react react-dom 或 npm i --save react react-dom (react的基础包)  yarn add react-router-dom 或 npm i -S react-router-dom (react路由)复制代码

4.之前我们只是安装了针对js文件的编译,可能还会有其他的文件,如jpg等 

yarn add html-loader style-loader css-loader less-loader url-loader file-loader less --dev 或 npm i -D html-loader style-loader css-loader less-loader url-loader file-loader less复制代码

其中style-loader css-loader less-loader是针对样式的,包括less,当然如果使用sass的话,可能需要安装

sass-loader和node-sass

5.redux(可选性安装,如不使用也可以不安装,也可以在后面的步骤在来安装)

yarn add redux react-redux 或 npm i --save redux react-redux 复制代码

其实redux不知是用于react,也可以用于其他框架的前端项目,redux就是一个状态管理器,应用的状态统一管理,而react-redux更适用于react项目而已,核心其实还是redux,提供了<Provider>组件,传入store,只要子组件用connect调用之后,就能直接获取所有状态

webpack使用

四个核心概念：
  • 入口(entry)
  • 输出(output)
  • loader
  • 插件(plugins)

一.基础配置

1.下面是一个简单的实例,只是用到了babel,我们把上面的内容给复制webpack.base.config.js文件中 

const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  // mode: 'production', 可以在package.json里指定mode,不同的mode会启用不同的插件,如果是production,打包出来的文件会小很多
  /*入口*/
  entry: [
    // 'react-hot-loader/patch',// 开启react代码的模块热替换（HMR）
    path.join(__dirname, 'src/index.js')
  ],


  /*输出到dist文件夹，输出文件名字为bundle.js*/
  output: {
    path: path.join(__dirname, './dist'),
    // filename: 'bundle.js', // 该文件是在dist/index.html里写死的
    // chunkFilename: '[name].js'
    filename: '[name].[hash].js', // 不用上面的是因为缓存问题,如果某天我们修改了代码,可能用户还是访问的缓存的文件,因为最近开始是写死的,所以还需要用上HtmlWebpackPlugin,这个插件，每次会自动把js插入到你的模板index.html里面去。
    chunkFilename: '[name].[chunkhash].js'
  },
  // 设置本地开发时的dev服务器
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true, // 服务器端开启压缩
    port: 9000,
    historyApiFallback: true,
    host: '0.0.0.0',
    // hot: true // 是否启用webpack-dev-server的热加载
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
              '@babel/preset-env',
              '@babel/preset-react',
          ],
        }
      },
    }]
  },
  plugins: [
    // new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(), // 清除dist目录下以前的文件
    new HtmlWebpackPlugin({
      filename: 'index.html',
      title: 'test',
      template: path.join(__dirname, 'src/pages/template.html') // 之前的创建的模板html
    }),
  ],
  resolve: {
    alias: {
      "@": path.join(__dirname, 'src'),
    }
  },
};复制代码


2.在package.json中增加一条script命令 

"scripts": {    "start": "webpack --config webpack.base.config.js --color --progress", // 加上--mode production可以设置mode     "test": "echo \"Error: no test specified\" && exit 1"},复制代码


但现在如果我们执行yarn start,会生成dist文件夹,该文件夹里有两个文件,但生成的index.html不对,里面只有一个script标签,这是因为我们忘记给pages/template.html添加内容了
3.为template.html 添加内容,再次执行yarn start,就可以看到dist/index.html有内容了,并且在
template.html内容的基础上增加了一条script标签,但现在我们在本地直接打开index.html,是没有内容的 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>
复制代码

4.为我们的html用上react,添加src/index.js的内容,这时候再去执行yarn start ,然后打开dist/index.html,就能看到Hello React了 

import React from 'react';
import { render } from 'react-dom';


function App() {
    return <div>Hello React</div>
}


render(<App/>, document.getElementById('app'));复制代码



二.webpack的一些升级应用

参考官网: www.webpackjs.com/guides/ 这里讲了很多webpack的应用,如 生产环境配置,懒加载,代码分离,缓存,模块热替换等,这些功能都是能通过webpack实现的

1.生产环境和开发环境配置
因为开发环境和生产环境,有些配置可能是不同的,那么我们需要设置多个配置文件,首先我们需要安装一个依赖 

yarn add webpack-merge --dev 或 npm install --save-dev webpack-merge复制代码

创建webpack.dev.config.js和webpack.prod.config.js
webpack.dev.config.js: 

const merge = require('webpack-merge');
const webpack = require('webpack');
const baseConfig = require('./webpack.base.config');
const path = require('path');
const OpenBrowserPlugin = require('open-browser-webpack-plugin')


module.exports = merge(baseConfig, {
    // 用于调试, inline-source-map模式效率比较高, 所以在dev模式下推荐使用这个
    devtool: 'inline-source-map',
    mode: 'development',
    // 设置dev服务器
    devServer: {
      contentBase: path.join(__dirname, "dist"),
      compress: true, // 服务器端开启压缩
      port: 9000,
      historyApiFallback: true,
      host: '0.0.0.0',
      // hot: true // 是否启用webpack-dev-server的热加载
    },
    plugins: [
        // 在js中注入全局变量process.env用来区分环境
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('development'),
            }
        }),
        // 执行 yarn run dev时打开浏览器
        new OpenBrowserPlugin({ url: 'http://localhost:9000' }),
    ],
})复制代码




webpack.prod.config.js: 

const merge = require('webpack-merge');
const webpack = require('webpack');
const baseConfig = require('./webpack.base.config');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');


module.exports = merge(baseConfig, {
    mode: 'production',
    // 设置dev服务器
    devServer: {
        // 设置端口号,默认8080
        port: 9000,
    },
    plugins: [
        // 在js中注入全局变量process.env用来区分环境
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production'),
            }
        }),
    ],
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            parse: {},
            compress: {
              drop_console: true, // 打包的时候不需要console
              properties: false
            },
            mangle: true, // Note `mangle.properties` is `false` by default.
            // output: null,
            // toplevel: false,
            // nameCache: null,
            // ie8: false,
            // keep_fnames: false,
          },
        }),
      ],
    },
})复制代码





然后再在package.json里加上scripts: 

"scripts": {
    "start": "webpack --config webpack.prod.config.js --color --progress",
    "build": "webpack --config webpack.prod.config.js --color --progress",
    "dev": "webpack --config webpack.dev.config.js --color --progress",
    "test": "echo \"Error: no test specified\" && exit 1"
},复制代码

2.代码分离(看一下就行了,最后会给出最新的配置文件)
有三种常用的代码分离方法：
  • 入口起点：使用 entry 配置手动地分离代码。
  • 防止重复：使用 CommonsChunkPlugin 或则 SplitChunksPlugin去重和分离 chunk( CommonsChunkPlugin已经不提倡使用)。
  • 动态导入：通过模块的内联函数调用来分离代码。
第一种: 就是在entry里多引入一个文件,我没有使用这种方式 

entry: {index: './src/index.js',another: './src/another-module.js'},复制代码

第二种:splitChunks,在webpack.base.config.js里加上 

optimization: {
    splitChunks: {
      cacheGroups: {
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
        //打包重复出现的代码
        vendor: {
          name: 'vendor',
          test: /node_modules\//,
          // test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom|redux|react-redux)[\\/]/,
          filename: '[name].bundle.js', // [name].[hash].js
          chunks: "all", // 必须三选一： "initial" | "all" | "async"(默认就是异步)
          minSize: 0, // 最小尺寸，默认0
          minChunks: 1, // 最小 chunk ，默认1
          maxInitialRequests: 5, // 最大初始化请求书，默认1
          maxAsyncRequests: 1, // 最大异步请求数， 默认1
          // reuseExistingChunk: true, // 可设置是否重用该chunk（查看源码没有发现默认值）
        },
        //打包第三方类库
        commons: {
          name: "commons",
          // test: /common\/|components\//,
          chunks: "initial",
          minChunks: 2
        }
      }
    }
  },复制代码


第三种方式,我暂时也没有用到, 当涉及到动态代码拆分时，webpack 提供了两个类似的技术。对于动态导入，第一种，也是优先选择的方式是，使用符合 ECMAScript 提案 的 import() 语法。
import() 调用会在内部用到 promises。如果在旧有版本浏览器中使用 import()，记得使用 一个 polyfill 库（例如 es6-promise 或 promise-polyfill），来 shim Promise。
看了下webpack官网说明,其实就是在import时候,不是放在头部,而是放在了方法里,import可以看做一个方法,该方法返回了一个promise,所以用 法import(/*路径*/).then(content => { // 使用content内容 })

3.缓存(看一下就行了,最后会给出最新的配置文件)
第一种方法,把输出文件加上hash值
output: {
- filename: 'bundle.js',
+ filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
}
第二种方法: 提取模板, 使用插件 webpack.optimize.CommonsChunkPlugin, 不过现在已经换成webpack.optimize.RuntimeChunkPlugin
plugins: [
+ name: 'manifest'
+ })
],

4.热更新(看一下就行了,最后会给出最新的配置文件,但需要安装一些依赖)
这是在开发环境的时候使用的,我们刚才执行了yarn start命令之后,只能在本地打开文件,如果我们想要在本地启用一个服务,就需要一个插件
webpack-dev-server，这个插件可以在本地启动一个本地服务，并且提供了非常丰富的功能，例如热更新，接口代理。
npm i -D webpack-dev-server 或 yarn add webpack-dev-server --dev 然后修改package.json里的命令
"dev": "webpack-dev-server --config webpack.dev.config.js --color --progress --mode development",
执行命令yarn run dev,在浏览器上就能打开localhost:9000了
关于热更新,这里暂时讲两种

第一种: 启用HMR
启用此功能实际上相当简单
devServer: {
contentBase: './dist',
+ hot: true
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Hot Module Replacement'
}),
+ new webpack.NamedModulesPlugin(),
+ new webpack.HotModuleReplacementPlugin()
],

第二种:其他代码或框架
我使用的是 React Hot Loader：实时调整 react 组件。
具体方法就是首先安装依赖(yarn add react-hot-loader),注意不要安装在dev上了
  1. Add react-hot-loader/babel to your .babelrc:
// .babelrc
{
"plugins": ["react-hot-loader/babel"]
}
  1. Mark your root component as hot-exported:
// App.js
import { hot } from 'react-hot-loader/root';
const App = () => <div>Hello World!</div>;
export default hot(App);
  1. Make sure react-hot-loader is required before react and react-dom:
  • or import 'react-hot-loader' in your main file (before React)
  • or prepend your webpack entry point with react-hot-loader/patch
  1. If you need hooks support, use React--Dom
5.关于懒加载
最开始我是使用的bundle-loader,具体方法可以百度,之前react官网还是推荐的这个,现在又变了... 


const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');


module.exports = {
  // mode: 'production', 可以在package.json里指定mode,不同的mode会启用不同的插件,如果是production,打包出来的文件会小很多
  /*入口*/
  entry: [
    // '@babel/polyfill', // 添加一些方法,比如静态方法如Array.from或Object..，实例方法如Array.prototype.include，以及generator函数
    // 'react-hot-loader/patch',// 开启react代码的模块热替换（HMR）
    path.join(__dirname, 'src/index.js')
  ],


  /*输出到dist文件夹，输出文件名字为bundle.js*/
  output: {
    path: path.join(__dirname, './dist'),
    // filename: 'bundle.js', // 该文件是在dist/index.html里写死的
    // chunkFilename: '[name].js'
    filename: '[name].[hash].js', // 不用上面的是因为缓存问题,如果某天我们修改了代码,可能用户还是访问的缓存的文件,因为最近开始是写死的,所以还需要用上HtmlWebpackPlugin,这个插件，每次会自动把js插入到你的模板index.html里面去。
    chunkFilename: '[name].[chunkhash].js'
  },
  // 设置本地开发时的dev服务器
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true, // 服务器端开启压缩
    port: 9000,
    historyApiFallback: true,
    host: '0.0.0.0',
    // hot: true // 是否启用webpack-dev-server的热加载
  },
  module: {
    rules: [{
      test: /\.js$/,
      // include: path.join(__dirname, 'src'),
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
              '@babel/preset-env',
              '@babel/preset-react',
          ],
        }
      },
    }, { // options limit 8192意思是，小于等于8K的图片会被转成base64编码，直接插入HTML中，减少HTTP请求。
      test: /\.(png|jpg|gif)$/,
      use: [{
        loader: 'url-loader',
        options: {
          limit: 8192
        }
      }]
    }, {
      test: /\.html$/,
      loader: 'html-loader'
    },
    {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: `file-loader`
    }, {
      // test: /\.less$/,
      test: /\.(css|less)$/,
      use: [{
        loader: "style-loader" // creates style nodes from JS strings
      }, {
        loader: "css-loader", // https://github.com/webpack-contrib/css-loader
        options: {
          sourceMap: true,
          importLoaders: 1, //  Number of loaders applied before CSS loader
          modules: true // 使文件能被引入
        } // translates CSS into CommonJS
      }, {
        loader: "less-loader",
        options: {
          // strictMath: true,
          // noIeCompat: true,
          name: '[name].[hash].[ext]',
          sourceMap: true, // 这个设置为true之后,在浏览器的请求里,能看到css的文件
          modules: true // 使文件能被引入,放在这里没有用
        } // compiles Less to CSS
      }]
    }]
  },
  plugins: [
    // new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(), // 清除dist目录下以前的文件
    new HtmlWebpackPlugin({
      filename: 'index.html',
      title: 'test',
      template: path.join(__dirname, 'src/pages/template.html') // 之前的创建的模板html
    }),
    new webpack.optimize.RuntimeChunkPlugin({ // 用于缓存,提取模板
      name: "manifest"
    }),
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
        //打包重复出现的代码
        vendor: {
          name: 'vendor',
          test: /node_modules\//,
          // test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom|redux|react-redux)[\\/]/,
          filename: '[name].bundle.js', // [name].[hash].js
          chunks: "all", // 必须三选一： "initial" | "all" | "async"(默认就是异步)
          minSize: 0, // 最小尺寸，默认0
          minChunks: 1, // 最小 chunk ，默认1
          maxInitialRequests: 5, // 最大初始化请求书，默认1
          maxAsyncRequests: 1, // 最大异步请求数， 默认1
          // reuseExistingChunk: true, // 可设置是否重用该chunk（查看源码没有发现默认值）
        },
        //打包第三方类库
        commons: {
          name: "commons",
          // test: /common\/|components\//,
          chunks: "initial",
          minChunks: 2
        }
      }
    }
  },
  resolve: {
    alias: {
      "@": path.join(__dirname, 'src'),
    }
  },
};复制代码


未完待续...关于热更新,懒加载等还未真正落实到代码中,还有babel的配置可以单独提一个文件出来,不一定都要放在webpack配置文件里


转载于:https://juejin.im/post/5cdcddb0f265da037c7d0ae0

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值