vue项目（二）安装配置webpack打包

一、安装

安装命令
npm install webpack webpack-cli

二、安装依赖

1、style-loader ：在html文件中创建标签，将js中的样式插入
css-loader：将css文件变成commonjs模块加载到js中，输出为样式字符串

npm install --save-dev css-loader style-loader

2、vue-loader是一个webpack的加载器，用于解析.vue文件并将其转换为JavaScript模块。它是Vue.js官方提供的一个工具，用于在开发过程中将单文件组件(.vue)转换为可用的JavaScript代码。

npm install vue-loader --save-dev

3、html-webpack-plugin的主要作用就是在webpack构建后生成html文件，同时把构建好入口js文件引入到生成的html文件中

npm i --save-dev html-webpack-plugin  

三、webpack 配置文件

1、新建webpack.config.js文件

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
    //环境配置   development开发者    production  生产者
    mode: "development",
    // 入口
    // 相对路径和绝对路径都行
    entry: "./src/main.js",
    // 输出
    output: {
        // path: 文件输出目录，必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname 当前文件的文件夹绝对路径
        path: path.resolve(__dirname, "dist"),
        // filename: 输出文件名
        filename: "js/main.js",
        clean: true, // 自动将上次打包目录资源清空
    },
    module: {
        rules: [
            {test:/.vue$/, use: 'vue-loader'},
            {test:/.css$/, use: ['style-loader','css-loader']},
            {test:/.scss$/, use: ['style-loader','css-loader','sass-loader',]},
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        // 小于10KB图片会转base64,  优点:减少请求数量  缺点:体积变大
                        maxSize: 15 * 1024 // 4kb
                    }
                },
                //设置图片打包后的图片路径
                generator: {
                    // 输出图片名字
                    filename: 'static/img/[hash:10][ext][query]'   
                    //[hash:10] 表示hash值只取10位
                }
            },
            // 字体图标
            {
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource',   
                generator: {
                    // 输出名字
                    filename: 'static/media/[hash:10][ext][query]'   //注意实际设置的路径
                }
            },
            {
                test: /\.(map3|map4|avi)$/,   //在这里加上就可以统一处理
                type: 'asset/resource',
                generator: {
                   // 输出名字
                   filename: 'static/media/[hash:10][ext][query]'  
                }
            }
        ]
    },
    plugins: [   //插件配置
        new HtmlWebpackPlugin({
            template: 'public/index.html',
            favicon: path.resolve('public/favicon.ico')
        }),
        new VueLoaderPlugin()
    ],
}

2、更改build指令，指定读取webpack.config.js文件里面的配置

“build”: “webpack --config webpack.config.js”

四、package.json配置文件

安装依赖之后的package.json文件

{
  "name": "project01",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "webpack --config webpack.config.js",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "css-loader": "^7.1.2",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "html-webpack-plugin": "^5.6.3",
    "style-loader": "^4.0.0",
    "url-loader": "^4.1.1",
    "vue-loader": "^17.4.2",
    "vue-template-compiler": "^2.7.16",
    "webpack": "^5.97.0",
    "webpack-cli": "^5.1.4"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ],
  "description": "## Project setup ```npm install ```",
  "main": "babel.config.js",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

五、完成

这样，webpack就安装配置完成了，现在在cmd里面执行webpack就可以打包了
生成文件夹dist