从0-1搭建webpack+vue3+ts

1. 目录结构如下,git地址github.com/DDXY1230/lx…

搭建步骤:

1. 创建目录结构
2. 创建package.json npm init -y
3. 这里用的pnpm安装依赖,可以先安装pnpm npm install pnpm -g
4. 安装依赖pnpm webpack webpack-cli webpack-dev-server
5. 还需要装一些webpack的插件 pnpm add html-webpack-plugin
6. 环境搭建好之后装vuepnpm add vue
7. 安装loader处理vue的单文件组件 pnpm add vue-loader@next pnpm add @vue/compiler-sfc 然后到webpack.config.js中去注册插件 const { VueLoaderPlugin } = require('vue-loader/dist/index')

plugins: [
    new htmlWebpackPlugin({
      template: "./public/index.html"
    }),
    new VueLoaderPlugin(),  // 这里注册才能识别vue单文件组件
    new cleanWebpackPlugin()
  ]

7. 在webpack.config.js中配置支持vue的loader

    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader"
      }
    ]
  },

8. 打包前清除一下dist目录用这个插件pnpm add clean-webpack-plugin
9. 解析css文件pnpm add css-loader pnpm add style-loader 配置lesspnpm add less less-loader

• 配置webpack.config.js =>module=>rules中添加loader

{
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"]
      }

10. 配置ts环境pnpm add typescript pnpm add ts-loader 配置webpack.config.js

{
        test: /\.ts$/,
        loader: "ts-loader",
        options: {
            configFile: path.resolve(process.cwd(), "tsconfig.json"),
            appendTsSuffixTo: [/\.vue$/]
        }
      }

12. 接下来做一个美化webpack样式的功能,通过插件pnpm add friendly-errors-webpack-plugin
13. cdn引入 会先加载cdn,比较考验网速,网速慢会导致网页的白屏事件比较长,优点是体积小

webpack.config.js

const { Configuration } = require("webpack"); //结合下面的注释就有智能提示了
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin")
/**
 * @type {Configuration}
 */
const config = {
  mode: "development",
  entry: "./src/main.ts",
  output: {
    filename: "[hash].js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.ts$/,
        loader: "ts-loader",
        options: {
          configFile: path.resolve(process.cwd(), "tsconfig.json"),
          appendTsSuffixTo: [/\.vue$/],
        },
      },
    ],
  },
  devServer: {
    port: 9009,
    hot: true,
    open: true,
    proxy: {
       /api': {
        target: "",
        rewrite:(path) => {
          return path.replace(/^\/ap/,'')
        }
      }
    }
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      extensions: [".vue", ".ts", ".js"],
    },
  },
  stats: "errors-only",// 关闭一些没用的提示
  plugins: [
    new htmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new FriendlyErrorsWebpackPlugin({
      compilationSuccessInfo: {
        messages: ['You application is running here: http://localhost:8080']
      }
    })
  ],
  externals: {
    vue: 'Vue' // 做性能优化 在index.html加<script src="https://unpkg.com/vue@next"></script>
  }
};
module.exports = config;