分类
webpack

如何使用webpack优化我们的项目

使项目更加合理

让项目兼容性更强

需要下载

    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.24.1",

webpack.config.js

module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
            }
        ]
    }

.babelrc

{
  "plugins": [
    [
      "transform-runtime",
      {
        "polyfill": false
      }
    ]
  ],
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ],
    "stage-2"
  ]
}

使项目加载速度更快

查看我们项目加载情况

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 plugins: [
        new BundleAnalyzerPlugin(),
    ],

代码压缩分割

optimization: {
    splitChunks: {
      chunks: 'async', // initial 对入口文件拆分 all都包括
      minSize: 30000, // 小于这个数不拆分
      minChunks: 1, // 引入次数必须大于等于这个数才拆分
      maxAsyncRequests: 5, // 动态加载的js最多被拆分成5分
      maxInitialRequests: 3, // 入口文件最多拆分成三分
      automaticNameDelimiter: '~', // 名称分隔符
      name: true, // 默认是chunk的名字通过分隔符分割
      cacheGroups: { // 缓存组
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10 // 默认优先级
        },
        default: { // 其他第三方代码
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true // 已经拆分出来的代码是否被重用
        }
      }
    }
  }

多设置一个入口来分割代码

 entry: {
    index: './src/index.js',
    another: './src/another-module.js'
  },