裕-React 安装路径总结

1. webpack网站文档：

https://www.webpackjs.com/guides/development/
https://www.webpackjs.com/concepts/output/

2. 安装文件（第一步）：

//（版本问题就不安装最新的了...） 
// npm install webpack-cli --save-dev
// npm install webpack-encoding-plugin
npm install webpack --save-dev
npm i webpack-cli@3.3.11 -D
npm i webpack-dev-server@3.11.0 -D
npm install style-loader css-loader --save-dev 
npm install file-loader --save-dev 
npm install csv-loader xml-loader --save-dev 
npm install html-webpack-plugin --save-dev 
npm install clean-webpack-plugin --save-dev 
npm install webpack-dev-server --save-dev
npm install babel-loader --save-dev
npm install @babel/core
npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
npm install react
npm install react-dom

3. 新建文件（第二步）：

建立 .babelrc 文件：    type null>.babelrc
内容 ：
{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins":[["import", {"libraryName": "antd", "style": "css"}]]
}

4. 运行（第六步）：

// npx webpack --mode=development    //预编译看看有无错误
// npx webpack --watch
npx webpack-dev-server --open

5. 转换js代码：

npm init -y
npm install babel-cli@6 babel-preset-react-app@3
npx babel --watch src --out-dir js --presets react-app/prod 

6. 打包：

npm init -y
npm install webpack webpack-cli --save-dev
npm install --save lodash
npx webpack   				（没config文件）
npx webpack --config webpack.config.js	（写webpack.config.js才可以使用）
npm run build				（需要改package.json文件才能使用）

7. antd：

npm install antd
npm install babel-plugin-import
@import '~antd/dist/antd.css';  这行加入到js引入的css文件里

8. package.json（第五步）：

npm init
// dependencies : 字段指定了项目运行所依赖的模块
// devDependencies : 指定项目开发所需要的模块

-----------------------例子---------------------
{
  "name": "spa",
  "version": "1.0.0",
  "description": "",
  "main": "Server.js",
  "dependencies": {
    "FormData": "^0.10.1",
    "antd": "^4.5.2",
    "axios": "^0.20.0",
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-preset-react-app": "^3.1.2",
    "braft-editor": "^2.3.9",
    "chownr": "^2.0.0",
    "csv-loader": "^3.0.3",
    "del": "^5.1.0",
    "echarts": "^4.9.0",
    "echarts-for-react": "^2.0.16",
    "echarts-gl": "^1.1.1",
    "form-data": "^3.0.0",
    "fs": "^0.0.1-security",
    "gulp": "^4.0.2",
    "gulp-clean": "^0.4.0",
    "gulp-cli": "^2.2.1",
    "gulp-consolidate": "^0.2.0",
    "gulp-iconfont": "^10.0.3",
    "gulp-iconfont-css": "^3.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-task-listing": "^1.1.0",
    "gulp-template": "^5.0.0",
    "less": "^3.12.2",
    "less-loader": "^6.2.0",
    "lodash": "^4.17.15",
    "md5": "^2.3.0",
    "node-fetch": "^2.6.0",
    "qrcode.react": "^1.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-native-vector-icons-iconfont": "^1.1.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "xml-loader": "^1.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "@handsontable/react": "^4.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-plugin-import": "^1.13.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.5.3",
    "express": "^4.17.1",
    "file-loader": "^6.0.0",
    "handsontable": "^8.0.0",
    "html-webpack-plugin": "^4.3.0",
    "node-gyp": "4.0.0",
    "style-loader": "^1.2.1",
    "terser-webpack-plugin": "^1.4.4",
    "ttf2woff2": "3.0.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0",
    "webpack-encoding-plugin": "^0.3.1",
    "echarts-gl": "^1.1.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC"
}

9. express：

npm init   //应用创建一个 package.json 文件
$ npm install express --save
node index.js   //运行,可以改在package.json文件里改

10.package.json 使用：

参考文献：
https://blog.csdn.net/alnorthword/article/details/87106336
https://www.cnblogs.com/maigy/p/13321553.html
https://www.cnblogs.com/liuyinlei/p/7412540.html

npm init
(创建项目中利用npm生成package.json的那点事儿)

npm install --global --production windows-build-tools
(貌似需要python2.7的环境，没有的话需要运行这个工具，但是测试别人的时候貌似不好用...待测试)

npm install
(安装package.json里的那些文件)

11.其他：

npm i webpack-encoding-plugin -D   //utf-8格式转换

npx webpack
npm install -g serve
serve -s public

serve -l 9090 -s public

12.新建 webpack.config.js（第三步）：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const webpack = require("webpack");
const EncodingPlugin = require("webpack-encoding-plugin");

module.exports = {
  mode: 'development',
  entry: {
    index: "./src/index.js",
  },
  devtool: "inline-source-map",
  devServer: {
    contentBase: "./public",
    hot: true,
    port: 9090,
    host: "localhost",
    proxy: {
      "/": {
        target: "http://localhost:3500",
        secure: false,
        changeOrigin: true,
      },
    },
  },

  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "./index.html",
    }),
    //new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new EncodingPlugin({
      encoding: "UTF-8",
    }),
  ],
  externals: {},
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "[name].[hash:8].js",
  },

  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: {
                mode: "local",
                localIdentName: "[name][local][hash:base64:8]",
              },
            },
          },
        ],
      },
      {
        test: /\.css$/,
        include: /node_modules/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        include: /node_modules/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                javascriptEnabled: true,
                // sourceMap: true,//修改antd主题色
                modifyVars: {
                  "layout-header-padding": "0 24px",
                  "menu-item-height": "32px",
                  "table-padding-vertical": "8px",
                  // "@primary-color": "#13c2c2", //修改antd主题色
                },
              },
            },
          },
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["file-loader"],
      },
      {
        test: /\.(csv|tsv)$/,
        use: ["csv-loader"],
      },
      {
        test: /\.xml$/,
        use: ["xml-loader"],
      },
      { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ["babel-loader"] },
    ],
  },
};

13.新建文件（第四步）：

// 当前目录新建文件夹 ： css、js、public、src
// 新建  src 文件夹下 -> index.html : 
<!doctype html>
<html>
  <head>
    <title>React</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  </head>
  <body>
  	<div id="root"></div>
  </body>
</html>

// 新建  src 文件夹下 -> index.js: 

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

function Index() {
  return (
    <h1>Hello World!!</h1>
  );
}
ReactDOM.render(<Index />, document.getElementById("root"));

目录结构：