Webpack5教程六：基于webpack的Vue项目和React项目

通过前面几部分教程的学习，相信你已经对Webpack有所了解了，接下来我们来一波实战，相信只要是涉及过前端知识的小伙伴都应该听过Vue和React这两个热门框架，本文我们就从零配置基于webpack的Vue项目t和React项目

本文假设你已经了解了Vue和React的知识，还没了解的小伙伴可以找一下度娘，或者关注我的其它文章教程，加油哈！当然，由于是从零配置，所以跟使用脚手架（如@vue/cli或react-create-app）创建的项目操作肯定不一样，但本质是一样的，你能从零配置自然就能懂得脚手架的实现原理。

话不多说，咱们一个个来

基于Webpack配置Vue项目

从零配置基于webpack的Vue项目

先创建项目目录，结构如下

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

复制代码

安装所需模块及依赖
- webpack相关
  - webpack / webpack-cli / webpack-dev-server
  - html-webpack-plugin
- Vue相关
  - vue
- 其它
  - vue-loader
  - vue-template-compiler
  - @vue/compiler-sfc
  PS: 注意你所安装的vue-loader的版本，vue-loader@15版本前依赖vue-template-compiler，vue-loader@16版本后依赖@vue/compiler-sfc，它们的作用都是编译.vue单文件组件，都需要单独安装，但在[email protected]后的版本已经把@vue/compiler-sfc包含在内，所以不需要额外安装
安装webpack相关依赖
```
    npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin
复制代码
```
安装Vue，根据使用Vue版本的实际情况，以下二选一
```
   # Vue2安装
   npm install vue@2
   npm install -D vue-loader@15 vue-template-compiler
   
   # 默认安装Vue3
   npm install vue
   npm install -D vue-loader
复制代码
```

webpack配置

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


    }
复制代码

编译或启动开发服务器

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