从零搭建React开发环境，方便自己测试某些基于React的组件

webpack3/4 (www.kancloud.cn/hfpp2012/we…)

学习顺序

• 看介绍

• 做安装

• 写hello world shell

  1)mkdir helloworld 2)cd helloworld 3)npm init -y 4)npm i webpack -D 5)mkdir src 6)mkdir dist 7)touch src/app.js 命令行参数 8)webpack src/app.js dist/app.bundle.js (最简单用法) 9)webpack src/app.js dist/app.bundle.js --watch 10)webpack src/app.js dist/app.bundle.js -p (生产环境) 配置文件 11)touch webpack.config.js 12)webpack 不加任何参数就可以使用 因为默认去找当前目录下的配置文件去了 13)一般不单独使用webpack这个命令，要把它写在package.json中 然后去用npm run 命令去跑

实际应用（插件模式了）

1)把js文件嵌入到html中 npm install --save-dev html-webpack-plugin
2)css sass loader 还有js和css分开的插件 安装期间出现的问题，要学会自己去搜索解决！ 说白了就是需要一个插件来解析css就可以了
3)dev server
4)不用react官方脚手架，自己通过webpack配置一个 说白了就是需要一个插件来解析react语法就可以了
5)额外知识：
1. cdn会缓存文件，有了hash值，就不会有老的文件被缓存，新的文件不能及时生效的bug了。
...
webpack4
不推荐全局安装，全局只有一个，每个项目不一样

搭建react开发环境

mkdir react-in-action
cd
npm init -y
npm i webpack webpack-cli -D
npm i @babel/core babel/loader @babel/preset-env @babel/preset-react -D
npm i react react-dom
touch .babelrc
    vim
        {
            "presets": ["@babel/preset-env","@babel/preset-react"]
        }
touch webpack.config.js
    vim
        module.exports = {
            module: {
                rules: [
                    {
                        test: /\.js/,
                        exclude: /node_modules/
                        use: {
                            loader: "babel/loader"
                        }
                    }
                ]
            }
        }
mkdir src
#cd src
#touch index.js
cd ..
mkdir components
cd components
touch xx.js
vim
    写react代码就ok了！可以是类组件，也可以是函数组件，写完之后，要export default 一下，才能被import
cd ../
pwd
    src
touch index.js
vim index.js
    写react代码，或者dva的初始化路由啥的！... webpack打包默认的文件，它里面import别的，就会继续去找别的！渲染root节点啥的！
打开项目(目录)
改写dev webpack --mode development
npm run dev
以上ok之后，默认会在dist目录下，生成一个main.js文件，但我们还需要一个html，有个插件可以替我们在内存中生成一个这样的文件
npm i html-webpack-plugin -D
下载完插件，肯定要配置
vim webpack.config.js
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = {
        module: {
            rules: [
                {
                    test: /\.js/,
                    exclude: /node_modules/
                    use: {
                        loader: "babel/loader"
                    }
                }
            ],
            plugins: [
                new HtmlWebpackPlugin({
                    template: "src/index.html",
                    filename: "index.html" // 也会生成到dist中，直接打开这个就可以了！
                })
            ]
        }
    }
touch src/index.html
vim html
最后一个插件，打代码自己刷新啥的
npm i webpack-dev-server -D
vim package.json
    "start" : "npx webpack-dev-server --open --mode development" // 也可以配置在webpack.config.js配置文件中
npm run start