wabpack和vite的常用配置项

wabpack常用:

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {                // 配置文件输出路径和文件名
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {                // 配置模块加载规则, 使用loader处理不同类型文件
    rules: [    
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: 'file-loader',
      },
    ],
  },
  resolve: {               // 配置模块解析规则, 用于模块的查找路径和后缀名 
    extensions: ['.js', '.json'],
  },
  plugins: [               // webpack插件, 执行代码压缩,资源优化
    // ...
  ],
  devServer: {             // 配置开发服务器
    port: 3000,
    hot: true,
    // ...
  },
  optimization: {          // 配置打包优化选项, 列如代码分割, 压缩
    // ...
  },
  mode: 'development',     // 指定webpack的工作模式,
};

vue-cli中的常用配置

module.exports = {
  publicPath: '/',               // 指定部署应用的基本URL路径
  outputDir: 'dist',             // 打包输出的目录
  assetsDir: 'assets',           // 静态资源输出的目录
  indexPath: 'index.html',       // 指定HTML文件输出的路径
  productionSourceMap: true,     // 是否在生产环境中生成source map(源映射)
  devServer: {                   // 开发过程中的服务
    port: 8080,
    // ...
  },
  transpileDependencies: [],     // 需要通过Bable转译的依赖包
  css: {                         // CSS相关的选项
    sourceMap: true,
    requireModuleExtension: true,
    loaderOptions: {
      css: {
        // ...
      },
    },
  },
  pluginOptions: {              // 用于配置Vue CLI插件选项的配置
    // ...
  },
  chainWebpack: config => {     // 在内部的webpack进行更细粒度的配置
    // ...
  },
};

在vue-cli脚手架中配置CDN加速, 需要进行以下配置

module.exports = { configureWebpack: 
                   { externals: { // 将 Vue.js 指定为全局变量 Vue 
                                  vue: 'Vue',      
                                 }, 
                     }, 
                   };

vite 常用配置

export default {
  root: './src',             // 指定项目根目录
  base: '/',                 // 部署时的基础路径
  build: {                   
    outDir: 'dist',          // 构建输出的目录
    assetsDir: 'assets',     // 指定静态资源输出的子目录
    sourcemap: true,         // 是否生成源映射文件
    minify: true,            // 是否启用代码压缩
    rollupOptions: {         // 配置Rollup打包的选项
      // ...
    },
  },
  server: {                  
    port: 3000,              // 指定开发服务器运行的端口
    proxy: {                 // 用于配置开发服务器的代理转发规则, 用来解决跨域
      // ...
    },
  },
  plugins: [                 // 用于配置vite的插件
    // ...
  ],
};

vue3项目中只需要直接在index.html文件中引入对应CDN文件即可