一、初始化项目

  1. mkdir webpack-react 创建项目目录
  2.   cd  webpack-react 转到项目目录
  3.   npm init -y 初始化项目，并全部确定

二、安装node，npm

  1. windows 去node.js官网下载安装包直接安装
  2. linux和mac mac和Linux直接命令行安装nvm install v10.15.3
  3. 检查是否安装成功node -v, npm -v

三、安装webpack和webpack-cli

  1. npm install --save-dev webpack@4.15.1 webpack-cli

四、创建项目文件

新建目录src，新建index.html和index.js

index.js

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

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>从零搭建react项目</title>
  8. </head>
  9. <body>
  10.   <div id="root"></div>
  11.   <script src="../dist/vender.js"></script>
  12. </body>
  13. </html>

新建目录build，新建文件webpack.config.js

webpack.config.js

  1. const path = require('path');
  3. module.exports = {
  4.   entry: './src/index.js',  //打包入口文件
  5.   output: {
  6.     filename: 'vender.js', //打包生成的文件
  7.     path: path.resolve(__dirname, '../dist')  //打包生成文件的存放目录
  8.   }
  9. };

现在的目录文件看起来是这样

  1. build
  2.    --webpack.config.js  webpack默认配置文件
  3. src
  4.    --index.html 静态文件
  5.    --index.js 打包入口文件
  6. node_modules node 依赖包目录  
  7. package-lock.json webpack基本插件和依赖的版本号和信息
  8. package.json 项目目录的详细描述

接下去我们要通过执行webpack命令，来编译我们的代码，生成vender.js。

  1. webpack --config build/webpack.config.js

编译完成后，刷新根目录，可以看到已经生成dist文件夹和vender.js文件。
用浏览器打开html文件，你会看到hello word。我们成功通过webpack编译了js文件，并且没有出现问题。

webpack —config build/webpack.config.js命令，我们可以通过npm scripts管理起来。
在package.json文件，我们为scripts属性配置一个build命令，其值为：webpack —config build/webpack.config.js，以下是scripts的相关代码：

  1. "scripts": {
  2.     "test": "echo \"Error: no test specified\" && exit 1",
  3.     "build": "webpack --config build/webpack.config.js"
  4.   }

然后在命令行中运行npm run build
生成以下机构目录

基于webpack4+和react16+从零开始搭建脚手架 - 图1

五、安装react和react-dom

在终端输入以下命令

  1. npm install --save-dev react react-dom

安装成功后，我们在项目使用react，我们直接修改src目录下的index.js的代码，我们用react来插入这句hello world！

  1. import React from "react";
  2. import ReactDom from "react-dom";
  4. ReactDom.render(
  5.     <h1>hello,word!</h1>,
  6.     document.getElementById('root')
  7. );

好了，我们再编译试试看。

  1. npm run build

失败了？对不对！首先，我告诉你这段代码没有任何问题为什么会失败？因为webpack只识别JavaScript文件，而且只能编译es5版本的JavaScript语法。实际上，我们使用ES2015，以及jsx的语法糖，webpack它根本不认识啊。怎么办？webpack 可以使用 loader 来预处理文件。它不仅仅可以处理JavaScript本身，还允许你打包任何的静态资源。
其中，babel-loader，就是这样一个预处理插件，它加载 ES2015+ 代码，然后使用 Babel 转译为 ES5。我们来了解下如何在webpack配置babel-loader。

首先安装babel相关的模块：

  1. 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。

第二步，你需要在根目录建立一个.babelrc的文件，配置相关的presets：

  1. {
  2.       "presets": [
  3.         [
  4.           "@babel/preset-env",
  5.           {
  6.             "targets": {
  7.               "browsers": [
  8.                 "> 1%",
  9.                 "last 5 versions",
  10.                 "ie >= 8"
  11.               ]
  12.             }
  13.           }
  14.         ],
  15.         "@babel/preset-react"
  16.       ]
  17.     }

第三步，修改webpack.config.js文件。

  1. const path = require('path');
  3. module.exports = {
  4.   entry: './src/index.js',
  5.   output: {
  6.     filename: 'vender.js',
  7.     path: path.resolve(__dirname, '../dist')
  8.   },
  9.   module: {
  10.       rules:[
  11.           {
  12.               test: /\.js?$/,
  13.               use:"babel-loader"
  14.           }
  15.       ]
  16.   }
  17. };

在 webpack 配置中定义 loader 时，要定义在 module.rules 中。其中，test和use属性是必须的。include属性，定义了rules执行的范围。这告诉 webpack 编译器如下信息：
嘿，webpack 编译器，你在编译文件过程中，如果这个是在app目录下的js文件，在你对它打包之前，先使用 babel-loader 转换一下。

重新执行本地编译

  1. npm run build

这次不再报错，编译成功。
好了，再次打开src目录的index.html，页面成功显示了hello world。