react-cli-diy

Starting from 0, use webback to build a React scaffold of your own

Source address

Project use:

git clone git@github.com:TigerHee/react-cli-diy.git

cd react-cli-diy

npm install

Development mode launch:
npm run dev

Production packaging:
npm run build

Implementation steps:

First, create a new project directory in which npm init initializes the project environment.

To create a webpack profile:

• webpack.config.js / / public configuration
• webpack.prod.js / / production environment configuration
• webpack.dev.js / / development environment configuration

Create a public directory to store html template files.

Create the src directory to hold the resources needed for the front-end project.

To install web pack dependencies:

npm i webpack webpack-cli webpack-merge -D

Modify the webpack.config.js file:

module.exports = {
  entry: './src/index.js',  // Entrance
  output: {                 // Exit
    filename: 'bundle.[hash:8].js',
    path: path.resolve(__dirname, 'dist')
  },
}

Use the web pack merge package to merge public profiles to production and development profiles, respectively:

const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.js')

module.exports = merge(baseConfig, {
  // Separate configuration
})

To install local services and use html template related dependencies:

npm i webpack-dev-server html-webpack-plugin -D

Use HTML webpack plugin to use index.html template in public configuration:

plugins: [
  new HtmlWebpackPlugin({
    template: './public/index.html',
    filename: 'index.html',
    hash: true,                       // Add hash value to solve cache problem
    minify: {                         // Compress the packed html template
      removeAttributeQuotes: true,    // Remove attribute double quotes
      collapseWhitespace: true        // Collapse empty lines into one
    }
  }),
]

The development mode needs to use the development server:

devServer: { // Built in development server configuration
  port: 3000,
  progress: true,
  contentBase: './dist',
  open: true,
  proxy: {
    //Set development time interface proxy address
  }
},

After configuring the basic configuration of appeal, set the startup script in package.json:

"scripts": {
  "build": "webpack  --config webpack.prod.js",
  "dev": "webpack-dev-server --config webpack.dev.js"
},

Next, set css and less in public configuration:

rules:[
  {
    test: /\.(css|less)$/,
    use: [
      'style-loader',
      'css-loader',
      'postcss-loader',
      'less-loader'
    ]
  },
]

A separate configuration file, postcss.config.js, is required for postcss loader to handle compatible prefixes.

If the above configuration processes css, the style file is inserted into the html template. We want to extract the css file and import it through link:

npm i mini-css-extract-plugin -D

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

{
  module:{
    rules: [
      {
        test: /\.(css|less)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      },
    ]
  },
  plugins: [
    // Extract css plug-in
    new MiniCssExtractPlugin({
      filename: '[name].[hash:8].css',
      chunkFilename: '[id].[hash:8].css',
    }),
  ]
}

At this time, when executing npm run build, it is found that where the last packing result deposited in each packing needs to be cleared first:

npm i clean-webpack-plugin -D

To modify the production environment configuration:

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

plugins:[
  //Delete empty dist before each packing
  new CleanWebpackPlugin(),
]

The mini css extract plugin is used to extract css for link, and the optimized css assets webback plugin is used to compress css. The uglify js webback plugin is used to compress css

npm i optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

optimization: {              // Optimization term
  minimizer: [
    new UglifyJsPlugin({     // Optimizing js
      cache: true,           // Cache
      parallel: true,        // Concurrent packaging or not
    }),
    new OptimizeCSSAssetsPlugin({})    // Optimization of css
  ]
},

Set js and jsx in public configuration:

npm i babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators -D

Plus React's babel:

npm i @babel/preset-react -D

{
  test: /\.(js|jsx)$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        '@babel/preset-env',
        '@babel/preset-react'
      ],
      plugins: [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
      ]
    }
  },
  exclude: /node_modules/
},

Project add React related dependency:

npm i react react-dom -S

Write React code in index.js, HMM ~ ~, it can run.

Add image processing to the public configuration:

npm i file-loader url-loader -D

{
  test: /\.(png|jpg|gif)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 200 * 1024,          // Less than 200k becomes base64
    }
  }
}

Try adding a background image in less, ok.

Development mode needs to listen for changes and hot updates:

watch: true,
watchOptions: {
  poll: 1000,              // Monitor 1000 times per second
  aggregateTimeout: 300,   // Anti shake, when the first file changes, it will increase the delay before rebuilding
  ignored: /node_modules/  // You can exclude some huge folders,
},

Finally, both npm run build and npm run dev can run perfectly, and the scaffold construction is successful.