【webpack系列】从零搭建 webpack4+react 脚手架（一）

搭建一个React工程的方式有不少，官方也有本身的脚手架，若是你和我同样，喜欢刨根究底，从零开始本身一行一行代码建立一个React脚手架项目，那你就来对地方了。本教程是针对React新手，以及对webpack还不熟悉的用户，或者是想了解当前前端工程化方案的用户。我会在整个系列经过webpack4的配置，从生产和开发环境分别入手，包含代码压缩，大文件gz压缩，webpack4的code split，postcss等插件如何引入，css编译，如何让环境支持各类css预处理器，cssModule配置化，bundle结果分析，本地代理配置，React相关技术栈等等都有一个讲解。本系列教材由浅入深，将会从零开始一步步完善整个脚手架。css

前提条件

在开始以前，请确保安装了 Node.js 的最新版本。建议使用 Node.js 最新的长期支持版本(LTS - Long Term Support)。若是你使用旧版本，你可能遇到各类问题，由于它们可能缺乏本教程用到的相关的 package 包。html

执行如下命令能够查看你本机安装的node版本:
node -v && npm -v
若是你本机的node版本不是最新的，建议升级到新的node版本。node版本建议经过nvm进行管理，了解能够查看 http://nvm.sh 这里再也不阐述。前端

经过本课程，你会学到什么？

学习完本系列教程，你将会了解（持续更新）：

前端开发的框架，工程化的方式
webpack4的基础配置以及经常使用的一些插件
postcss的使用，以及经常使用的postcss插件
开发环境和生产环境的脚本的不一样
如何让控制台输出编译结果更加高大上
大文件如何进行gz压缩
让css Module可配置化
接口转发
如何进行bundle分析
如何规范代码，如何更好地整合eslint。
如何测试React代码

1.从空文件夹开始

如今建立一个空的文件夹，用你的开发工具打开它。
打开终端，确保你已经进入刚刚建立的目录，接下去执行：

npm init

终端会让你输入一些信息，好比名字，版本，描述，入口文件等等。完成后，npm会自动在你的根目录生成 package.json 文件。package.json 文件不只仅包含项目的配置信息（好比名称、版本、许可证等元数据），还会记录项目所须要的各类模块，以及项目运行的脚本等等。node

2.安装webpack4

本教程使用webpack来管理react工程。
执行如下命令，安装webpack

npm install --save-dev webpack

npm安装的包会存放在一个叫node_modules文件夹。若是你用的npm版本是npm 5版本，你还会发现多了package-lock.json文件。package-lock.json文件是当 node_modules 或 package.json 发生变化时自动生成的文件，它的主要功能是肯定当前安装的包的依赖，以便后续从新安装的时候生成相同的依赖，而忽略项目开发过程当中有些依赖已经发生的更新（翻译自官方说明）。react

打开package.json，你会发现多了一个名为devDependencies的属性，经过--save-dev安装的包会记录在此属性下。后续咱们还会使用--save去安装一个模块包，区别是经过--save安装的模块会记录在dependencies属性内，而不是devDependencies属性。经过字面意思，你应该也能够知道，一个是dev开发时候的依赖，一个是运行时的依赖。webpack

新建webpack配置文件。webpack 的配置文件，是导出一个对象的 JavaScript 文件。在根目录建立build文件夹，添加一个js文件，命名为webpack.base.conf.js。
手动敲入如下代码：web

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 根据对象定义的属性进行解析。npm

这里定义了2个属性。固然，webpack的配置属性远远不止这2个，以后我会深刻讲解更多属性的配置。回到咱们定义的2个属性，entry定义了入口文件，output定义了编译后的输出。按照对这段代码的理解，它应该是告诉webpack，我这个项目入口文件是app目录下的index.js文件，你编译后，在根目录下建立dist文件夹（若是不存在），最后把编译后的文件输出到dist文件下，命名为bundle.js。json

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 是同样的效果。

3.安装react

在终端输入如下命令：

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

失败了？对不对！首先，我告诉你这段代码没有任何问题，你须要思考下，它为何会编译失败。下一小节，咱们一块儿来了解下缘由。

4.整合babel 7.0

为何会失败？由于webpack只识别JavaScript文件，并且只能编译es5版本的JavaScript语法。实际上，咱们使用ES2015，以及jsx的语法糖，webpack它根本不认识啊。怎么办？webpack 可使用 loader 来预处理文件。它不只仅能够处理JavaScript自己，还容许你打包任何的静态资源。
其中，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和业务代码如何分开打包？如何实现开发环境的热更新？

下一章，我将针对这些问题，会一一进行讲解，而且持续优化咱们的工程。

原文出处：https://www.cnblogs.com/nianzhilian/p/10229052.html