关于如何使用webpack打包dist文件

首先我使用的vue里自带build可以直接打包

创建一个webpack.config.js在这个文件夹里加入以下代码 然后直接npm run build就可以了

const path = require("path"); // nodejs内置模块

const HtmlWebpackPlugin = require("html-webpack-plugin"); // 引入插件

const VueLoaderPlugin = require("vue-loader/lib/plugin"); // 引入vue-loader相关插件

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {

  // 本地服务

  devServer: {

    contentBase: path.join(__dirname, "dist"), //本地服务器所加载的页面所在的目录

    compress: true,

    port: 8080, // 端口号

  },

  // 入口路径

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

  // 输出路径

  output: {

    path: path.resolve(__dirname, "dist"),

    filename: "bundle.js",

  },

  mode: "development",

  module: {

    rules: [

      {

        test: /\.vue$/,

        loader: "vue-loader",

      },

      {

        test: /\.js$/,

        exclude: path.resolve(__dirname, "node_modules"), // 不编译node_modules文件夹

        include: path.resolve(__dirname, "src"), // 编译src文件夹

        use: {

          loader: "babel-loader",

          // loader的版本

          options: {

            presets: ["@babel/preset-env"],

          },

        },

      },

      {

        test: /\.(css|less)$/,

        use: ["style-loader", "css-loader", "less-loader"],

      },

      // 文件大小（单位 byte）低于指定的限制时 url-loader

      {

        test: /\.(png|jpg|gif)$/,

        use: [

          {

            loader: "url-loader",

            options: {

              esModule: false,

              // 限制文件大小，小于8k

              limit: 2400 * 1024,

            },

          },

        ],

      },

    ],

  },

  // 插件;html解析时，自动发现js文件，自动生成在html中的script标签内

  plugins: [

    new HtmlWebpackPlugin({

      filename: "index.html",

      template: __dirname + "/public/index.html",

    }),

    new CopyPlugin([

      {

        from: path.resolve(__dirname, "./public/favicon.ico"),

        to: "./",

      },

      {

        from: path.resolve(__dirname, "./public/fonts"),

        to: "./fonts/",

        ignore: [".*"],

      },

    ]),

    new VueLoaderPlugin(), // 引入vue文件必需的插件

  ],

};