Webpack5 Tutorial 6: Vue project and React project based on webpack

Through the study of the previous parts of the tutorial, I believe that you already have Webpacksome understanding. Next, we will have a wave of actual combat. I believe that as long as you are involved in front-end knowledge, you should have heard Vueof Reactthese two popular frameworks. In this article, we will start from Zero configuration based webpackprojects Vueand Reactprojects

This article assumes that you already know the knowledge of Vue and React. If you haven't, you can find Du Niang, or pay attention to my other articles and tutorials. Come on! Of course, since it is configured from zero, the operation of the project created with scaffolding (such as @vue/clior react-create-app) is definitely different, but the essence is the same. You can naturally understand the implementation principle of scaffolding from zero configuration.

Without further ado, let's come one by one

Configure Vue project based on Webpack

Configure a webpack-based Vue project from zero

First create a project directory with the following structure

    ├─node_modules          #模块安装目录（安装模块时自动创建）
    ├─public                #服务器根目录
    ├─dist                  #输出目录（构建时自动创建）
    └─src                   #源码目录
        ├─components        #公共组件目录
        ├─views             #页面组件目录
        ├─App.vue           #根组件
        └─index.js          #入口文件
    ├─package-lock.json     #依赖锁定文件
    ├─package.json          #项目配置文件
    └─webpack.config.js     #webpack配置文件

复制代码

Install required modules and dependencies
- webpack related
  - webpack / webpack-cli / webpack-dev-server
  - html-webpack-plugin
- Vue related
  - view
- other
  - vue-loader
  - vue-template-compiler
  - @vue/compiler-sfc
  vue-loaderPS: Pay attention to the version you installed, the vue-loader@15pre-version dependency vue-template-compiler, and the vue-loader@16post-version dependency @vue/compiler-sfc. Their functions are to compile .vuesingle-file components, and they all need to be installed separately, but the [email protected]later versions are already @vue/compiler-sfcincluded, so no additional installation is required.
Install webpack related dependencies
```
    npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin
复制代码
```
Install Vue. According to the actual situation of using the Vue version, choose one of the following two
```
   # Vue2安装
   npm install vue@2
   npm install -D vue-loader@15 vue-template-compiler
   
   # 默认安装Vue3
   npm install vue
   npm install -D vue-loader
复制代码
```

webpack configuration

    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const { VueLoaderPlugin } = require('vue-loader')

    module.exports = {
        mode: 'development',
        entry: './src/index.js',
        output: {
            path: path.join(__dirname, './dist'),
            filename: '[name].bundle.js',
            clean: true,
        },
        devServer: {
            static: path.resolve('./public')
        },
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    use: 'vue-loader'
                },

            ]
        },

        plugins: [
            new HtmlWebpackPlugin({
                template: path.resolve('./public/index.html')
            }),
            
            // vue-loader@15+版本后请确保引入这个插件！
            new VueLoaderPlugin()
        ],


    }
复制代码

Compile or start the development server

    # 输出到dist目录
    npx webpack
    
    # 启动服务器
    npx webpack server
复制代码

通过以上4步操作，就实现了最简单的Vue项目配置，当然以上代码只是实现了最简单的效果，如果有其它类型模块，你依然还是需要配置其它Loader、Plugin和其它webpack配置，请自行查看之前的教程

基于Webpack配置React项目

从零配置基于webpack的React项目

同样是先创建项目目录，结构如下

    ├─node_modules          #模块安装目录（安装模块时自动创建）
    ├─public                #服务器根目录
    ├─dist                  #输出目录（构建时自动创建）
    └─src                   #源码目录
        ├─components        #公共组件目录
        ├─views             #页面组件目录
        ├─App.js            #根组件
        └─index.js          #入口文件
    ├─package-lock.json     #依赖锁定文件
    ├─package.json          #项目配置文件
    └─webpack.config.js     #webpack配置文件

复制代码

安装所需模块及依赖
- react / react-dom
- webpack / webpack-cli / webpack-dev-server
- babel-loader / @babel/core / @babel/preset-react
PS: React项目中使用JSX语法，需要使用@babel/preset-react预设编译成浏览器可识别的js代码，由于需要在webpack中使用babel，所以需要安装babel-loader、@babel/core

webpack配置

    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')

    module.exports = {
        mode: 'development',
        entry: './src/index.js',
        output: {
            path: path.join(__dirname, './dist'),
            filename: '[name].bundle.js',
            clean: true,
        },
        devServer: {
            static: path.resolve('./public')
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: {
                        loader:'babel-loader',
                        options:{
                            presets:['@babel/preset-react']
                        }
                    }
                },

            ]
        },

        plugins: [
            new HtmlWebpackPlugin({
                template: path.resolve('./public/index.html')
            }),
        ],
    }
复制代码

编译或启动开发服务器

    # 输出到dist目录
    npx webpack
    
    # 启动服务器
    npx webpack server
复制代码

也可以通过配置npm scripts更方便地启动项目

    // package.json
    {
        // ...省略其它配置
        "scripts": {
             "build":"webpack",
             "dev":"webpack server"
           },
    }
复制代码

配置后就可以通过npm run build进行编译，通过npm run dev启动开发服务器