摘要：一初始化项目新建文件夹，文件名文件夹名称不要用，这类关键字，后面使用插件时会发生错误。未设置会报一个警告。四在项目中使用安装。

新建文件夹，文件名firstreact 文件夹名称不要用react，node这类关键字，后面使用插件时会发生错误。

init项目环境，项目信息可默认或自行修改

mkdir firstreact
cd firstreact
npm init

新建gitignore文件，用于忽略安装的包文件，文件内容: node_modules

安装webpack， 注意：我此处安装的webpack版本是4.28.4，webpack4和webpack2, webpack3的一些配置不同，具体参考webpack文档webpack中文文档

npm i --save-dev webpack

新建文件夹，文件名：src

src目录下新建文件hello.js,文件内容：

module.exports = function () {
  var element = document.createElement("h1");

  element.innerHTML = "Hello React";

  return element;
};

src目录下新建文件index.js，文件内容：

var hello = require("./hello.js");

document.body.appendChild(hello());

新建文件webpack.config.js，一个最基础的webpack配置如下：

const webpack = require("webpack");
const path = require("path");
var config = { 
    entry: [ "./src/index.js" ], // 打包入口文件
    output: {
        path: path.resolve(__dirname, "dist"), 
        filename: "bundle.js" 
    } // 打包输出文件
};
module.exports = config;

执行webpack。执行完成后，根目录下会新增一个dist文件夹，文件夹下是打包出来的js文件bundle.js

webpack

安装html-webpack-plugin，该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。

npm i --save-dev html-webpack-plugin 

html-webpack-plugin配置，webpack.config.js内容如下

const webpack = require("webpack");
const path = require("path");
const HtmlwebpackPlugin = require("html-webpack-plugin");

var config = { 
    entry: [ "./src/index.js" ], // 打包入口文件
    output: {
        path: path.resolve(__dirname, "dist"), 
        filename: "bundle.js" 
    },// 打包输出文件
    plugins: [
        new HtmlwebpackPlugin({ 
            title: "Hello React", 
        })
    ]
};

module.exports = config;

再次执行webpack，此时dist目录下生成了一个新文件index.html

webpack

安装webpack-dev-server和webpack-cli，提供一个简单的 web 服务器，并且能够实时重新加载。

npm install --save-dev webpack-dev-server webpack-cli

修改webpack.config

const webpack = require("webpack");
const path = require("path");
const HtmlwebpackPlugin = require("html-webpack-plugin");

var config = {
    entry: [
        "webpack/hot/dev-server",
        "webpack-dev-server/client?http://localhost:3000",
        "./src/index.js"
    ], // 入口文件
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    }, // 打包输出文件
    plugins: [
        new HtmlwebpackPlugin({
            title: "Hello React"
        }),
    ]
};
module.exports = config;

配置webpack启动的快方式，此处webpack4在启动服务是要求设置mode，告知 webpack 使用相应模式的内置优化。未设置会报一个警告。mode选项支持“development”“production”“none”，具体信息请阅文档 修改package.json文件：

············
  "scripts": {
    "start": "webpack-dev-server --mode=development --port 3000 --hot",
    "build": "webpack --mode=production"
  }
···········

启动服务，服务启动后打开浏览器访问http://localhost:3000/

npm run dev

三、优化开发环境

css编译和js编译。现在开发时一般css都会使用扩展css语法，如less或sass，这时就需要在项目中安装css编译插件。此处以less为例。es6和es7语法也需要babel编译。

const webpack = require("webpack");
const path = require("path");
const HtmlwebpackPlugin = require("html-webpack-plugin");

var config = {
    entry: [
        "webpack/hot/dev-server",
        "webpack-dev-server/client?http://localhost:3000",
        "./src/index.js"
    ], // 入口文件
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    }, // 打包输出文件
    module: {
        rules: [
            {
                test: /.less$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "less-loader" }
                ]
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: [
                    { loader: "babel-loader" }
                ]
            }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            title: "Hello React"
        }),
    ]

安装：

npm i --save-dev less css-loader style-loader less-loader
npm i --save-dev babel-loader  @babel/core @babel/preset-env @babel/preset-react 

修改webpack.config.js

const webpack = require("webpack");
const path = require("path");
const HtmlwebpackPlugin = require("html-webpack-plugin");

var config = {
    entry: [
        "webpack/hot/dev-server",
        "webpack-dev-server/client?http://localhost:3000",
        "./src/index.js"
    ], // 入口文件
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    }, // 打包输出文件
    module: {
        rules: [
            {
                test: /.less$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "less-loader" }
                ]
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: [
                    { loader: "babel-loader" }
                ]
            }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            title: "Hello React"
        }),
    ]
};
module.exports = config;

根目录下新建.babelrc文件，配置文件内容如下

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

在src目录下新建文件index.less，文件内容如下

body{
  h1{
    color: green;
  }
}

修改src目录下的index.js文件：

import hello from "./hello.js";
import "./index.less";

document.body.appendChild(hello());

再次启动服务

npm run start

目前为止完成了一个最基础的项目结构，后面需要使用其他框架的话再此基础上修改。在这过程中因各个插件工具的版本不同可能会发生不同错误，遇到错误时，请查询相关文档。

安装react。

npm i --save-dev react react-dom

修改src目录下index.js，文件内容如下：

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

import "./index.less";

class APP extends React.Component  {
    render() {
        return (
Hello React
)
    }
}

ReactDOM.render(, document.getElementById("content"));

在src目录下新建index.html，在html增加挂载节点content。 文件内容如下:

对应修改webpack.config.js文件，为htmlWebpackPlugin修改template

············

    plugins: [
        new HtmlwebpackPlugin({
            title: "Hello React",
            template: "./src/index.html"
        }),
    ]
    
············

目录结构为：

│  .babelrc
│  .gitignore
│  package.json
│  webpack.config.js
│      
└─src
        hello.js
        index.html
        index.js
        index.less