React and Vue are the two most popular front-end frameworks. Facebook officially launched create-React-app, Vue also has its own CLI tool vue-cli. Both tools are very useful, but in actual projects, We still need to make some changes before we can actually launch the project, and we still want more so-called personalization to support the project. So it is necessary to master the configuration of React and Vue in Webpack.

Configure the React development environment

1. Basic configuration of the React project

Create a myApp folder and initialize, install React, install Webpack, and install Babel.

Create a directory and enter
mkdir react-webpack && cd The $_
# to create package. Json
npm init -y
Install the react-dom dependency
npm i react react-dom
# Install WebPack and webPack - CLI development dependencies
npm i webpack webpack-cli -D
# installed Babel
npm i babel-loader @babel/core @babel/preset-env -D
# Install Babel preset- React
npm i @babel/preset-react -D
Copy the code

You also need to add Babel that supports JSX files and create a new webpack.config.js configuration file as follows:

module.exports = {
    resolve: {
        extensions: ['.wasm'.'.mjs'.'.js'.'.json'.'.jsx']},module: {
        rules: [{test: /\.jsx? $/.// Regex for JSX /js files
                exclude: /node_modules/.// Exclude the node_modules folder
                use: {
                    / / loader is Babel
                    loader: 'babel-loader'.options: {
                        // Configuration options for Babel escape
                        babelrc: false.presets: [
                            / / add preset - react
                            require.resolve('@babel/preset-react'),require.resolve('@babel/preset-env'), {modules: false}]],cacheDirectory: true}}}]}};Copy the code

Create a SRC directory under the root of your project and create the following files under SRC:

App. Js file:

// App.jsx
import React from 'react';
import ReactDOM from 'react-dom';
const App = (a)= > {
    return (
        <div>
            <h1>Hello React and Webpack</h1>
        </div>
    );
};
export default App;
ReactDOM.render(<App />, document.getElementById('app'));
Copy the code

Index. Js file:

// index.jsx
import App from './App'; // We can omit.jsx
Copy the code

Add entry to webpack.config.js:

module.exports = {
    entry: './src/index.jsx'
    // ...
};
Copy the code

Create a public directory under the project root directory to store static resource files. Create a new index.html file as a template for the project.


      
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>Hello React Webpack</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>
Copy the code

We need to use the html-webpack-plugin to copy index.html into the dist folder. First, we need to install the html-webpack-plugin:

cnpm i html-webpack-plugin -D
Copy the code

Modify the webpack. Config. Js:

const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
    // ...
    plugins: [
        new HtmlWebPackPlugin({
            template: 'src/index.html'.filename: 'index.html'}})];Copy the code

Configure packaging commands in scripts:

{
    "scripts": {
        "build": "webpack --mode production"}}Copy the code

Configure the React local service

Install the webpack-dev-server dependencies as follows:

npm i webpack-dev-server -D
Copy the code

Add the start command to package.json:

{
    "scripts": {
        "build": "webpack --mode production"."start": "webpack-dev-server --mode development --open"}}Copy the code

To facilitate development, we will create a new configuration file for webpack.config.dev.js:

const path = require('path');

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development'.devtool: 'cheap-module-source-map'.devServer: {
        contentBase: path.join(__dirname, './src/'),
        publicPath: '/'.host: '127.0.0.1'.port: 3000.stats: {
            colors: true}},entry: './src/index.jsx'.// Add JSX to the default extension, omitting JSX
    resolve: {
        extensions: ['.wasm'.'.mjs'.'.js'.'.json'.'.jsx']},module: {
        rules: [{test: /\.jsx? $/.// JSX file regex
                exclude: /node_modules/.// Exclude the node_modules folder
                use: {
                    / / loader is Babel
                    loader: 'babel-loader'.options: {
                        // Configuration options for Babel escape
                        babelrc: false.presets: [
                            / / add preset - react
                            require.resolve('@babel/preset-react'),require.resolve('@babel/preset-env'), {modules: false}]],cacheDirectory: true}}}]},plugins: [
        new HtmlWebPackPlugin({
            template: 'src/index.html'.filename: 'index.html'.inject: true}})];Copy the code

The package.json script is also modified by starting the config file path:

{
    "scripts": {
        "build": "webpack --mode production"."start": "webpack-dev-server --config './webpack.config.dev.js' --open "}}Copy the code

At this point, you can execute NPM start to see the effect!

Configure the Vue development environment

The React section explains some of the repeated steps in detail, so here are the steps and code.

The first step is also to create the directory, initialize package.json, install Vue, install Webpack, and install Babel.

# create directory, NPM init -y # install webpack # install webpack && CD $_ # create package.json I webpack webpack-cli -d # Install Babel NPM I babel-loader @babel/core @babel/preset-env -d # Install loader NPM I VUe-loader Ue-template-compiler -d # Install html-webpack-plugin NPM I html-webpack-plugin -dCopy the code

Create app. vue and index.js files in SRC folder as follows:

// app.js
import Vue from 'vue';
import App from './app.vue';

Vue.config.productionTip = false;

new Vue({
    render: h= > h(App)
}).$mount('#app');
Copy the code
<template>
    <div id="app">
        Hello Vue & Webpack
    </div>
</template>

<script>
    export default {};
</script>
Copy the code

Then create an HTML file named index.html:


      
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>Webpack Vue Demo</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>
Copy the code

Finally, configure webpack.config.js as follows:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    resolve: {
        alias: {
            vue$: 'vue/dist/vue.esm.js'
        },
        extensions: [The '*'.'.js'.'.vue'.'.json']},module: {
        rules: [{test: /\.js$/.exclude: /node_modules/.use: {
                    loader: 'babel-loader'}}, {test: /\.vue$/.loader: 'vue-loader'}},plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html'.filename: 'index.html'}})];Copy the code

React configuration files are different from React configuration files. React directly extends the Babel syntax. Vue syntax templates need to be processed by vue-loader.

After the above configuration, run NPX webpack to see the DIST output. The React configuration is basically the same as the React section, which will not be repeated here.