Vue3+webpack4框架搭建

1、安装 vue3脚手架

搭建一个基于vue-cli3的项目框架

下载vue-cli

官方文档：https://www.vue3js.cn/docs/zh/guide/installation.html#npm

yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next

运行以下命令来创建一个新项目

vue create vue3-demo

创建好后 会要求你选择哪种预设模式，有几项默认配置后面注有相关模块。最后一个为使用手动配置。（第一个是我手动配置是保存的）

这里选择手动配置（按 上下箭头选择），出现如下选项，选择你需要的（按空格键选择，选择后显示 *）

确定后选择3.x版本

回车之后还会有一些选项需要确认。

这一项是询问是否开启路由的history历史模式，输入Y就开始历史模式，输入n就使用默认的hash哈希模式。关于哈希模式和历史模式的区别，详见官方文档这里。

css预处理器

eslint配置

择在哪里存放Babel，postcss，eslint等配置。如果项目不大可以选择放在package.json里面。但是为了规范起见，最好还是选择第一项，放在专用的配置文件中。

最后还会询问你是否将本次配置作为以后的默认配置，建议N，因为每个项目的情况很可能不一样。

确认后开始创建项目，项目创建完成后会生成如下目录

执行命令 

npm run serve

 成功后会看到如下页面

接下来进行webpack的打包配置

package.json

新建 build文件夹，创建 webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js, env.js结构如下：

env.js

export default "development";

webpack.base.config.js

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html",
      favicon: "./public/favicon.ico",
    }),
    new VueLoaderPlugin({
      runtimeCompiler: false,
    }),
    new webpack.HashedModuleIdsPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        test: /\.(less)$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
          },
        ],
      },
      {
        test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
        loader: "url-loader?limit=1024",
      },
    ],
  },
  resolve: {
    extensions: [".js", ".vue"],
    alias: {
      vue: "@vue/runtime-dom", //vue3作修改，vue2时为‘vue/dist/vue.esm.js’
      "@": resolve("../src"),
      components: resolve("./src/components"),
      views: resolve("./src/views"),
    },
  },
};

webpack.dev.config.js

const path = require("path");
const merge = require("webpack-merge");
const common = require("./webpack.base.config.js");
const fs = require("fs");
fs.open("./build/env.js", "w", function (err, fd) {
  const buf = 'export default "development";';
  fs.write(fd, buf, 0, "utf-8", function (err, written, buffer) {});
});
module.exports = merge(common, {
  devtool: "inline-source-map",
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 8090,
    hot: true,
  },
  output: {
    filename: "js/[name].[hash].js",
    path: path.resolve(__dirname, "../dist"),
  },
  module: {},
  mode: "development",
});

 

生产环境配置  webpack.prod.config.js

const path = require("path");
const merge = require("webpack-merge");
const common = require("./webpack.base.config");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const OptimizeCssAssertsPlugin = require("optimize-css-assets-webpack-plugin");
const fs = require("fs");
fs.open("./build/env.js", "w", function (err, fd) {
  const buf = 'export default "development";';
  fs.write(fd, buf, 0, "utf-8", function (err, written, buffer) {});
});
module.exports = merge(common, {
  mode: "production",
  output: {
    filename: "js/[name].[contenthash].js",
    path: path.resolve(__dirname, "../dist"),
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.DefinePlugin({
      DEV_HOST: "false",
      VERSION: Date.parse(new Date()),
      "process.env": {
        NODE_ENV: '"production"',
      },
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendor: {
          name: "vendor",
          test: /[\\/]node_modules[\\/]/,
          priority: 10,
          chunks: "initial",
        },
      },
    },
    minimizer: [
      new OptimizeCssAssertsPlugin({}),
      new TerserPlugin({
        test: /\.js(\?.*)?$/i,
        cache: true,
        parallel: true,
        sourceMap: false,
        terserOptions: {
          wranings: false,
          output: {
            comments: false,
          },
        },
      }),
    ],
  },
  module: {
    rules: [],
  },
});

配置完成后使用  npm run dev      、   npm run build  命令就可以启动/打包项目了

以上webpack 配置为一些简单的打包配置，可以根据自己的需要添加或修改更多配置

源码地址 ：https://github.com/shuiyi24/vue3-demo.git