webpack4手动配置安装react开发

截止目前，以前都是在使用webpack打包react来进行开发，为了跟随技术的步伐，今天来折腾下新版本的新用法

实践环境

webpack: 4.9.1
react: 16.4.0

1、创建项目并安装

mkdir webpack4_react16_reactrouter && cd webpack4_react16_reactrouter

npm init -y

npm install react react-dom  prop-types

npm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin webpack-dev-server eslint eslint-plugin-html eslint-plugin-react babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import babel-core babel-loader babel-plugin-transform-strict-mode babel-plugin-transform-object-assign babel-plugin-transform-decorators-legacy babel-preset-es2015 babel-preset-react babel-preset-stage-0 style-loader css-loader url-loader --save-dev

react开发需要用到的
babel相关的是用来做es5/es6语法解析的
eslint相关的是用来做语言检查的

2、eslint、babel和webpack相关配置

.eslintrc

{
    "env": {
        "browser": true,
        "node": true,
        "es6": true,
        "jquery": true
    },
    "parser": "babel-eslint",
    "plugins": [
        "react",
        "html"
    ],
    "extends": [
        "airbnb"
    ],
    "rules": {
        "no-underscore-dangle": 0
    }
}

.babelrc // 这个文件可以不用加暂时不起作用

{
    "plugins": [
        "transform-es2015-modules-commonjs"
    ]
}

修改webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

let config = {
  mode: 'production',
  entry: {
    app: ['./src/index.jsx'],
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 8083,
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'React Demo',
      filename: './index.html', // 调用的文件
      template: './index.html', // 模板文件
    }),
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: [
          path.resolve(__dirname, 'node_modules'),
        ],
        options: {
          plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy'],
          presets: ['es2015', 'react', 'stage-0'],
        },
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader',
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader',
        ],
      },
      {
        test: /\.(csv|tsv)$/,
        use: [
          'csv-loader',
        ],
      },
      {
        test: /\.xml$/,
        use: [
          'xml-loader',
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
  },
};

if (process.env.NODE_ENV === 'production') {
  config = Object.assign({}, config, {
    mode: 'production',
  });
} else {
  config = Object.assign({}, config, {
    mode: 'development',
    devtool: 'eval',
  });
}

module.exports = config;

下面来修改index.js，修改index.js为index.jsx
src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import AppComponent from './components/AppComponent';

ReactDOM.render(
  (<AppComponent>React Demo</AppComponent>),
  document.getElementById('root'),
);

添加src/components/AppComponent.jsx

import React from 'react';
import PropTypes from 'prop-types';

class AppComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {};
  }

  render() {
    return (
      <div>{this.props.children}</div>
    );
  }
}

AppComponent.propTypes = {
  children: PropTypes.node.isRequired,
};

export default AppComponent;

修改index.html，这个只是作为一个模板来使用，具体的后期复杂逻辑，以后的文章分享

<!doctype html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

项目目录最终的结构

├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── components
│   │   └── AppComponent.jsx
│   ├── data.xml
│   ├── demo-image.png
│   ├── font.woff2
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   ├── glyphicons-halflings-regular.woff2
│   ├── index.css
│   ├── index.jsx
│   └── print.js
└── webpack.config.js

运行开发环境的命令