用webpack手动搭建react脚手架

依赖的安装

 1.npm i webpack webpack-cli webpack-dev-server react react-dom -D

2. npm i babel-loader@7 babel-core babel-preset-es2015 babel-preset-react -D

3.在安装完成后需要在webpack.config.js中的module.export中配置，代码如下：

 module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['react','es2015']
          }
        }
      }
    ]
  }

其中红色部分与官网上的不一致，因为我们安装的依赖有react和es2015，安装这个主要是为了将react的语法转换成浏览器可以识别的js代码

4.热更新需要：webpack-dev-server需要在package.json中的scripts中添加：“dev”:“webpack-dev-server”,在webpack.config.js中配置

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 1010
  }

//port：1010可以更改端口号
项目需要跑起来，就需要第5步的配置完成不一定要build，但一定要配置。这样直接在控制台中输入npm run dev就可以启动项目

5.将外部index文件添加到dist中（也就是让dist中生成index.html文件），用到npm i html-webpack-plugin -D , plugin插件，需要在webpack.config.js中添加var HtmlWebpackPlugin = require('html-webpack-plugin');和 var webpack=require('webpack')
在module.exports中添加

plugins: [
    new HtmlWebpackPlugin({ template: './index.html' }),
    new webpack.HotModuleReplacementPlugin()
]

6.安装css插件的依赖npm i css-loader style-loader -D

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

7.需要加载本地图片的时候
安装依赖：npm install file-loader -D
在rules中配置：

{
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      }