摘要：一初始化項目新建文件夾，文件名文件夾名稱不要用，這類關鍵字，后面使用插件時會發(fā)生錯誤。未設置會報一個警告。四在項目中使用安裝。

新建文件夾，文件名firstreact 文件夾名稱不要用react，node這類關鍵字，后面使用插件時會發(fā)生錯誤。

init項目環(huán)境，項目信息可默認或自行修改

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;

執(zhí)行webpack。執(zhí)行完成后，根目錄下會新增一個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;

再次執(zhí)行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 使用相應模式的內置優(yōu)化。未設置會報一個警告。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

三、優(yōu)化開發(fā)環(huán)境

css編譯和js編譯。現(xiàn)在開發(fā)時一般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

目前為止完成了一個最基礎的項目結構，后面需要使用其他框架的話再此基礎上修改。在這過程中因各個插件工具的版本不同可能會發(fā)生不同錯誤，遇到錯誤時，請查詢相關文檔。

安裝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增加掛載節(jié)點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