项目初始化

$ 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 insteadat 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}}]
},
复制代码

基于webpack4.X从零搭建React脚手架相关推荐

  1. 【react storybook】从零搭建react脚手架，并使用storybook发布组件库到npm，并生成可视化UI文档

    storybook 成品展示 开发准备 开发组件 写MDX文档 发布文档 发布组件 成品展示 可视化UI文档页面: 可视化UI文档地址: https://guozia007.gitee.io/stor ...

  2. 从零搭建React全家桶框架教程

    从零搭建React全家桶框架教程 源码地址:https://github.com/brickspert/react-family 欢迎star 提问反馈:blog 原文地址:https://githu ...

  3. 从零搭建开发脚手架 Spring Boot集成Mybatis-plus之一

    文章目录 简介 特性 框架结构 依赖集成 依赖 配置 编码 开始使用 核心功能 代码生成器 添加依赖 编码 编写配置 自定义模板引擎 自定义代码模板 自定义属性注入 字段其他信息查询注入 实战总结 常 ...

  4. 2023新春版：看这篇大宝典就够了！从零搭建React项目全家桶

    React是近年来前端开发领域非常热门的技术框架,其背景是Facebook团队的技术支持,在全球的前端开发市场上占有率很高.结合React丰富的社区资源,可以让项目开发如虎添翼.虽然React的学习门 ...

  5. react安装_超全面详细一条龙教程！从零搭建React项目全家桶（上篇）

    React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高.很多初学者纠结一开始是学react还是vue.个人觉得,有时间的话,最好两个都掌握一下.从学 ...

  6. 搭建react脚手架

    1.打开cmd命令窗口(一定要注意自己是在哪个文件目录下输出命令的,方便好找文件)!cmd切换到桌面的命令cd Desktop(des+TAB键盘) 2.全局安装react脚手架仓库:npm inst ...

  7. 从零搭建Webpack5-react脚手架(附源码)

    webpack5 近期终于有时间和精力专注于公司技术基础建设了,于是一开始,将公司的Saas系统改造成了微前端模式,解决了历史遗留的一部分问题 接着,想着webpack5已经发布这么久了,该在生产环境 ...

  8. 从零搭建 vue-cli 脚手架

    前言: 用了几次 vue-cli 做 vue 项目,感觉没什么大问题,虽然也没有用 vue-router 和 vuex .但是心里一直有个梗,就是最初的目录生成和配置文件,一直没动过,也不知道具体原理 ...

  9. 从零搭建前端脚手架工具

    所谓脚手架其实就是帮助我们快速搭建项目的工具,通常只需要跑一个命令就可以帮助我们生成一个项目,让用户不需要再思考项目的目录结构,单元测试,所需要的依赖等繁琐的事情 前言 在实际的开发过程中,从零开始建 ...

最新文章

  1. 【javascript 动态添加数据到 HTML 页面】
  2. Java中Math3 各种随机数生成器的使用(Random Generator)
  3. Apollo使用指南（一）普通应用接入指南
  4. Jenkins+Github（Robotframework代码）
  5. H5 App如此强悍，要降薪的恐怕已不只是iOS程序员
  6. windows java 进程_windows下java -jar 后台运行以及杀死后台进程的操作
  7. ORACLE动态SQL语句
  8. 用java写一个博客网站
  9. rot移位密码c++实现
  10. fgo服务器维护中,FGO维护更新公告 更新内容一览
  11. 弱监督学习-snorkel
  12. ruby on rails_通过Ruby on Rails中的关系调试Has_Many
  13. 马赛克（蒙太奇）图片生成--Python实现
  14. ISE 下按键消抖实验
  15. python six模块升级方法
  16. 京东撸货--网上几百元的教程怎样辨别真假？不要被割韭菜
  17. docker，containerd，runc，docker-shim
  18. 使用Python操作Excel图表之 为最后一个数据点添加数据标签
  19. 关于人生的一些想法，和淘客SEO的思想。
  20. RCTF2019web题目复现之rblog和ez4cr

热门文章

  1. SpringCloud-Learning
  2. 在阿里云上进行Docker应用的自动弹性伸缩
  3. webService 客户端接口调用【java】
  4. 仿快图系统自带图片浏览器应用源码项目
  5. python matplotlib画图产生的Type 3 fonts字体没有嵌入问题
  6. 让云×××—微软虚拟化远程直播
  7. CruiseControl中应用NCover和NCoverExplore
  8. DISCUZ x2.5 插件实现DIY功能，让页面也可以自由设计
  9. /dev/null 21
  10. html表格以pdf格式导出到本地