How to build a project based on react, webpack 4, Babel 7 (1)

Keywords: Javascript React Webpack npm Front-end

Preface

Writing front-end projects for so long, the previous dva framework, and later the create-react-app framework, need to make some customized changes for the team. A little vague about the workflow of webpack and the upgrade of webpack@4 according to the official document of webpack have greatly improved the performance, while create-react-app still uses webapck@3, so decided to build a scaffold for the team from scratch. Since Babel has recently been upgraded to babel@7, it has also been upgraded by the way.

Major Dependencies and Versions

react@16
webpack@4
babel@7
eslint@5
prettier@1
stylelint
editorconfig
husky
lint-staged

react is definitely necessary as the main js framework.
webapck is the focus of this article, the core building tool is it.
babel is used to convert esnext grammar into business scenario browser-supported grammar.
eslint is used to standardize team js code style, mainly dealing with js grammar issues.
prettier is used to format code to ensure that the team code style is consistent.
stylelint is used to standardize css and less code.
editorconfig guarantees that all files are encoded and indented consistently.
husky and lint-stage mainly do gitHooks, eslint and stylelink checks before code submission.
These will be covered one by one in the following articles, but not in detail here.

Let's not say much. Initialize a project first.

mkdir my-react-app
cd my-react-app
npm init

Installation Necessary Dependency

# react correlation
npm i -S react react-dom
# webpack correlation
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
# babel related, transforming esnext to es5
npm i -D @babel/core @babel/preset-env @babel/preset-react

Entry file

mkdir src public # Create src and public directories
touch src/index.js # Create js entry file
touch public/index.html # Create html template file
touch babel.config.js # babel@7 configuration file
touch webpack.config.js # webpack configuration file

src/index.js file content

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>
    awesome react.
  </div>,
  document.getElementById('root')
);

Content of public/index.html file

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>my-react-app</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

babel configuration file

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { modules: false }],
    '@babel/preset-react'
  ]
}

Start writing webpack configuration files

// webpack.config.js
// Used to insert js and css into template html
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // Development Model
  mode: 'development',

  // Entrance js
  entry: './src/index.js',

  // Output results
  output: {
    // Output filename
    filename: 'bundle.js',

    // Output catalogue
    path: __dirname + '/dist'
  },

  // Processing various file types (modules)
  module: {
    rules: [
      {
        // Use `babel-loader'for files ending with `js'.
        // `babel-loader'automatically loads the `babel.config.js' configuration file
        test: /\.js$/,
        use: 'babel-loader',

        // Exclude the `node_modules'directory and do not process it
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    // Automatic insertion of output results into custom template html files
    new HtmlWebpackPlugin({
      template: __dirname + '/public/index.html'
    })
  ]
};

Result

Posted by trace on Fri, 25 Jan 2019 10:39:14 -0800

Programmer Group