react项目，手写webpack配置一。全局安装webpack，webpack-cli,因为webpack4之后就将w

一。全局安装webpack，webpack-cli,因为webpack4之后就将webpack-cli剥离出来，所以需要单独安装 cnpm install --save-dev webpack webpack-cli

二。在项目根目录新增 webpack.config.js 最简单的webpack配置可以只包含入口和出口，还有mode

const path = require('path');

module.exports = {
  entry: './src/index.js', //相对路径
  output: {
      path: path.resolve(__dirname, 'build'), //打包文件的输出路径
      filename: 'bundle.js' //打包文件名
  },
  mode: 'development'
  }

三。将启动webpack加到package.json里

"scripts": {
        "start": "webpack --progress --watch --hot"
    },

四。现在可以添加react模块了 cnpm install --save-dev react react-dom

我当前项目的目录结构为：

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>My Webpack App</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

index.js写了一个最简单的react例子

import React, { Component } from 'react';
import ReactDom from 'react-dom';

class App extends Component {
    render() {
        return <h1> Hello, world! </h1>
    }
}

ReactDom.render(
    <App />,
    document.getElementById('root')
)

这时候webpack需要增加插件html-webpack-plugin， cnpm install --save-dev html-webpack-plugin

将public/index.html作为入口，webpack里面的配置如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
 plugins:[
    new HtmlWebpackPlugin({
      template:'./public/index.html',//指定模板路径
      filename:'index.html',//指定文件名
    })
  ],

编译react还需要借助babel,安装 cnpm install --save-dev babel babel-cli babel-loader babel-preset-env babel-preset-react

这里需要注意的是loader8要配合babel7使用 npm install -D babel-loader @babel/core @babel/preset-env webpack 版本搭配问题，详情可以看babel-loader的介绍页 www.npmjs.com/package/bab…，我是直接降低了babel-loader的版本

在项目根目录增加.babalrc文件

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

webpack.config.js文件增加loader，配置如下

 module:{
    rules:[
      {
        test:/\.js$/,
        use:[
          {
            loader:'babel-loader'
          }
        ]
      }
    ]
  }

到这里就完成了配置，npm start ，在build文件夹里直接打开index.html,就可以看到 Hello,world啦