Webpack5 Tutorial 6: proyecto Vue y proyecto React basado en webpack

A través del estudio de las partes anteriores del tutorial, creo que ya tiene Webpackalgo de comprensión. A continuación, tengamos una ola de combate real. Creo que mientras esté involucrado en el conocimiento de front-end, debería haber oído hablar Vuede Reactestos dos marcos populares En este artículo, comenzaremos con proyectos y proyectos basados en configuración cerowebpackVueReact

Este artículo asume que ya conoces los conocimientos de Vue y React. Si no los tienes, puedes encontrar a Du Niang o prestar atención a mis otros artículos y tutoriales. ¡Vamos! Por supuesto, dado que está configurado desde cero, el funcionamiento del proyecto creado con scaffolding (como @vue/clio react-create-app) es definitivamente diferente, pero la esencia es la misma. Naturalmente, puede comprender el principio de implementación de scaffolding desde la configuración cero.

Sin más preámbulos, vamos uno por uno.

Configurar proyecto Vue basado en Webpack

Configurar un proyecto Vue basado en webpack desde cero

Primero cree un directorio de proyecto con la siguiente estructura

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

复制代码

Instale los módulos y dependencias necesarios
- relacionado con el paquete web
  - webpack / webpack-cli / webpack-dev-servidor
  - html-webpack-complemento
- relacionado con vue
  - vista
- otro
  - vue-loader
  - vue-plantilla-compilador
  - @vue/compilador-sfc
  vue-loaderPD: preste atención a la versión que instaló, la vue-loader@15dependencia previa a la versión vue-template-compilery la dependencia vue-loader@16posterior a la versión @vue/compiler-sfc. Sus funciones son compilar .vuecomponentes de un solo archivo, y todos deben instalarse por separado, pero las [email protected]versiones posteriores ya están @vue/compiler-sfcincluidas. por lo que no se requiere instalación adicional.
Instalar dependencias relacionadas con el paquete web
```
    npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin
复制代码
```
Instale Vue. De acuerdo con la situación real de usar la versión de Vue, elija uno de los dos siguientes
```
   # Vue2安装
   npm install vue@2
   npm install -D vue-loader@15 vue-template-compiler
   
   # 默认安装Vue3
   npm install vue
   npm install -D vue-loader
复制代码
```

configuración del paquete web

    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()
        ],


    }
复制代码

Compilar o iniciar el servidor de desarrollo

    # 输出到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启动开发服务器