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

·  阅读 1364
Webpack5教程六:基于webpack的Vue项目和React项目

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

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

话不多说,咱们一个个来

基于Webpack配置Vue项目

从零配置基于webpack的Vue项目

  1. 先创建项目目录,结构如下

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

    image.png

  2. 安装所需模块及依赖

    • 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-compilervue-loader@16版本后依赖@vue/compiler-sfc,它们的作用都是编译.vue单文件组件,都需要单独安装,但在Vue@3.2.13后的版本已经把@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
    复制代码
  3. 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()
            ],
    
    
        }
    复制代码
  4. 编译或启动开发服务器

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

    image.png

    image.png

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

基于Webpack配置React项目

从零配置基于webpack的React项目

  1. 同样是先创建项目目录,结构如下

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

    image.png

  2. 安装所需模块及依赖

    • 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

  3. 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')
                }),
            ],
        }
    复制代码
  4. 编译或启动开发服务器

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

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

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

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

    image.png

传送门

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改