手动搭建webpack-react单页面环境

1.创建文件夹
mkdir myapp

2.进入文件夹
cd myapp

3.初始化package.js
npm init -y  //直接生成

4.安装 webpack webpack-cli
npm install webapck webpack-cli -D //一起安装，开发环境

5.创建入口文件及其它开发和生产环境文件
webpack.config.js
dist  //生产环境文件(发布后的)
src //开发环境文件
main.js  //这是项目的Js的入口文件


6.运行npm install webapck-dev-server -D 把这个工具安装到项目的本地开发依赖
// 1. 运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
// 2. 安装完毕后，这个 工具的用法， 和 webpack 命令的用法，完全一样
// 3. 由于，我们是在项目中，本地安装的 webpack-dev-server ， 所以，无法把它当作 脚本命令，在powershell 终端中直接运行；（只有那些 安装到 全局 -g 的工具，才能在 终端中正常执行）
// 4. 注意： webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装 webpack
// 5. webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘上；而是，直接托管到了 电脑的内存中，所以，我们在 项目根目录中，根本找不到 这个打包好的 bundle.js;
// 6. 我们可以认为，webpack-dev-server 把打包好的 文件，以一种虚拟的形式，托管到了 咱们项目的根目录中，虽然我们看不到它，但是，可以认为，和 dist  src   node_modules  平级，有一个看不见的文件，叫做 bundle.js

webpack.config.js文件设置

//引入路径模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const PATH = {
    //入口，表示要使用webpack打包哪个文件
    app: path.join(__dirname, './src/main'),
    //出口，表示打包好的文件，输出到哪 个目录中去
    build:path.join(__dirname,'./dist')
}
//webpack配置项，就是一个js文件,通过Node中的模块操作，向外暴露了一个配置对象
module.exports = {
    //用来定义开发环境还是生成环境，如果不写会出现警告提示信息
    mode:"development",
    //手动设置入口文件和出口文件
    //入口文件的配置
    entry: {
        //app是自定义的 这里决定了output输出的名称
        app:PATH.app
    },
    //出口文件的配置
    output: {
        filename: '[name].js',  //指写输出文件的名称
        path:PATH.build
    },
    //模块打包的配置
    module: {
        rules: [
            {
                test: /\.(css|scss)&/,
                //loader执行的顺序，从右到左，从下到上
                use: ["style-loader","css-loader","sass-loader"]
            },
            {
                test: /\.(js|jsx)$/,
                use: {
                    //编译JS
                    loader: "babel-loader",
                    //做转换，将ES6转换ES5
                    options: {
                        //把jsx语法做个转换
                        presets:["@babel/env","@babel/react"]
                    }
                }
            },
            {
                test: /\.(jpg|git|png)$/,
                use: {
                    //当出现上三种格式图片时候，用url-loader去解析，如果大于limit:2M,就不会再用url-loader,会自动转换成file-loader去解析   ，会转换base64格式
                    loader: "url-loader",
                    options: {
                        name: "[name][hash].[ext]",  //写上hash，上传同一张图片时不会被覆盖，ext是文件的后缀名
                        limit: 2048,
                        outputPath:"./img"  //打包完成后，输出的目录，会自动在dist目录下创建
                    }
                }
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name][path].[ext]",
                        outputPath: "./iconfont"
                    }
                }
            }
        ]
    },
    //插件
    plugins: [
        //自动生成index.html
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "index.html",
            title:"webpack-nzsto"
        })
    ],

    //配置别名
    resolve: {
        alias: {
            "@":path.join(__dirname,"src")
        }
    },
    //配置代理api，生成一个服务
    // devServer: {
    //     当前服务基于那个目录下
    //     contentBase:"./src"，
    //     prot:"端口号"，
    //     host:"当前访问路径,默认localhost",
    //     做跨域
    //     proxy: {
    //         "/api": {
    //             target: "http://www.badiu.com",
    //             changeOrigin:true
    //         }
    //     }
    // }

}
//需要安装相应loader
//当我们在控制台，直接输入webapck命令执行的时候，webpack做了以下几步：
// 1、首先，webpack发现，我们并没有通过命令的形式，给它指写入口和出口
// 2、webpack就会去项目的根目录中，查找一个叫做webpack.config.js的配置文件
// 3、当找互配置文件后，webpack会去解析执行这个配置文件，当解析执行配置文件后，就得到了配置文件中的，导出配置对象
// 4、当webpack拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建

main.js文件设置

//表示导入一个模块
//import xxx from 'xxxx' 这是ES6中导入模块的方法
import React from 'react'