webpack5构建一个简单的vue项目 (练习)

代码哈士奇
• 阅读 1242

webpack5构建vue

必要环境

安装ndejs

我们需要安装node 如果没有安装则安装 安装过则跳过

下载安装nodejs

执行

node -v
npm -v

webpack5构建一个简单的vue项目 (练习)

初始化项目文件夹

新建一个空的项目

执行 npm init -y 初始化

npm init -y

会生成一个package.json webpack5构建一个简单的vue项目 (练习)

安装webpack以及 html-webpack-plugin

控制台执行

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D

安装babel-loader

babel可以将我们的代码向下适配

npm i babel-loader @babel/core @babel/preset-env @babel/polyfill core-js@3 -D

安装 css-lodaer

支持less

npm install css-loader style-loader sass-loader postcss-loader autoprefixer less-loader  -D

安装 mini-css-extract-plugin css-minimizer-webpack-plugin

用来抽离压缩css 代码

npm i mini-css-extract-plugin css-minimizer-webpack-plugin -D

项目依赖 (面还有需要安装的)

 "devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.16.11",
    "@element-plus/icons": "^0.0.11",
    "@vue/cli-plugin-babel": "^4.5.15",
    "@vue/compiler-sfc": "^3.2.29",
    "autoprefixer": "^10.4.2",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.3",
    "copy-webpack-plugin": "^10.2.1",
    "core-js": "^3.20.3",
    "css-loader": "^6.5.1",
    "css-minimizer-webpack-plugin": "^3.4.1",
    "element-plus": "^1.3.0-beta.9",
    "eslint": "^7.32.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-vue": "^8.4.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "less-loader": "^10.2.0",
    "lodash": "^4.17.21",
    "mini-css-extract-plugin": "^2.5.3",
    "postcss-loader": "^6.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.3.0",
    "unplugin-auto-import": "^0.5.11",
    "unplugin-vue-components": "^0.17.15",
    "url-loader": "^4.1.1",
    "vue": "^3.2.29",
    "vue-loader": "^16.1.0",
    "vue-router": "^4.0.12",
    "vue-style-loader": "^4.1.3",
    "vuex": "^4.0.2",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.3"
  }

创建多个目录

创建多个文件夹 方便存放不同资源 参考vue-cli脚手架生成的

根目录下新建 webpack.config.js

src下创建main.ts 以及 App.vue

如下 webpack5构建一个简单的vue项目 (练习)

public 目录下

我们放入一个ico文件 webpack5构建一个简单的vue项目 (练习)

创建模板 html文件

webpack5内置了clean output开启即可

在 public目录下新建 index.html

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
    <strong><%= htmlWebpackPlugin.options.title %>：请检查js是否正常启用</strong>
</noscript>
<div id="app"></div>
</body>
</html>

开始构建vue项目

安装 vue-loader等

npm i vue-loader vue-template-compiler vue@next  vuex@next vue-router@next -D
npm install terser-webpack-plugin copy-webpack-plugin -D

配置webpack

webpack5内置了 clean 和 热更新

开启方式 在devServer配置

devServer: {
   hot: true,
   liveReload: true
},

在 webpack.config.js 文件中

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtract = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') //生产环境
const TerserPlugin = require('terser-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = (env) => {
  return {
    devServer: {
      port: 8888,
      hot: true,
      liveReload: true
    },

    mode: env.development ? 'development' : 'production',

    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    },

    entry: './src/main.js',

    output: {
      filename: "js/[name].[contenthash].js",
      // path: path.resolve(__dirname, 'dist/js'),
      clean: true,
      publicPath: "./"
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        },
        {
          test: /\.js$/,
          exclude: file => (
            /node_modules/.test(file) &&
            !/\.vue\.js/.test(file)
          ),
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  [
                    '@babel/preset-env',
                    {
                      targets: [
                        'last 1 version', //浏览器最新的一个版本
                        '> 1%' //代码使用超过1%
                      ],
                      useBuiltIns: 'usage',
                      corejs: 3
                    }
                  ]
                ]
              }
            },
            {
              loader: "eslint-loader"
            }
          ]
        },
        {
          test: /\.(css|scss)$/,
          use: [env.development ? 'vue-style-loader'
            : MiniCssExtract.loader,
            {
              loader: 'css-loader'
            },
            {
              loader: 'sass-loader'
            }
          ]
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          type: 'asset/resource'
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [
            {
              loader: "file-loader",
              options: {
                name:'img/[name].[hash].[ext]',
              }
            }


          ]
        }
      ]
    },

    optimization: {
      minimizer: [
        new CssMinimizerPlugin(),
        new TerserPlugin()
      ]
    },

    plugins: [
      new HtmlWebpackPlugin({
        title: "小型vue应用",
        template: "public/index.html",
        filename: "index.html",
        baseUrl: './icon/favicon.ico'
      }),
      new CopyWebpackPlugin({
        patterns:[
          {
            from: path.resolve(__dirname, './public/icon'),
            to: path.resolve(__dirname, './dist/icon'),
          }
        ]
      }),
      new MiniCssExtract({
        filename: 'css/style.css'
      }),
      new VueLoaderPlugin()
    ]

  }

}

修改package.json

webpack5构建一个简单的vue项目 (练习)

初始化 eslint

eslint --init

选择 检查找到问题

选择 js 浏览器环境 不用ts

拆分配置文件

开发环境

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

module.exports = {
  devServer: {
    port: 8888,
    hot: true,
    liveReload: true
  },

  mode: 'development',

  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },

  entry: './src/main.js',

  output: {
    filename: "js/[name].[contenthash].js",
    // path: path.resolve(__dirname, 'dist/js'),
    publicPath: "/"
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: file => (
          /node_modules/.test(file) &&
          !/\.vue\.js/.test(file)
        ),
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    targets: [
                      'last 1 version', //浏览器最新的一个版本
                      '> 1%' //代码使用超过1%
                    ],
                    useBuiltIns: 'usage',
                    corejs: 3
                  }
                ]
              ]
            }
          },
          {
            loader: "eslint-loader"
          }
        ]
      },
      {
        test: /\.(css|scss)$/,
        use: ['vue-style-loader',
          {
            loader: 'css-loader'
            // ,
            // options: {
            //   modules:{
            //     localIdentName: '[local]_[hash:base64:8]'
            //   }
            // }
          },
          {
            loader: 'sass-loader'
            // options: {
            //   // sass-loader version >= 8
            //   sassOptions: {
            //     indentedSyntax: true
            //   }
            // }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        type: 'asset/resource'
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          // {
          //   loader:'url-loader',
          //   options:{
          //     limit:4096,
          //     outputPath:'./img',
          //     name:'[name].[hash].[ext]',
          //   }
          // },
          {
            loader: "file-loader",
            options: {
              name:'img/[name].[hash].[ext]',
            }
          }


        ]
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      title: "小型vue应用",
      template: "public/index.html",
    }),
    new VueLoaderPlugin()
  ]

}

生产环境

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtract = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') //生产环境
const TerserPlugin = require('terser-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = () => {

  return {

    mode: 'production',

    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    },

    entry: './src/main.js',

    output: {
      filename: "js/[name].[contenthash].js",
      // path: path.resolve(__dirname, 'dist/js'),
      clean: true,
      publicPath: "./"
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        },
        {
          test: /\.js$/,
          exclude: file => (
            /node_modules/.test(file) &&
            !/\.vue\.js/.test(file)
          ),
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  [
                    '@babel/preset-env',
                    {
                      targets: [
                        'last 1 version', //浏览器最新的一个版本
                        '> 1%' //代码使用超过1%
                      ],
                      useBuiltIns: 'usage',
                      corejs: 3
                    }
                  ]
                ]
              }
            },
            {
              loader: "eslint-loader"
            }
          ]
        },
        {
          test: /\.(css|scss)$/,
          use: [ MiniCssExtract.loader,
            {
              loader: 'css-loader'
              // ,
              // options: {
              //   modules:{
              //     localIdentName: '[local]_[hash:base64:8]'
              //   }
              // }
            },
            {
              loader: 'sass-loader'
              // options: {
              //   // sass-loader version >= 8
              //   sassOptions: {
              //     indentedSyntax: true
              //   }
              // }
            }
          ]
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          type: 'asset/resource'
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [
            // {
            //   loader:'url-loader',
            //   options:{
            //     limit:4096,
            //     outputPath:'./img',
            //     name:'[name].[hash].[ext]',
            //   }
            // },
            {
              loader: "file-loader",
              options: {
                name:'img/[name].[hash].[ext]',
              }
            }


          ]
        }
      ]
    },

    optimization: {
      minimizer: [
        new CssMinimizerPlugin(),
        new TerserPlugin()
      ]
    },

    plugins: [
      new HtmlWebpackPlugin({
        title: "小型vue应用",
        template: "public/index.html",
        filename: "index.html",
        baseUrl: './icon/favicon.ico'
      }),
      new CopyWebpackPlugin({
        patterns:[
          {
            from: path.resolve(__dirname, './public/icon'),
            to: path.resolve(__dirname, './dist/icon'),
          }
        ]
      }),
      new MiniCssExtract({
        filename: 'css/style.css'
      }),
      new VueLoaderPlugin()
    ]

  }

}

测试

文件夹的基础文件 我复制的通过vue-cli创建的项目

运行 npm run start webpack5构建一个简单的vue项目 (练习)

打包 npm run build webpack5构建一个简单的vue项目 (练习) webpack5构建一个简单的vue项目 (练习)

拓展

这只是一个简单的项目

我们可以增加插件等赋予它更多能力 还有很多需要优化的地方 比如配置文件可以通过合并来优化

开发环境减少插件使用等等

前端
点赞
收藏
评论区
推荐文章
放学路上 放学路上
•
2年前
vscode+vue简单安装教程
1、安装vscode、node.js。2、打开vscode终端，全局安装vuecli：npminstallgvuecli用于构建项目。3、继续安装webpack（打包工具）：npminstallgwebpack。4、安装完成创建一个文件夹用于存放项目，比如myvue，cd到该文件夹，使用项目创建命令：vueinitwebpackmyvue。
2818
0
0
代码哈士奇 代码哈士奇
•
2年前
vite+vue3+electron桌面端开发
vitevue3electron桌面端开发ps:踩坑踩了一个多小时如果嫌麻烦可以直接拿走用克隆代码仓库1.2.同样你也可以使用脚手架来快速的创建如下图是生成的安装包选择了mis和nsis安装使用下载代码后进入项目目录执行npminstall安装依赖执行npmstart为开发模式执行npmdist为打包项目并且生成
1383
0
0
Jacquelyn38 Jacquelyn38
•
2年前
React.js中JSX的原理与关键实现
在开始开发之前，我们需要创建一个空项目文件夹。安装1.初始化npm init y2.安装webpack相关依赖npm install webpack webpackcli D3.安装babelloader相关依赖npm install babelloader @babel/core @babel/presetenv D4.
1476
0
0
放学路上 放学路上
•
1年前
常用npm命令
npm命令集合npmv：查看npm版本。npminity：初始化后会出现一个package.json配置文件。可以在后面加上y，快速跳过问答式界面。npminstall：会根据项目中的packa
429
0
0
Damumu Damumu
•
1年前
使用webpack配置TS项目
初始化项目准备工作：首先要安装node，node官网：https://nodejs.org/en/全局安装npmnpminstallglobalgulpnpm安装typescriptnpminstallgtypescript开始初始化项目通过执行命令npm
313
0
0
diuidu diuidu
•
2年前
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM（NodePackageManager）完成后检查安装版本：nodevnpmv2.安装webpackwebpack全局安装npminstallwebpackg3.安装vue脚手架全局安装脚手架3npminstall@vue/clig备注
1158
0
0
她左右 她左右
•
3年前
安装 | Vue3中文文档
安装Vue.js设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。将Vue.js添加到项目中有三种主要方式。1.在页面上以的形式导入。2.使用安装它。3.使用官方的来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置(例如，热重载、保存时的提示等等)。每个版本的详细发行说明可在
1202
0
0
Stella981 Stella981
•
2年前
Jenkins安装配置备忘
本人是开发，jenkins不是经常安装，备忘下一般安装中容易出现的问题：1.创建项目的时候没有构建maven的项目安装MavenIntegrationplugin插件2.maven的时候跳过测试cleanpackageDmaven.test.skiptrue3.执行脚本的时候提示找不到命令，但服务器单独执行命令okjenk
341
0
0
小万哥 小万哥
•
11个月前
CMake入门教程：从零开始构建C/C++项目
CMake是一个跨平台的自动化构建工具，可以用于构建各种类型的项目，包括C、C、Python、Java等。本文将从零开始，介绍如何使用CMake构建一个简单的C/C项目安装CMake首先，需要下载并安装CMake。可以从CMake。如果404Not
290
0
0
韦康 韦康
•
1个月前
尚硅谷Vue3快速上手（2024）
尚硅谷Vue3快速上手（2024）download》itzcw.com/8421/我想做一个简单的Vue3项目，应该怎么开始呢开始一个简单的Vue3项目，你可以按照以下步骤进行：步骤1:安装Node.js确保你的计算机上已经安装了最新版本的Node.js。
46
0
0
代码哈士奇
代码哈士奇
Lv1
(考研中~暂时停更)云开发，多语言全栈
文章
21
粉丝
10
获赞
24
热门文章
opencv.js人脸识别简单使用
SCF构建小型服务端并结合uni-app
uni-app使用uniCloud时做类似于拦截器和请求结果再处理(类似于请求和响应拦截)
vue实现世界疫情地图(点击进入子地图)
uni-app/vue 结合element ui实现菜单分类导航(类似于小米商城首页的分类导航那种)