配置示例

shell

yarn add vue
yarn add -D webpack webpack-cli webpack-dev-server
yarn add -D typescript pug sass
yarn add -D vue-loader vue-template-compiler vue-style-loader
yarn add -D pug-plain-loader style-loader css-loader sass-loader
yarn add -D file-loader url-loader
yarn add -D friendly-errors-webpack-plugin clean-webpack-plugin html-webpack-plugin
yarn add -D cross-env

json

"scripts": {
  "serve": "cross-env NODE_ENV=development webpack-dev-server --mode=development",
  "build": "cross-env NODE_ENV=production webpack --mode=production"
},

const path = require("path"); //用于处理模块路径
const webpack = require("webpack"); //用于引入webpack内的模块
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");

const mode = process.env.NODE_ENV;
const isProduction = mode == "production";
const isDevelopment = mode == "development";
module.exports = {
  mode,
  entry: {
    // 入口配置
    main: "./src/index.ts",
  },
  output: {
    // 出口配置
    filename: `[name].[hash:8].entry.js`,
    chunkFilename: `[name].[chunkhash:8].chunk.js`,
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      // 加载器相关配置
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.sass$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              // implementation: require('sass'), 默认
              sassOptions: {
                indentedSyntax: true, // sass 语法默认不支持，需要手动设置
              },
            },
          },
        ],
      },
      {
        test: /\.pug$/,
        use: ["pug-plain-loader"],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["file-loader"],
      },
      {
        test: /\.(png|jpg|gif)/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192, // 配置转换大小
              // fallback: 'file-loader' // 默认使用 file-loader
            },
          },
        ],
      },
    ],
  },
  plugins: [
    // 插件相关配置
    new webpack.ProgressPlugin({
      activeModules: false,
    }),
    new webpack.HotModuleReplacementPlugin(), // HMR 插件
    new webpack.NamedModulesPlugin(), // 开启 HMR 时显示模块相对路径
    new FriendlyErrorsPlugin({
      compilationSuccessInfo: {
        messages: ["当前地址: xxx"],
      },
    }),
    new CleanWebpackPlugin(), //每次打包删除 resolve.path 文件夹下文件
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      title: "Markdown-Editor",
      filename: "index.html",
      template: "src/index.html",
    }),
  ],
  resolve: {
    // 模块解析相关配置,
    alias: {
      "@": path.resolve(__dirname, "src/"),
    },
    extensions: [".js", ".ts", ".json", ".vue"],
  },
  devtool: isDevelopment && "cheap-module-eval-source-map", // source map 相关配置
  devServer: {
    // webpack-dev-server 相关配置
    hot: true,

    stats: {
      all: false,
      modules: true,
      maxModules: 0,
      errors: true,
      warnings: true,
      color: true,
    },
  },
  optimization: {
    // 优化处理相关配置
    splitChunks: {
      // cacheGroups: {
      //   vue: {
      //     test: /[\\/]node_modules[\\/]vue/,
      //     name: 'vue',
      //     chunks: 'all',
      //   },
      //   monaco: {
      //     test: /[\\/]node_modules[\\/]monaco/,
      //     name: 'monaco',
      //     chunks: 'all',
      //   }
      // }
      chunks: "all",
      // minSize: 1 // 若公共依赖足够小是不会进行单独提取的, 这里仅为实现提取效果
    },
  },
  externals: {
    // 外部扩展相关配置, 即在 bundle 中去除指定依赖, 该选项通常用于构建目标为 library 的场景
  },
};

配置示例 ​

配置示例