webpack在Vue项目当中的应用-开发模式

基本使用:

  1. 下载vue-loader
npm install -D vue-loader vue-template-compiler
  1. 下载其他的依赖(plugin , loader等..)
什么插件没下就下什么插件
npm i vue-style-loader eslint-webpack-plugin html-webpack-plugin vue-loader webpack copy-webpack-plugin css-loader postcss-loader postcss-preset-env less-loader babel-loader webpack-cli webpack-dev-server -D
  1. 配置webpack.dev.js文件
// webpack.dev.js
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const { DefinePlugin } = require("webpack");//webpack中专门用于定义环境变量的插件
const CopyPlugin = require("copy-webpack-plugin");

// 封装的一个获取样式的函数
const getStyleLoaders = (preProcessor) => {
  return [
    "vue-style-loader",
    "css-loader",
    {
      //处理css兼容性问题
      //配合package.json中的browserslist来指定兼容性
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {
    path: undefined,//开发模式没有输出 , 使用的是开发服务器
    filename: "static/js/[name].js",  
    chunkFilename: "static/js/[name].chunk.js",
    assetModuleFilename: "static/js/[hash:10][ext][query]", // 本地资源命名
  },
  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"
      ),
    }),
    // html资源整合插件
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "../public"),
          to: path.resolve(__dirname, "../dist"),
          toType: "dir",
          noErrorOnMissing: true,
          globOptions: {
            ignore: ["**/index.html"],
          },
          info: {
            minimized: true,
          },
        },
      ],
    }),
    new VueLoaderPlugin(),
    // 解决页面警告
    //cross-env定义的环境变量是给打包工具使用的
    //DefinePlugin定义的环境变量是给源代码使用的,从而解决Vue3页面警告问题
    new DefinePlugin({
      __VUE_OPTIONS_API__: "true",
      __VUE_PROD_DEVTOOLS__: "false",
    }),
  ],

  // 压缩优化设置区域   
  optimization: {
    // 代码分割
    splitChunks: {
      chunks: "all",
    },
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`,
    },
  },
  //webpack解析模块的加载选项问题
  resolve: {
    extensions: [".vue", ".js", ".json"], // 自动补全文件扩展名，让vue可以使用
  },
  //开发服务器
  devServer: {
    open: true,
    host: "localhost",
    port: 3000,
    hot: true,
    compress: true,
    historyApiFallback: true, // 解决vue-router刷新404问题
  },

  // 开发模式
  mode: "development",
  devtool: "cheap-module-source-map",
};
  1. 配置.eslintrc.js文件
// Eslint语法检查
module.exports = {
    root: true,
    env: {
      node: true,//启用node的环境变量
    },
    extends: ["plugin:vue/vue3-essential", "eslint:recommended"],//继承vue3的官方规则和eslint默认的规则
    parserOptions: {
      parser: "@babel/eslint-parser",//解析选项使用babel
    },
  };
  1. 配置babel.config.js文件
module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"],//预设使用vue团队的即可
};
  1. 随便配置点Vue代码
  • main.js
// 使用的是Vue3
import { createApp } from "vue"//引入 createApp
import App from './App' 

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

// 创建app并挂载到对应的元素上
createApp(App).use(router).mount(document.getElementById("app"));
  • router.js
import {createRouter , createWebHistory} from 'vue-router'

// 路由懒加载
const Home = () => import('../views/Home')
const About = () => import('../views/About')

export default createRouter({
    // 路由模式
    history: createWebHistory(),
    // 路由规则配置
    routes:[
        {
            path: '/home',
            component: Home
        },
        {
            path: '/about',
            component: About
        }
    ]
})
  • App.vue
<template>
    <h1 class="app">hello! App</h1>
    <Home/>

    <router-link to="/home">Home</router-link><br><br>
    <router-link to="/about">About</router-link>

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

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

<style scoped>
    .app{
        color: aqua;
    }
</style>
  1. 配置运行指令(再package.json中)
"scripts": {
  "start": "npm run dev",
  "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.js",
  "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js"
},
  1. 初始化项目以及运行指令
# 初始化项目
npm init -y

# 打包项目
npm start

结果展示:(实现热模替换且其他功能运行成功)

image