基于webpack4.X从零搭建React脚手架的方法步骤

项目初始化

$ npm init

安装webpack

本次创建是基于webpack4

$ npm install --save-dev

新建webpack配置文件

在根目录创建build文件夹,添加一个js文件,命名为webpack.base.conf.js

// webpack.base.conf.js 文件
const path = require('path');
const DIST_PATH = path.resolve(__dirname, '../dist');
module.exports = {
    entry: {
      app: './app/index.js'
    },
    output: {
      filename: "js/bundle.js",
      path: DIST_PATH
    }
};

使用merge的方式来组织webpack基础配置和不同环境的配置

先安装webpack-merge:

$ npm install --save-dev webpack-merge

在build文件夹中再添加一个js文件,命名为 webpack.prod.conf.js

// webpack.prod.conf.js 文件
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
module.exports = merge(baseWebpackConfig, {
  mode: 'production'
});

在根目录下创建app目录,然后创建index.js文件

var element =document.getElementById('root');
element.innerHTML = 'hello, world!';

在根目录创建一个public文件夹,然后新建一个index.html文件

// index.html
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>从零开始搭建react工程</title>
 </head>
 <body>
    <div id="root"></div>
    <script src="../dist/js/bundle.js"></script>
 </body>
</html>

当前项目目录树

|- /app
  |- index.js
 |- /node_modules
 |- /public
  |- index.html
 |- /build
  |- webpack.base.conf.js
  |- webpack.prod.conf.js
 |- package.json
 |- package-lock.json

安装webpack-cli

webpack 4.0 版本之后的webpack,已经将webpack命令工具迁移到webpack-cli模块了,需要安装 webpack-cli

$ npm install --save-dev webpack-cli

package.json文件 scripts属性配置一个build命令

其值为:webpack --config build/webpack.prod.conf.js,以下是scripts的相关代码

// package.json
"scripts": {
  "build": "webpack --config build/webpack.prod.conf.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

安装React

$ npm install --save react react-dom

修改app目录下的index.js的代码

import React from "react";
import ReactDom from "react-dom";

ReactDom.render(
  <h1>hello, world!</h1>,
  document.getElementById("root")
);

注意 import 属于ES6规范,因此需要转译ES2015+的语法,安装并配置 babel 以及相关依赖

$ npm install --save-dev babel-loader babel-core babel-preset-env babel-preset-react

根目录创建.babelrc文件,配置presets.

{
 "presets": [
  [
   "env",
   {
    "targets": {
     "browsers": [
      "> 1%",
      "last 5 versions",
      "ie >= 8"
     ]
    }
   }
  ],
  "react"
 ]
}

修改webpack.base.conf.js文件

// webpack.base.conf.js
const path = require('path');
const APP_PATH = path.resolve(__dirname, '../app');
const DIST_PATH = path.resolve(__dirname, '../dist');
module.exports = {
  entry: {
    app: './app/index.js'
  },
  output: {
    filename: 'js/bundle.js',
    path: DIST_PATH
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        use: "babel-loader",
        include: APP_PATH
      }
    ]
  }
};

运行 npm run build

添加插件

public下的index.html本该自动添加到dist目录,并且引用资源自动加载到该文件,通过html-webpack-plugin实现这一步

$ npm install html-webpack-plugin --save-dev

webpack.prod.conf.js中配置plugins属性

const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(baseWebpackConfig, {
  mode: 'production',
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      inject: 'body',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
    })
  ]
});

删除 index.html 中手动引入的 script 标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>从零开始搭建react工程</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

重新编译查看 npm run build 浏览器打开查看目录 dist 下的 index.html

以上步骤都成功的前提下继续走下一步

生成的文件名添加Hash值,目的是解决缓存问题

修改webpack.prod.conf.js,mode: 'production', 增加以下代码

// webpack.prod.conf.js
output: {
  filename: "js/[name].[chunkhash:16].js",
},

生成前需要清理之前项目生成的文件,因为由于文件名的改变如果不删除会一直增加

安装插件 clean-webpack-plugin

$ npm install --save-dev clean-webpack-plugin

修改 webpack.prod.conf.js

// webpack.prod.conf.js
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = merge(baseWebpackConfig, {
  mode: 'production',
  output: {
    filename: "js/[name].[chunkhash:16].js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      inject: 'body',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
    }),
    new CleanWebpackPlugin(['../dist'], { allowExternal: true })
  ]
});

公共代码与业务代码分离

修改 webpack.base.conf.js 的 entry 入口属性,抽出框架代码

entry: {
   app: './app/index.js',
   framework: ['react','react-dom'],
},

修改webpack.prod.conf.js,增加以下代码,目的是分离框架代码和业务代码

虽然上面步骤抽出框架代码生成两个文件,但是app.js还是包含框架代码

optimization: {
    splitChunks: {
      chunks: "all",
      minChunks: 1,
      minSize: 0,
      cacheGroups: {
        framework: {
          test: "framework",
          name: "framework",
          enforce: true
        }
      }
    }
  }

cacheGroups对象,定义了需要被抽离的模块

其中test属性是比较关键的一个值,他可以是一个字符串,也可以是正则表达式,还可以是函数。如果定义的是字符串,会匹配入口模块名称,会从其他模块中把包含这个模块的抽离出来

name是抽离后生成的名字,和入口文件模块名称相同,这样抽离出来的新生成的framework模块会覆盖被抽离的framework模块

整合 webpack-dev-server

开发环境开启服务监听文件改动实时更新最新内容

$ npm install --save-dev webpack-dev-server

在build中添加webpack.dev.conf.js文件

const path = require('path');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = merge(baseWebpackConfig, {
  mode: 'development',
  output: {
    filename: "js/[name].[hash:16].js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      inject: 'body',
      minify: {
        html5: true
      },
      hash: false
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    port: '8080',
    contentBase: path.join(__dirname, '../public'),
    compress: true,
    historyApiFallback: true,
    hot: true,
    https: false,
    noInfo: true,
    open: true,
    proxy: {}
  }
});

在package.json scripts属性添加内容

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

npm run dev

自动打开浏览器打开入口页面实时更新

独立导出 css 文件

安装css相关依赖

sass less 预处理

$ npm install extract-text-webpack-plugin
$ npm install style-loader css-loader postcss-loader autoprefixer --save-dev
$ npm install less sass less-loader sass-loader stylus-loader node-sass --save-dev

webpack.base.conf.js 文件修改

// webpack.base.conf.js
{
  test: /\.css$/,
  use: [
    {
     loader: "style-loader" //在html中插入<style>标签
     },
     {
       loader: "css-loader",//获取引用资源,如@import,url()
     },
     {
       loader: "postcss-loader",
       options: {
          plugins:[
            require('autoprefixer')({
              browsers:['last 5 version']
            })
         ]
       }
    }
   ]
},
{
  test:/\.less$/,
  use: [
     { loader: "style-loader" },
     { loader: "css-loader" },
     {
      loader: "postcss-loader",//自动加前缀
      options: {
          plugins:[
             require('autoprefixer')({
               browsers:['last 5 version']
             })
         ]
      }
     },
     { loader: "less-loader" }
   ]
},
{
   test:/\.scss$/,
   use:[
       { loader: "style-loader" },
       {
           loader: "css-loader",
       },
       { loader: "sass-loader" },
       {
        loader: "postcss-loader",
       options: {
          plugins:[
             require('autoprefixer')({
              browsers:['last 5 version']
             })
          ]
       }
     }
   ]
},

图片和路径处理

$ npm i file-loader url-loader --save-dev

webpack.base.conf.js 文件修改

// webpack.base.conf.js
{
  test: /\.(png|jpg|gif|woff|svg|eot|woff2|tff)$/,
  use: 'url-loader?limit=8129',
  //注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图片
  exclude: /node_modules/
}

build 时报错

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (F:\react\createApp\node_modules\webpack\lib\Chunk.js:824:9)

webpack4.0中使用“extract-text-webpack-plugin”报错

解决办法

$ npm install extract-text-webpack-plugin@next

背景图片路径问题

由于css文件分离出来的原因,会导致在css文件夹下找images文件夹下的图片

解决办法 publicPath属性改为 '/',以绝对路径的方式寻找资源

{
  test:/\.(png|jpg|gif)$/,
  use:[{
    loader:'url-loader',
    options: {
       // outputPath:'../',//输出**文件夹
       publicPath: '/',
       name: "images/[name].[ext]",
       limit:500 //是把小于500B的文件打成Base64的格式,写入JS
     }
   }]
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • webpack+react+antd脚手架优化的方法

    在之前的文章中了解了webpack v4的特性,现在将知识用于实践,对之前写的一个react脚手架进行打包性能的优化. 优化类目 样式分离 第三方资源分离 区分开发环境 热更新 提取公共代码 1. CSS分离 npm install extract-text-webpack-plugin -D webpack.config.js 将css.less.sass文件单独从打包文件中分离 + let cssExtract = new ExtractTextWebpackPlugin({ + filen

  • 基于webpack4.X从零搭建React脚手架的方法步骤

    项目初始化 $ npm init 安装webpack 本次创建是基于webpack4 $ npm install --save-dev 新建webpack配置文件 在根目录创建build文件夹,添加一个js文件,命名为webpack.base.conf.js // webpack.base.conf.js 文件 const path = require('path'); const DIST_PATH = path.resolve(__dirname, '../dist'); module.ex

  • 从零搭建Webpack5-react脚手架的实现步骤(附源码)

    目录 webpack5 正式开始 搭建指南 开始搭建 完成了依赖的准备工作,开始搭建项目 编写webpack.dev.js开发配置 开始编写webpack.prod.js生产配置 编写scripts命令 配置代码质量管控流程 单元测试 webpack5 近期终于有时间和精力专注于公司技术基础建设了,于是一开始,将公司的Saas系统改造成了微前端模式,解决了历史遗留的一部分问题 接着,想着webpack5已经发布这么久了,该在生产环境用起来了,也顺势想推动微前端.webpack5.vite在业内的

  • Vite搭建React项目的方法步骤

    前言 日常放鸽,火钳刘明 这是一个基于 vite 搭建的 React 的项目,开发体验非常棒. 创建一个 Vite 项目 yarn create @vitejs/app 如上图,选择了 react-ts 预设模板,如果出现下图一样的工程 yarn // 安装依赖 yarn dev // 启动开发环境 打开浏览器输入http://localhost:3000/#/,如上图所示的话.那么恭喜你,你可以正常开发 React 项目了.完结撒花 如果不行的话,直接看 vite 官网,它比我写的详细 改造工

  • 从零开始学习搭建React脚手架项目

    写在前面 准备学习一下react和webpack相关的东西,官方的脚手架看起来太繁琐,所以打算自己来搭建一个,参考了这个文档从零搭建React全家桶框架教程;步骤上都差不多 react和vue,angular一样也有脚手架.这大大方便了我们的开发.react的脚手架是create-react-app. 脚手架下载 使用npm下载create-react-app运行如下命令: npm install -g create-react-app 国内npm一般下载比较慢或者是常出现下载失败的情况,我们可

  • 从零搭建react+ts组件库(封装antd)的详细过程

    目录 整体需求 开发与打包工具选型 使用webpack作为打包工具 使用babel来处理typescript代码 使用less-loader.css-loader等处理样式代码 项目搭建思路 整体结构 方案思路 项目搭建实施 初始化 Babel引入 了解Babel webpack的基于babel-loader的处理流程 引入React相关库(externals方式) 编写组件代码 编译打包组件库 效果演示 处理样式(less编译与css导出) 依赖引入 配置webpack 编写样式代码 编译组件

  • 基于docker搭建nginx文件服务器的方法步骤

    1.在本机新建配置文件docker_nginx.conf server { listen 7070; server_name localhost; charset utf-8; location /files { #在docker内nginx的目录 alias /home/files; expires 1d; allow all; autoindex on; } 2.启动命令 docker run --name nginx -d -p 7070:7070 -v D:\dev\nginx-1.13

  • Maven搭建springboot项目的方法步骤

    Maven搭建springboot项目 本文是基于Windows 10系统环境,使用Maven搭建springboot项目 Windows 10 apache-maven-3.6.0 IntelliJ IDEA 2018.3.4 x64 一.springboot项目搭建 (1) 新建目录 在某个可用目录下,新建一个文件夹,本文新建目录为 D:\demo\zs200 (2) 创建maven父工程zs200a-parent 填写项目maven坐标 填写项目名称和路径 (2) maven父工程zs20

  • 使用Nexus搭建Maven私服的方法步骤

    序言 maven私服类似.net中的nuget包服务器 官网/版本收费 首先要吐槽官网慢的一比,下载不下来. 地址:https://www.sonatype.com/ 下载地址:https://www.sonatype.com/download-nexus-repo-oss 版本/收费/免费:Nexus Repository Manager 仓库管理有2个版本,专业版和oss版,oss版是免费的,专业版是收费的,我们使用oss版. 简介 nexus是一个强大的maven仓库管理器,它极大的简化了

  • 如何搭建pytorch环境的方法步骤

    1.conda创建虚拟环境pytorch_gpu conda create -n pytorch_gpu python=3.6 创建虚拟环境还是相对较快的,它会自动为本环境安装一些基本的库,等待时间无需很长,成功之后界面如下所示: 2.切换到pytorch环境 使用如下命令,切换到我们刚刚创建好的pytorch虚拟环境,这样我们避免与其它python环境之间的干扰. conda activeta pytorch_gpu 切换成功之后就会看到在路径前边显示我们已经进入该虚拟环境. 3.安装几个常用

  • ubuntu 20.04上搭建LNMP环境的方法步骤

    简单说明 由于之前是用Centos7搭建的,后来使用ubuntu 20.04的系统做为个人开发环境,所以想在ubuntu上也搭建一下环境,和Centos有一些小区别所以记录一下仅供学习. 安装前准备 下载软件: php:7.3.18 nginx:1.18.0 mariadb:10.5.4 解压文件: tar zxf php-7.3.18.tar.gz tar zxf mariadb-10.5.4.tar.gz tar zxf nginx-1.18.0.tar.gz 安装Nginx sudo gr

随机推荐