从0到1学习react（一）

1. 使用webpack搭建react环境

先贴上package.json

{
  "name": "reacttest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --port 8888 --hot --inline --progress --config  src/config/webpack.config.js",
    "start": "npm run dev"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "webpack-cli": "^3.3.5"
  },
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "css-loader": "^3.0.0",
    "file-loader": "^4.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less-loader": "^5.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^2.0.0",
    "webpack": "^4.35.0",
    "webpack-dev-server": "^3.7.2"
  }
}

如果你手动搭建过环境你就会发现编译总是出错，这时候就可能是Babel的版本不对，升级到最新版本就好了

2. 接下来是webpack的配置文件

const path = require('path')
const webpack = require('webpack')
const HtmlwebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: {
    app: path.resolve(__dirname, '../js/index.js')
  },
  output: {
    filename: "[name].[hash].js",
    path: path.resolve(__dirname,'dist'),
  },
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets:["@babel/preset-react"]
        }
      },
      {
        test: /\.css$/,
        loader: ['css-loader','style-loader']
      }
    ],
    // loaders:[
    //   {
    //     test: /\.jsx?$/,
    //     exclude: /(node_modules|bower_components)/,
    //     loader: 'babel', // 'babel-loader' is also a legal name to reference
    //     query: {
    //       presets: ['react', 'es2015']
    //     }
    //   }
    // ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"development"'
    }),
    new HtmlwebpackPlugin({
      title: "react App",
      filename: "index.html",
      template: path.resolve(__dirname, '../index.html'),
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        removeAttributeQuotes: true
      }
    })
  ]
}

看到babel-loader那个地方，那就是需要注意的地方，presets那里不能再写env,2015那些了，要换成新的来写

3. 结构目录

4.后记

先搭建环境，后面一步一步的写一些小的使用，一起学习react。