Instead of building a project from start to finish using A command-line tool, you usually build projects with one click.

After several days of study, I decided to build a React project with Webpack, and recorded the process of building and shared it with everyone. Vegetable chicken 1, if there is a mistake, I hope you help point out.

This article will be divided into three chapters, each with a theme.

The first chapter establishes the project prototype

The project structure

code

Project code Github repository

Initialize the project

mkdir diy-webpack-for-react
cd diy-webpack-for-react
npm init -y
Copy the code

Add the. Gitignore file

node_modules
/dist

.idea
.vscode
Copy the code

Initialize the Git repository

git init
Copy the code

Install webpack

npm i webpack webpack-cli -D
Copy the code

configurationwebpack.config.js

Configuration idea

  • Configuration entry (entry)
  • Configuration output (output)
  • Configure various resources to loadloader
  • useHtmlWebpackPluginInject the script of the packaged JS entry file into the HTML template

Install dependencies

  • babel-loader @babel/core @babel/preset-env @babel/preset-react
  • style-loader css-loader
  • url-loader
  • html-webpack-plugin

webpack.config.jscode

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // Set it to production mode
  // Production mode compresses JS code by default
  // If you're wondering what the packed file looks like
  // You can set mode to "development" and devtool to "none"
  mode: "production".// Set the entry file
  entry: "./src/index.js".output: {
    // Set the exit file name
    filename: "main.js".// Set the directory for the export file
    path: path.resolve(__dirname, "dist"),
    publicPath: "/"
  },
  resolve: {
    // Set the extension so that you can import the file without writing the extension
    extensions: [".js".".json".".jsx"]},module: {
    rules: [{// Use babel-loader to translate files ending in ".js" or ".jsx"
       // The configuration of babel-loader is placed in the ". Babelrc "file
        test: /\.jsx? $/.use: "babel-loader"
      },
      {
        // Use csS-loader and style-loader respectively for CSS files
        // css-loader can change the CSS of imported projects into JS modules
        // style-loader allows the page to be opened with JS to the CSS module
        // The style is injected into the style tag in the HTML header
        test: /\.css$/.use: ["style-loader"."css-loader"] {},// Use file-loader to load image files
        test: /\.(png|jpg|jpeg|svg|gif)$/.use: "file-loader"}},plugins: [
    // This plugin can inject the generated entry JS file into the template HTML
    new HtmlWebpackPlugin({
      // Set the path to the template
      template: "./src/template.html".// Set the path for favicon
      favicon: "./src/assets/favicon-32x32-next.png"}})];Copy the code

configuration.babelrc

We need to configure the.babelrc file to tell Babel which presets we want to use.

{
  "presets": ["@babel/preset-env"."@babel/preset-react"]}Copy the code

Configure the NPM script

Add the following script to NPM for easy development

// ...
"scripts": {
  "build": "webpack --config webpack.config.js",
  "serve:dist": "npx http-server-spa ./dist"
}
// ...
Copy the code

Package the project using NPM Run build. Use NPM Run Serve :dist to run the packed files.

At the end

A simple WebPack configuration is complete.

Install React and react-dom and start writing code.

npm i react react-dom
Copy the code

Next chapter: split the configuration file into webpack.common.js webpack.dev.js webpack.prod.js for different scenarios; Start the development server with webpack-dev-server; Optimize packaging files for production environment.

Other chapters

  • The first chapter establishes the project prototype
  • Chapter 2 unpacks the WebPack configuration
  • Chapter III Improvement Projects

reference

Learn Webpack

Webpack Bundle Split and Code Split differences and applications

webpack guides

learn Webpack step by step