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

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

本文假设你已经了解了Vue和React的知识，还没了解的小伙伴可以找一下度娘，或者关注我的其它文章教程，加油哈！ 当然，由于是从零配置，所以跟使用脚手架（如@vue/cli或react-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配置文件
   
   

   

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-compiler，vue-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
   

   

   

通过以上4步操作，就实现了最简单的Vue项目配置，当然以上代码只是实现了最简单的效果，如果有其它类型模块，你依然还是需要配置其它Loader、Plugin和其它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配置文件
   
   

   

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启动开发服务器

   

传送门

• webpack5教程一：初识webpack
• webpack5教程二：资源模块与加载器
• Webpack5教程三：插件plugins
• Webpack5教程四：利用服务器提高开发效率
• Webpack5教程五：如何实现webpack打包优化
• Webpack5教程六：基于webpack的Vue项目和React项目