【webpack系列】从零搭建 webpack4+react 脚手架（一）
搭建一个React工程的方式有很多，官方也有自己的脚手架，如果你和我一样，喜欢刨根究底，从零开始自己一行一行代码创建一个React脚手架项目，那你就来对地方了。本教程是针对React新手，以及对webpack还不熟悉的用户，或者是想了解当前前端工程化方案的用户。我会在整个系列通过webpack4的配置，从生产和开发环境分别入手，包含代码压缩，大文件gz压缩，webpack4的code split，postcss等插件如何引入，css编译，如何让环境支持各种css预处理器，cssModule配置化，bundle结果分析，本地代理配置，React相关技术栈等等都有一个讲解。本系列教材由浅入深，将会从零开始一步步完善整个脚手架。
在开始之前，请确保安装了 Node.js 的最新版本。建议使用 Node.js 最新的长期支持版本(LTS - Long Term Support)。如果你使用旧版本，你可能遇到各种问题，因为它们可能缺少 本教程用到的相关的 package 包。
执行以下命令可以查看你本机安装的node版本:
node -v && npm -v
如果你本机的node版本不是最新的，建议升级到新的node版本。node版本建议通过nvm进行管理，了解可以查看 http://nvm.sh 这里不再阐述。
- 前端开发的框架，工程化的方式
- webpack4的基础配置以及常用的一些插件
- postcss的使用，以及常用的postcss插件
- 开发环境和生产环境的脚本的不同
- 如何让控制台输出编译结果更加高大上
- 大文件如何进行gz压缩
- 让css Module可配置化
- 接口转发
- 如何进行bundle分析
- 如何规范代码，如何更好地整合eslint。
- 如何测试React代码
打开终端，确保你已经进入刚刚创建的目录，接下去执行：
npm init
终端会让你输入一些信息，比如名字，版本，描述，入口文件等等。 完成后，npm会自动在你的根目录生成 package.json 文件。package.json 文件不仅仅包含项目的配置信息（比如名称、版本、许可证等元数据），还会记录项目所需要的各种模块，以及项目运行的脚本等等。
执行以下命令，安装webpack
npm install --save-dev webpack
npm安装的包会存放在一个叫node_modules文件夹。如果你用的npm版本是npm 5版本，你还会发现多了package-lock.json文件。package-lock.json文件是当 node_modules 或 package.json 发生变化时自动生成的文件，它的主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新（翻译自官方说明）。
打开package.json，你会发现多了一个名为devDependencies的属性，通过--save-dev安装的包会记录在此属性下。后续我们还会使用--save去安装一个模块包，区别是通过--save安装的模块会记录在dependencies属性内，而不是devDependencies属性。通过字面意思，你应该也可以知道，一个是dev开发时候的依赖，一个是运行时的依赖。
新建webpack配置文件。webpack 的配置文件，是导出一个对象的 JavaScript 文件。在根目录创建build文件夹，添加一个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
}
};
webpack 配置是标准的 Node.js CommonJS 模块，它通过require来引入其他模块，通过module.exports导出模块，由 webpack 根据对象定义的属性进行解析。
这里定义了2个属性。当然，webpack的配置属性远远不止这2个，之后我会深入讲解更多属性的配置。回到我们定义的2个属性，entry定义了入口文件，output定义了编译后的输出。按照对这段代码的理解，它应该是告诉webpack，我这个项目入口文件是app目录下的index.js文件，你编译后，在根目录下创建dist文件夹（如果不存在），最后把编译后的文件输出到dist文件下，命名为bundle.js。
webpack4.0还增加了mode属性，用来表示不同的环境。
我们使用merge的方式来组织webpack基础配置和不同环境的配置。
先安装webpack-merge：
npm install --save-dev webpack-merge
在build文件夹中再添加一个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文件。
<!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>
你现在的文件路径应该看起来是这样：（显然我们引用的bundle.js并不存在）
|- /app
|- index.js
|- /node_modules
|- /public
|- index.html
|- /build
|- webpack.base.conf.js
|- webpack.prod.conf.js
|- package.json
|- package-lock.json
接下去我们要通过执行webpack命令，来编译我们的代码，生成bundle.js。4.0版本之后的webpack，已经将webpack命令工具迁移到webpack-cli模块了。你需要安装webpack-cli。
npm install --save-dev webpack-cli
安装完成后，执行下面脚本进行编译：
webpack --config build/webpack.prod.conf.js
编译完成后，刷新根目录，可以看到已经生成dist文件夹和bundle.js文件。
用浏览器打开html文件，你会看到hello webpack。我们成功通过webpack编译了js文件，并且没有出现问题。
webpack --config build/webpack.prod.conf.js命令，我们可以通过npm scripts管理起来。
在package.json文件，我们为scripts属性配置一个build命令，其值为：webpack --config build/webpack.prod.conf.js，以下是scripts的相关代码：
"scripts": {
"build": "webpack --config build/webpack.prod.conf.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
然后在命令行输入：
npm run build
我们可以看到，webpack重新进行了编译，这和执行
webpack --config build/webpack.prod.conf.js 是一样的效果。
npm install --save react react-dom
安装成功后，我们在项目使用react，我们直接修改app目录下的index.js的代码，我们用react来插入这句hello world！
import React from "react";
import ReactDom from "react-dom"; ReactDom.render(
<h1>hello, world!</h1>,
document.getElementById("root")
);
好了，我们再编译试试看。
npm run build
失败了？对不对！首先，我告诉你这段代码没有任何问题，你需要思考下，它为什么会编译失败。下一小节，我们一起来了解下原因。
其中，babel-loader，就是这样一个预处理插件，它加载 ES2015+ 代码，然后使用 Babel 转译为 ES5。我们来了解下如何在webpack配置babel-loader。
首先安装babel相关的模块：
npm install --save-dev babel-loader @babel/preset-react @babel/preset-env @babel/core
除了babel-loader，我们还安装了好多的包，其中@babel/core是babel的核心模块，@babel/preset-env是转译ES2015+的语法，@babel/preset-react是转译react的JSX以及FLOW。了解详情可以移步 babel官方。
第二步，你需要在根目录建立一个.babelrc的文件，配置相关的presets：
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": [
"> 1%",
"last 5 versions",
"ie >= 8"
]
}
}
],
"@babel/preset-react"
]
}
更多关于babel的配置可以看下官方http://babeljs.io/docs/en的说明，这里不再阐述。
第三步，修改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
}
]
}
};
在 webpack 配置中定义 loader 时，要定义在 module.rules 中。其中，test和use属性是必须的。include属性，定义了rules执行的范围。这告诉 webpack 编译器如下信息：
嘿，webpack 编译器，你在编译文件过程中，如果这个是在app目录下的js文件，在你对它打包之前，先使用 babel-loader 转换一下。
重新执行本地编译
npm run build
这次不再报错，编译成功。
好了，再次打开public目录的index.html，页面成功显示了hello world。
可能，你还有一些疑惑，html文件如何也同步到dist目录？bundle.js文件修改了，万一被浏览器缓存了怎么办？如何通过script标签把打包生成的js自动添加到html？react和业务代码如何分开打包？如何实现开发环境的热更新？
下一章，我将针对这些问题，会一一进行讲解，并且持续优化我们的工程。
【webpack系列】从零搭建 webpack4+react 脚手架（一）的更多相关文章
- 【webpack系列】从零搭建 webpack4+react 脚手架（四）
经过三个章节的学习,你已经学会搭建了一个基于webpack4的react脚手架.如果要更改配置,比如,你希望把编译后的js文件和css文件等单独放dist下的static目录下,你想想,是不是有点麻烦 ...
- 【webpack系列】从零搭建 webpack4+react 脚手架（三）
本章节,我们对如何在脚手架中引入CSS,如何压缩CSS,如何使用CSS Modules,如何使用less,如何使用postcss等问题进行展开学习. 1 支持css (1)在app目录,新建一个css ...
- 【webpack系列】从零搭建 webpack4+react 脚手架（二）
html文件如何也同步到dist目录?bundle.js文件修改了,万一被浏览器缓存了怎么办?如何为导出的文件加md5?如何把js引用自动添加到html?非业务代码和业务代码如何分开打包?如何搭建开发 ...
- 【webpack系列】从零搭建 webpack4+react 脚手架（五）
本章节,我们一起来探讨以下问题:如何对编译后的文件进行gzip压缩,如何让开发环境的控制台输出更加高逼格,如何更好的对编译后的文件进行bundle分析等. 1 gzip压缩 如果你想节省带宽提高网站速 ...
- 从零搭建Spring Boot脚手架（1）：开篇以及技术选型
1. 前言 目前Spring Boot已经成为主流的Java Web开发框架,熟练掌握Spring Boot并能够根据业务来定制Spring Boot成为一个Java开发者的必备技巧,但是总是零零碎碎 ...
- 初探webpack之从零搭建Vue开发环境
初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...
- 从零搭建Spring Boot脚手架（2）：增加通用的功能
1. 前言 今天开始搭建我们的kono Spring Boot脚手架,首先会集成Spring MVC并进行定制化以满足日常开发的需要,我们先做一些刚性的需求定制,后续再补充细节.如果你看了本文有什么问 ...
- 从零搭建Spring Boot脚手架（3）：集成mybatis
1. 前言 今天继续搭建我们的kono Spring Boot脚手架,上一文集成了一些基础的功能,比如统一返回体.统一异常处理.快速类型转换.参数校验等常用必备功能,并编写了一些单元测试进行验证,今天 ...
- 从零搭建Spring Boot脚手架（4）：手写Mybatis通用Mapper
1. 前言 今天继续搭建我们的kono Spring Boot脚手架,上一文把国内最流行的ORM框架Mybatis也集成了进去.但是很多时候我们希望有一些开箱即用的通用Mapper来简化我们的开发.我 ...
随机推荐
- html css笔记zht
第3章 Img标签 路径问题 绝对路径:从盘符(C:\)出发的路径 (C:\Users\......) linux(绝对路径以 / 开头) 相对路径:( ./ 当前文件所在的目录)( ../上一级目录 ...
- Attention Model（注意力模型）思想初探
1. Attention model简介 0x1:AM是什么 深度学习里的Attention model其实模拟的是人脑的注意力模型,举个例子来说,当我们观赏一幅画时,虽然我们可以看到整幅画的全貌,但 ...
- mysql中整数类型后面的数字，比如int(11)，11代表11个字节吗？
原先对mysql不太理解,但也没有报错.但理解的不够深入.这次补上. 原来以为int(11)是指11个字节,int(10)就是10个字节.我错了. http://zhidao.baidu.com/li ...
- python-类对象以字典模式操作
#类对象以字典模式操作 class Person: def __init__(self): self.cache={} def __setitem__(self, key, value): #增加或修 ...
- 【转载】Centos7修改root密码
参考: https://blog.csdn.net/wcy00q/article/details/70570043 知道root密码,需要修改密码 以root登录系统输入passwd命令默认修改roo ...
- [Kubernetes]容器日志的收集与管理
在开始这篇文章之前,首先要明确一点: Kubernetes 中对容器日志的处理方式,都叫做 cluster-level-logging ,也就是说,这个日志处理系统,与容器, Pod 以及 Node ...
- 【转】Python多进程编程
[转]Python多进程编程 序. multiprocessingpython中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Pytho ...
- 两个MMCM共享时钟输入时的严重警告和错误
情景描述: 芯片:zynq7020 问题: 设计从FPGA的U19引脚上的开发板板接收时钟输入125M,并将其送到两个MMCM.使用软件:vivado2015.4在Vivado中打开合成设计后,我得到 ...
- centos6.8编译安装mysql
1.安装编译代码需要的包 yum -y install make gcc-c++ cmake bison-devel ncurses-devel 2.创建mysql用户(但是不能使用mysql账号登陆 ...
- go语言实现生产者-消费者
前言: 之前在学习操作系统的时候,就知道生产者-消费者,但是概念是模模糊糊的,好像是一直没搞明白. 其实很简单嘛,生产者生产,消费者进行消费,就是如此简单.了解了一下go语言的goroute,感觉实现 ...