Build react Scaffolding from scratch

Webpack is a static module wrapper for modern JavaScript applications, the foundation of front-end modularity. As a front end engineer (Cheto Son), it is very necessary to learn.

Webpack official website documentation is very good, the Chinese documentation is also very powerful, comparable to vUE documentation. It is recommended to read the concept chapter, then the guide, and then the API and configuration overview. After reading this tutorial, you need to do some hands-on exercises to make a difference. Here’s how I set up the React development environment

The preparatory work

Install webpack

```
yarn add webpack webpack-cli -D
```
Copy the code

Create a configuration directory structure

Config webpack.js webpack.dev.js webpack.prod.js scripts build.js // build mode script start.js // development mode script SRC index.js package.json ```Copy the code

Try a simple configuration first

Configure the startup script command

package.json

` ` `... "license": "MIT", + "scripts": { + "start": "node ./scripts/start.js", + "build": "Node. / scripts/build. Js" +}, "devDependencies" : {" webpack ":" ^ 4.35.2 ", "webpack - cli" : "^ 3.3.5"}... ` ` `Copy the code

Write the WebPack configuration tosrc/index.jsAs the main entrance tobuildIs the packaged directory

config/webpack.common.js

Output Path Field Specifies the absolute path

        const path = require('path');

        module.exports = {
            entry: "./src/index.js",
            output: {
                path: path.resolve(__dirname, ".. /build"),
                filename: "bundle.js"}}Copy the code

Write development mode running scripts

scripts/build.js

        const webpack = require('webpack');
        const webpackConfig = require('.. /config/webpack.common.js');

        webpack(webpackConfig, (err, stats) => {
            if(err || stats.hasErrors()){
                console.log("Failed to compile"); }});Copy the code

Webpack Node interface documentation:www.webpackjs.com/api/node/

Write a little bit of content in the entry

src/index.js

    
    console.log('hello')
    
Copy the code

performyarn buildCommand to generate a package directory

Run the generated 'bundle.js'Copy the code

Configure the development server – webpack-dev-server

Install the dev server and merge configuration tools

    yarn add webpack-dev-server webpack-merge -D
    
Copy the code

Rewrite the webpack configuration file, the common file exports a passable base configuration generator, and the prod and dev files use webpack-merge to merge the common configuration and the configuration in their respective modes

config/webpack.common.js

        
        const path = require('path');

        functionWebpackCommonConfigCreator (options) {/ options: * * * * * / mode / / patternreturn {
                mode: options.mode,
                entry: "./src/index.js",
                output: {
                    filename: "bundle.js",
                    path: path.resolve(__dirname, ".. /build"),
                }
            }
        }

        module.exports = webpackCommonConfigCreator;

Copy the code

config/webpack.prod.js

        const webpackConfigCreator = require('./webpack.common');
        const merge = require('webpack-merge');

        const config = {

        }

        const options = {
            mode: "production"
        }

        module.exports = merge(webpackConfigCreator(options), config);

Copy the code

config/webpack.dev.js

        const webpackConfigCreator = require('./webpack.common');
        const merge = require('webpack-merge');

        const config = {

        }

        const options = {
            mode: "development"
        }

        module.exports = merge(webpackConfigCreator(options), config);

Copy the code

script/build.js

        const webpack = require('webpack');
        const webpackConfig = require('.. /config/webpack.prod.js');

        webpack(webpackConfig, (err, stats) => {
            if(err || stats.hasErrors()){
                console.log("Failed to compile"); }});Copy the code

Yarn Build is packaged and the output is normal

Configuration webpack – dev – server

config/webpack.dev.js

The contentBase option here is Output in Server mode. When server is enabled, WebPack compiles the code to memory in real time

. + const path = require('path');

        const config = {
            + devServer: {
            +     contentBase: path.join(__dirname, ".. /dist"+}}...Copy the code

scripts/start.js

        const webpack = require('webpack');
        const webpackDevServer = require('webpack-dev-server');
        const webpackConfig = require('.. /config/webpack.dev.js');

        const compiler = webpack(webpackConfig);
        const options = Object.assign({}, webpackConfig.devServer, {
            open: true
        })
        const server = new webpackDevServer(compiler, options);

        server.listen(3000, '127.0.0.1', () => {
            console.log('Starting server on http://localhost:8080');
        })

Copy the code

Run the commandyarn start, the browser automatically pops up a window to accesslocalhost:3000/bundle.js

A link to the

• Build react Scaffolding from scratch

• Build react Scaffolding from scratch

• Build react Scaffolding from Scratch

Github repository:Github.com/tanf1995/We…