两种模式的合并（合并开发和生产配置）

好处：合并过后，我们就只需要一个webpack.config.js文件即可,不在需要两个配置文件了(webpack.dev.js,webpack.prod.js)

合并流程:

新建webpack.config.js文件

// webpack.config.js[合并配置]
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//css压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");//css压缩插件
const TerserWebpackPlugin = require("terser-webpack-plugin");//内置语法插件
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");//图片压缩插件
const CopyPlugin = require("copy-webpack-plugin")
const { VueLoaderPlugin } = require("vue-loader");
const { DefinePlugin } = require("webpack");//webpack中专门用于定义环境变量的插件

// 首先判断该当前的环境变量(判断其是否为生产模式)
const isProduction = process.env.NODE_ENV === 'production'

const getStyleLoaders = (preProcessor) => {
  return [
    // 设置判断模式
    isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader',
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {
    // 输出路径设置判断(生产模式设置输出路径, 开发模式:undefined)
    path: isProduction ? path.resolve(__dirname , "../dist"): undefined ,
    // 生产模式带哈希值,开发模式不带哈希值
    filename: isProduction ? "static/js/[name].[contenthash:10].js" : "static/js/[name].js",
    // 生产模式带哈希值,开发模式不带哈希值
    chunkFilename: isProduction ? "static/js/[name].[contenthash:10].chunk.js" : "static/js/[name].chunk.js",
    assetModuleFilename: "static/js/[hash:10][ext][query]",
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
      },
      {
        test: /\.(jsx|js)$/,
        include: path.resolve(__dirname, "../src"),
        loader: "babel-loader",
        options: {
          cacheDirectory: true,
          cacheCompression: false,
          plugins: [
            // "@babel/plugin-transform-runtime" // presets中包含了
          ],
        },
      },
      // vue-loader不支持oneOf
      {
        test: /\.vue$/,
        loader: "vue-loader", // 内部会给vue文件注入HMR功能代码
        options: {
          // 开启缓存
          cacheDirectory: path.resolve(
            __dirname,
            "node_modules/.cache/vue-loader"
          ),
        },
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules",
      cache: true,
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    isProduction && new CopyPlugin({//生产模式才需要CopyPlugin
      patterns: [
        {
          from: path.resolve(__dirname, "../public"),
          to: path.resolve(__dirname, "../dist"),
          toType: "dir",
          noErrorOnMissing: true,
          globOptions: {
            ignore: ["**/index.html"],
          },
          info: {
            minimized: true,
          },
        },
      ],
    }),
    isProduction && new MiniCssExtractPlugin({//生产模式才需要压缩css
      filename: "static/css/[name].[contenthash:10].css",
      chunkFilename: "static/css/[name].[contenthash:10].chunk.css",
    }),
    new VueLoaderPlugin(),
    new DefinePlugin({
      __VUE_OPTIONS_API__: "true",
      __VUE_PROD_DEVTOOLS__: "false",
    })
  ].filter(Boolean),//过滤掉不需要使用的环境变量(根据模式的不同按需使用)
  optimization: {
    // 压缩的操作
    // minimize配置项
    // 指定 webpack 默认使用 terser-webpack-plugin 来压缩 JS 代码，或者使用其它在optimization.minimizer定义的插件。
    minimize: isProduction,//生产模式才需要压缩,设置判断条件,这个配置项默认是true。
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserWebpackPlugin(),
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
    ],
    splitChunks: {
      chunks: "all",
    },
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`,
    },
  },
  resolve: {
    extensions: [".vue", ".js", ".json"],
  },
  
  //开发服务器
  devServer: {
    open: true,
    host: "localhost",
    port: 3000,
    hot: true,
    compress: true,
    historyApiFallback: true, // 解决vue-router刷新404问题
  },

  // 判断模式
  mode: isProduction ? "production" : "development",
  devtool: isProduction ? "source-map" : "cheap-module-source-map",
};

最大的改动就是,设置一个判断条件isProduction用于判断当前的状态(模式)

重新修改package.json中的运行指令

"scripts": {
  "start": "npm run dev",
  "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.config.js",
  "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.config.js"
},

运行指令进行项目的打包

# 开发模式
npm start

# 生产模式
npm run build

优化配置

Vue结合ElementPlus组件库进行使用
官方文档

全局引入

下载ElementPlus

npm i element-plus

在main.js中全局引入

// 使用的是Vue3
import { createApp } from "vue"//引入 createApp
import App from './App' 

// 全部引入elementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 引入路由
import router from './router'

// 创建app并挂载到对应的元素上
// 调用elementPlus应在创建之后,挂载之前
createApp(App).use(router).use(ElementPlus).mount(document.getElementById("app"));

随后直接在组件中引用即可(这里引用el-button[按键]展示)

<template>
    <h1 class="app">hello! App</h1>
    <Home/>

    <!-- 直接引用ui组件库内的button组件即可 -->
    <el-button type="primary"><router-link to="/home">Home</router-link></el-button><br><br>
    <el-button type="primary"><router-link to="/about">About</router-link></el-button>

    <!-- 路由显示 -->
    <router-view></router-view>
</template>

<script>
    import Home from './views/Home.vue'
    export default {
        name: "App",
        components:{
            Home,
        }
    }
</script>

运行打包指令

# 开发模式打包
npm start

# 生产模式打包
npm run server

按需引入

相较于全局引入,按需引入能够减小打包体积,但是步骤相较来讲会繁琐一点
官方文档

下载包ElementPlus(下载过就不需要再下载了)

npm i element-plus

安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到 Webpack 的配置文件中

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

完整的webpack.config.js代码

// webpack.config.js[合并配置]
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//css压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");//css压缩插件
const TerserWebpackPlugin = require("terser-webpack-plugin");//内置语法插件
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");//图片压缩插件
const CopyPlugin = require("copy-webpack-plugin")
const { VueLoaderPlugin } = require("vue-loader");
const { DefinePlugin } = require("webpack");//webpack中专门用于定义环境变量的插件

// elementplus的按需加载
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

// 首先判断该当前的环境变量(判断其是否为生产模式)
const isProduction = process.env.NODE_ENV === 'production'

const getStyleLoaders = (preProcessor) => {
  return [
    // 设置判断模式
    isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader',
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {
    // 输出路径设置判断(生产模式设置输出路径, 开发模式:undefined)
    path: isProduction ? path.resolve(__dirname , "../dist"): undefined ,
    // 生产模式带哈希值,开发模式不带哈希值
    filename: isProduction ? "static/js/[name].[contenthash:10].js" : "static/js/[name].js",
    // 生产模式带哈希值,开发模式不带哈希值
    chunkFilename: isProduction ? "static/js/[name].[contenthash:10].chunk.js" : "static/js/[name].chunk.js",
    assetModuleFilename: "static/js/[hash:10][ext][query]",
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
      },
      {
        test: /\.(jsx|js)$/,
        include: path.resolve(__dirname, "../src"),
        loader: "babel-loader",
        options: {
          cacheDirectory: true,
          cacheCompression: false,
          plugins: [
            // "@babel/plugin-transform-runtime" // presets中包含了
          ],
        },
      },
      // vue-loader不支持oneOf
      {
        test: /\.vue$/,
        loader: "vue-loader", // 内部会给vue文件注入HMR功能代码
        options: {
          // 开启缓存
          cacheDirectory: path.resolve(
            __dirname,
            "node_modules/.cache/vue-loader"
          ),
        },
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules",
      cache: true,
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    isProduction && new CopyPlugin({//生产模式才需要CopyPlugin
      patterns: [
        {
          from: path.resolve(__dirname, "../public"),
          to: path.resolve(__dirname, "../dist"),
          toType: "dir",
          noErrorOnMissing: true,
          globOptions: {
            ignore: ["**/index.html"],
          },
          info: {
            minimized: true,
          },
        },
      ],
    }),
    isProduction && new MiniCssExtractPlugin({//生产模式才需要压缩css
      filename: "static/css/[name].[contenthash:10].css",
      chunkFilename: "static/css/[name].[contenthash:10].chunk.css",
    }),
    new VueLoaderPlugin(),
    new DefinePlugin({
      __VUE_OPTIONS_API__: "true",
      __VUE_PROD_DEVTOOLS__: "false",
    }),
    
    //elementPlus的按需加载 
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ].filter(Boolean),//过滤掉不需要使用的环境变量(根据模式的不同按需使用)
  optimization: {
    // 压缩的操作
    // minimize配置项
    // 指定 webpack 默认使用 terser-webpack-plugin 来压缩 JS 代码，或者使用其它在optimization.minimizer定义的插件。
    minimize: isProduction,//生产模式才需要压缩,设置判断条件,这个配置项默认是true。
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserWebpackPlugin(),
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
    ],
    splitChunks: {
      chunks: "all",
    },
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`,
    },
  },
  resolve: {
    extensions: [".vue", ".js", ".json"],
  },
  
  //开发服务器
  devServer: {
    open: true,
    host: "localhost",
    port: 3000,
    hot: true,
    compress: true,
    historyApiFallback: true, // 解决vue-router刷新404问题
  },

  // 判断模式
  mode: isProduction ? "production" : "development",
  devtool: isProduction ? "source-map" : "cheap-module-source-map",
};

随后在要使用到的组件当中引入对应的样式模块(这里展示App.vue)

<template>
    <h1 class="app">hello! App</h1>
    <Home/>

    <!-- 直接引用ui组件库内的button组件即可 -->
    <el-button type="primary"><router-link to="/home">Home</router-link></el-button><br><br>
    <el-button type="primary"><router-link to="/about">About</router-link></el-button>

    <!-- 路由显示 -->
    <router-view></router-view>
</template>

<script>
    // 按需引入elementPlus的样式组件(按需引入)
    import {ElButton} from 'element-plus'

    import Home from './views/Home.vue'
    export default {
        name: "App",
        components:{
            Home,
            ElButton,//注册样式组件(按需引入)
        }
    }
</script>

不需要在main.js中设置

// 使用的是Vue3
import { createApp } from "vue"//引入 createApp
import App from './App' 

// 全部引入elementPlus
// import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'

// 引入路由
import router from './router'

// 创建app并挂载到对应的元素上
// 调用elementPlus应在创建之后,挂载之前
createApp(App)
    .use(router)
    // .use(ElementPlus)
    .mount(document.getElementById("app"));

运行打包指令

# 开发模式打包
npm start

# 生产模式打包
npm run server

webpack学习笔记(17)-webpack在Vue项目当中的应用(3)-两种模式的合并配置以及优化配置

两种模式的合并（合并开发和生产配置）

合并流程:

优化配置

全局引入

按需引入

结果展示(全局引入和按需引入都是一样的结果)