归纳webpack - 技术栈

常用配置项

javascript 复制代码

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通常用于生成HTML
const MiniCssExtractPlugin = require('mini-css-extract-plugin');// 用于分离CSS
{
  mode: 'development',
  devtool: 'source-map',
  entry: {
    // key: index作为打包后的产物名称 与output中的 【name】对应
    index: path.resolve(__dirname, './src/index.tsx')
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[contenthash:8].js',
    // const TipPage = import(/* webpackChunkName: "tipPage" */ '@/views/TipPage')  
    // 该组件打包后变成 tipPage.chunk.js
    chunkFilename: '[name].chunk.js',
    assetModuleFilename: '[name].[contenthash][ext]',
    clean: true
  },
  resolve: {
    // 用于导入模块时不需要写出完整的文件名
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          //抽离css除了配置插件 还需配置该loader
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ]
  },
  plugins: [
  	// 在组件中无需再引入react和loadsh
  	new webpack.ProvidePlugin({
      _: 'lodash',
      react: 'react'
    }),
    // 直接实例化插件
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        // 将所有node_modules中的代码打包到vendor chunk中
        return module.context && module.context.includes('node_modules');
      }
    }),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'styles.css'
    })
  ]
  // webpack编译的时候只输出错误和警告信息
  stats: 'errors-warnings',
  devServer: {
  	// 控制台只输出错误和警告信息
    stats: 'errors-warnings',
    hot: true,
    port: 3000,
    // 解决history路由刷新页面404问题。
    // Webpack Dev Server 在找不到路由对应的文件时，始终返回 index.html，以保证前端路由可以正确处理。
    historyApiFallback: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8888',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
    client: {
      // 配置是否在浏览器中显示编译错误或警告的覆盖层
      overlay: false,
    },
  },
}

一般打包优化配置

javascript 复制代码

{
  bail: true, // 在构建过程中遇到第一个错误时立即停止构建，并返回错误信息
  // 配置项包名不会被打包，而是直接从window中取（需要将忽略的包在index.html中引入）
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
  optimization:{
	 splitChunks: {
	   cacheGroups: {
	   	//node_modules[中的文件会被打包到定义好的chunkFilename即vender.js文件中
	     vendor: {
	       name: 'vendors',
	       test: /[\\/]node_modules[\\/]/,
	       chunks: 'all',
	     },
	     default: {
	       // 非node_modules产物打包后文件名由entry配置决定
	       minChunks: 2,
	       priority: -20,
	       reuseExistingChunk: true, // 复用打包好的模块
	     },
	   },
	 },
  }
}

缓存

javascript 复制代码

// 内存缓存: 速度快，配置简单，但占用内存且重启后失效
cache: {
  type: 'memory',
}

// 磁盘缓存 (filesystem)：持久性好，适合大型项目，但速度较慢，配置相对复杂。
cache: {
  type: 'filesystem',
  buildDependencies: {
    config: [__filename], // 配置文件的路径
  },
  cacheDirectory: path.resolve(__dirname, '.cache'), // 缓存目录
}

// 总结：
1、开发模式用内存缓存，电脑内存不够的误用；
2、生产模式用磁盘缓存，持久化缓存，进程重启后仍然可以使用缓存