摘要：一初始化項(xiàng)目新建文件夾，文件名文件夾名稱不要用，這類關(guān)鍵字，后面使用插件時(shí)會發(fā)生錯(cuò)誤。未設(shè)置會報(bào)一個(gè)警告。四在項(xiàng)目中使用安裝。

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

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

mkdir firstreact
cd firstreact
npm init

新建gitignore文件，用于忽略安裝的包文件，文件內(nèi)容: node_modules

安裝webpack， 注意：我此處安裝的webpack版本是4.28.4，webpack4和webpack2, webpack3的一些配置不同，具體參考webpack文檔webpack中文文檔

npm i --save-dev webpack

新建文件夾，文件名：src

src目錄下新建文件hello.js,文件內(nèi)容：

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

  element.innerHTML = "Hello React";

  return element;
};

src目錄下新建文件index.js，文件內(nèi)容：

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

document.body.appendChild(hello());

新建文件webpack.config.js，一個(gè)最基礎(chǔ)的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í)行完成后，根目錄下會新增一個(gè)dist文件夾，文件夾下是打包出來的js文件bundle.js

webpack

安裝html-webpack-plugin，該插件將為你生成一個(gè) HTML5 文件， 其中包括使用?script?標(biāo)簽的 body 中的所有 webpack 包。

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

html-webpack-plugin配置，webpack.config.js內(nèi)容如下

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，此時(shí)dist目錄下生成了一個(gè)新文件index.html

webpack

安裝webpack-dev-server和webpack-cli，提供一個(gè)簡單的 web 服務(wù)器，并且能夠?qū)崟r(shí)重新加載。

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在啟動服務(wù)是要求設(shè)置mode，告知 webpack 使用相應(yīng)模式的內(nèi)置優(yōu)化。未設(shè)置會報(bào)一個(gè)警告。mode選項(xiàng)支持“development”“production”“none”，具體信息請閱文檔 修改package.json文件：

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

啟動服務(wù)，服務(wù)啟動后打開瀏覽器訪問http://localhost:3000/

npm run dev

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

css編譯和js編譯。現(xiàn)在開發(fā)時(shí)一般css都會使用擴(kuò)展css語法，如less或sass，這時(shí)就需要在項(xiàng)目中安裝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文件，配置文件內(nèi)容如下

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

在src目錄下新建文件index.less，文件內(nèi)容如下

body{
  h1{
    color: green;
  }
}

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

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

document.body.appendChild(hello());

再次啟動服務(wù)

npm run start

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

安裝react。

npm i --save-dev react react-dom

修改src目錄下index.js，文件內(nèi)容如下：

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é)點(diǎn)content。 文件內(nèi)容如下:

對應(yīng)修改webpack.config.js文件，為htmlWebpackPlugin修改template

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

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

目錄結(jié)構(gòu)為：

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