Webpack课程

拆分配置和merge

//webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
  entry: {
    //代码分割
    //把需要改变的业务代码提取出来，把那些不会改变的库文件放在一个单独的js文件中，依据js引擎的异步执行
    main: './src/index.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          { loader: 'babel-loader' },
          // { loader: 'import-loader?this=>window' },
        ]
      },
      {
        test: /\.png$/,
        use: {
          //打包图片
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
          },
        },
      },

    ],
  },
  //plugin:在webpack运行的某个时刻，帮你处理点事情
  plugins: [
    //htmlwebpackPlugin会在打包结束后自动生成一个html文件，并引入打包完成的js文件
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    //默认情况下，这个插件将删除webpack输出中的所有文件
    new CleanWebpackPlugin(),
    //自动为所需要第三方库的文件引入第三方库    代码耦合性低 shimming 垫片
    new webpack.ProvidePlugin({
      $: 'jquery'
    })
  ],
  output: {
    publicPath: '/',
    //cdn
    // publicPath: 'http://cdn.com.cn',
    path: path.resolve(__dirname, '../dist'),
    //和CleanWebpackPlugin插件一样（目前理解）
    // clean: true
  },
  optimization: {
    //tree-shaking,只能在production环境下使用，只支持ES Module

    usedExports: true,
    //webpack代码分割：同步代码分割（依赖如下配置），异步代码分割（内置实现，自动进行代码分割）
    splitChunks: {
      //async:代码分割只对异步代码生效;all:同步代码分割
      chunks: 'all',
      //引入库文件超过20000才进行代码分割
      minSize: 20000,
      minRemainingSize: 0,
      //改模块至少用了1次才进行代码分割
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      //对需要代码分割的一些要求：test
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          //优先级
          priority: -10,
          filename: 'vendor.js',
          //打包文件复用
          reuseExistingChunk: true,
        },
        //默认
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
          filename: 'common'
        },
      },
    }
  },
}

//webpack.dev.js
const webpack = require('webpack')
const { merge } = require("webpack-merge")
const commonConfig = require('./webpack.common')
const devConfig = {
  //development和production的区别:
  mode: 'development',
  //source-map 打包的文件代码出错映射到源文件中
  //production 'cheap-module-source-map'
  //development 'cheap-module-eval-source-map'
  devtool: 'eval',
  // watch: true,
  //把dist目录放在了电脑内存中，加快了打包速度
  devServer: {
    contentBase: './dist',
    port: 3000,
    open: true,
    //开启热更新
    hot: true,
    // hotOnly: true
  },
  module: {
    rules: [
      //打包样式
      //注意执行顺序，栈执行，后进先出
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              //可以在css文件中使用前两个loader打包编译import文件，比如scss文件等
              importLoaders: 2,
              //开启css的模块化打包,样式不会有冲突
              modules: true,
            },
          },
          'sass-loader',
          // 给样式加上厂商前缀
          'postcss-loader',
        ],
      },
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  output: {
    //打包多个文件，[]占位符，name指的是entry选项中默认的key值
    filename: '[name].js',
    chunkFilename: '[name].js',
  }

}
module.exports = merge(commonConfig, devConfig)

//webpack.prod.js
const { merge } = require("webpack-merge")
const commonConfig = require('./webpack.common')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const prodConfig = {
  //development和production的区别:
  mode: 'production',
  //source-map 打包的文件代码出错映射到源文件中
  //production 'cheap-module-source-map'
  //development 'cheap-module-eval-source-map'
  devtool: 'cheap-module-source-map',
  plugins: [new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: "[name].chunk.css"
  })],
  module: {
    rules: [
      {
        test: /\.css$/i,
        //单独存放打包css文件
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },

    ],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
  output: {
    //打包多个文件，[]占位符，name指的是entry选项中默认的key值
    //配置【contenthash】配置缓存
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js',

  }
module.exports = merge(commonConfig, prodConfig)