webpack构建react应用

一、新建一个文件夹。

 mkdir webpack-react-demo

二、在此文件夹下创建package.json文件
右键新建文件也行。这里使用 npm init 初始化项目的方式自动生成。
在webpack-react-demo文件夹下进入CMD命令行，输入npm init，一路enter就行。

三、安装相关的依赖包
react相关： react 、react-dom
babel相关： babel-core、babel-preset-es2015 、babel-preset-react
webpack相关： webpack、babel-loader 、webpack-dev-server
css loader: style-loader css-loader

四、webpack配置文件
根目录下新建webpack.config.js文件

const path = require("path");

module.exports = {
    mode:"development",
    entry:"./src/js/main.js",//入口文件
    output:{//输出配置
        filename:"bundle.js",
        path:path.resolve(__dirname,"dist")
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:["style-loader","css-loader"]
            },
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:["babel-loader"]
            }
        ]
    },
    // devServer:{
    //     contentBase:"./"
    // }
}

五、配置.babelrc文件

{
    "presets":["es2015","react"]
}

六、编码实现
根目录下新建src文件夹，src文件夹下创建js 、css文件夹。
js文件夹下创建App.js main.js 两个文件
css文件夹下创建test.css文件

//App.js文件
import React from "react"
export default function App(){
    return <h1>Hell React</h1>
}

//main.js文件
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

import "./../css/test.css"

ReactDOM.render(<App></App>,document.getElementById("app"));

/*test.css文件*/
body{
    background-color: red
}

然后根目录下创建index.html文件。

dist是打包之后的文件夹。

七、执行webpack命令

上面需要安装webpack-cli 选yes装一下。
另外这里需要安装一下babel-loader@7 的版本。

然后在执行webpack命令，就可以看到打包成功了。

然后在浏览器中打开index.html 就能看到如下效果。

然后我们再试试热更新，输入webpack-dev-server

在浏览器中输入localhost：8080.
然后我们改下test.css文件把背景色改为蓝色试试。
注意：这里要把index.html文件中JS的引用改一下。

webpack-dev-server这里运行的是开发环境，会直接在内存中找bundle.js。
使用webpack-dev-server --open会自动打开浏览器哦。

八、npm start 和npm build的设置。
脚手架中npm start的执行，其底层就是webpack-dev-server的执行。
npm build 就是webpack命令的执行。

在package.json中scripts项作如下配置：

 "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },

然后执行下npm start 或 npm build试试。

当然，真正的脚手架里配置远远比这里介绍的要多，封装的也要更好。这里只是简单的实现了一个react的简易版脚手架把。