Webpack builds the React project manually

Initialize the project

Create a new directory and initialize the project

npm init
Copy the code

Add the following dependencies to package.json

NPM install -- Production dependencies = NPM install --production"dependencies": {
    "react": "^ 16.8.6"."react-dom": "^ 16.8.6"."react-router-dom": "^ 5.0.1." "} // devDependencies is set to "modules" and "NPM i-save-dev""devDependencies": {// Install Babel related"@babel/core": "^ 7.4.5"."@babel/preset-env": "^ 7.4.5"."@babel/preset-react": "^ 7.0.0." "."babel-loader": "^ 8.0.6"."babel-polyfill": "^ 6.26.0"// Plugins: Empty old files every time you build"clean-webpack-plugin": "^ 3.0.0"// CSS processing"css-loader": "^ 2.1.1", // Handle CSS compatibility"postcss-loader": "^ 3.0.0"."autoprefixer": "^ 9.6.0"// Add less support"less": "^ 3.9.0"."less-loader": "^ 5.0.0"/ / the plugin"html-webpack-plugin": "^ 3.2.0"."style-loader": "^ 0.23.1"// Add webPack packaging"webpack": "^ 4.33.0"."webpack-cli": "^ 3.3.3", // Provide a Web container, which can be accessed locally at http://localhost:port"webpack-dev-server": "^ 3.7.1." "// Provide configuration file merge"webpack-merge": "^ 2"
}
Copy the code

Install the above dependencies

npm install
Copy the code

Configuration bable

Create a new.babelrc file in the root directory

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

Add postcss.config.js to the root directory

module.exports = {  
    plugins: {  
      'autoprefixer': {browsers: 'last 5 version'}}}Copy the code

Create a new webpack.base.config.js in the root directory as the base WebPack configuration

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); Module.exports = {// exports file entry:'./src/index.js',
    output: {
        filename: 'bundle.[hash].js',
        path: path.join(__dirname, '/dist'}, module: {// configure the corresponding rules.test: /\.css$/,
                use: ['style-loader'.'css-loader'.'postcss-loader'] {},test: /\.js[x]? $/, use:'babel-loader',
                exclude: /node_modules/
            }, {
                test: /\.less$/,
                use: ['style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'less-loader'[new HtmlWebpackPlugin({template:'./src/index.html'
        }),
        new CleanWebpackPlugin()
    ]
};

Copy the code

Create a new webpack.dev.config.js file in the root directory as the configuration for the development environment

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js'); Module. exports = merge(baseConfig, {// set to dev mode:'development',
    devtool: 'inline-source-map'// Configure server directory and port devServer: {contentBase:'./dist',
        port: 3000
    }
});

Copy the code

In the root directory of new webpack. Product. Config. Js files as the production environment configuration

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js'); Module. exports = merge(baseConfig, {// set to export mode:'production'
});

Copy the code

Configuration Script Command

  "scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.config.js"."build": "webpack --config webpack.product.config.js"
  },
Copy the code

Create a new SRC directory and index.html in the root directory

<! DOCTYPE html> <html lang="en">

<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>Document</title>
</head>

<body>
    <div id="root"></div>
</body>
</html>

Copy the code

Create the entry files index.js and app.js in SRC

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.less';

ReactDOM.render(<App/>, document.getElementById('root'));

Copy the code

import React from 'react';

class App extends React.Component {
    render() {
        return <div>
            <h1 className="hello">Hello React & Webpack! </h1> </div> } }export default App;
Copy the code

Create an index.less file in the SRC directory and test the less file

@blog-color-red: #ff0000;

.hello {
    color: @blog-color-red;
}

Copy the code

To run the program

npm run start
Copy the code

Not surprisingly, it jumps to the browser and displays a red **Hello React & Webpack! * * the words

The packaged file

npm run build
Copy the code

You can open the dist file in between folders, showing a red **Hello React & Webpack! * * the words

conclusion

In the past, the scaffolding tools that come with the framework were also generally used. During the Dragon Boat Festival, we took the initiative to configure Webpack & React. Of course, the above are only some simple configurations, and more complex configurations need to modify the Webpack configuration, which will be supplemented later. Next configure Webpack & Vue.

GitHub address: github.com/kavience/we…

(after)

Webpack builds the React project manually