Entry，入口，这是Webpack执行构建的第一步，可理解为输入。 Module，模块，在Webpack中一切皆模块，一个模块即为一个文件。Webpack会从Entry开始递归找出所有的依赖模块。 Chunk，代码块，一个Chunk由多个模块组合而成，它用于代码合并与分割。 Loader，模块转换器，用于将模块的原内容按照需求转换成新内容。 Plugin，扩展插件，在Webpack构建过程的特定时机注入扩展逻辑，用来改变或优化构建结果。 Output，输出结果，源码在Webpack中经过一系列处理后而得出的最终结果。

loader:加载器加载器是用来加载文件的,webpack本身只能加载JS文件(内置babel-loader)加载其它文件就需要另外安装loader,比如css-loader可以把CSS转成style标签,又比如file-loader可以加载图片对图片进行一些优化 plugin:插件插件是用来增强功能的,比如HtmlWebpackPlugin是用来生成HTML的,比如MiniCssExtractPlugin它是用来抽取css生成css文件的 loader 就是个箭头函数，经过处理之后return 返回的是一段 js代码的字符串（用JSON.stringify），loader负责资源文件从输入到输出的转换 plugin 是一个函数或者是一个包含 apply 方法的对象 compiler.hooks.emit.tap()

webpack.common.js

const path = require('path');
//yarn add html-webpack-plugin --dev 自动生成HTML插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//插件加载
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  //打包入口文件
  entry: path.join(__dirname, './src/main.js'),
  output: {
    //打包输出路径
    path: path.join(__dirname, './dist'),
    //输出，
    filename: '[name].[hash:6].js'
  },
  //配置项通过别名来把原导入路径映射成一个新的导入路径
  resolve: {
    //在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在
    extensions: ['.js', '.vue', '.json'],//用于配置在尝试过程中用到的后缀列表
    alias: {
      'assets': path.join(__dirname, 'assets'),
      'pages': path.join(__dirname, 'src/pages'),
      'public': path.join(__dirname, 'public'),
      'components': path.join(__dirname, 'src/components')
    }
  },
  module: {
    rules: [
      {
        //yarn add eslint-loader --dev
        test: /\.(js|vue)$/,
        use: 'eslint-loader',
        enforce: 'pre'
      }
    ]
  },

  plugins: [
    //自动生成HTML插件
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
    new VueLoaderPlugin()
  ]
}

webpack.prod.js

const path = require('path');
const { merge } = require('webpack-merge')
const baseConfig = require('./webpack.common')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const common = require('./webpack.common')

module.exports = merge(common, {
  mode: 'production',
  devtool: 'none',
  optimization: {
    usedExports: true,
    minimize: true,
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.css?$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.styl(us)?$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader']
      },
      {
        test: /\.(js|vue)$/,
        use: 'eslint-loader',
        enforce: 'pre'
      }, {
        test: /\.less?$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      }, {
        test: /\.vue$/,
        use: 'vue-loader'
      }, {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }, {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: {
          loader: 'url-loader'
        }
      }, {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        use: {
          loader: 'url-loader'
        }
      }, {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: {
          loader: 'url-loader'
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.join(__dirname, 'assets'),
          to: 'assets'
        }
      ]
    })
  ]
})

webpack.dev.js

const webpack = require('webpack')
const { merge } = require('webpack-merge')
const baseConfig = require('./webpack.common.js')

module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    clientLogLevel: 'warning',//日志级别
    hot: true,
    open: true,
    contentBase: path.join(__dirname, './dist'),
    publicPath: '/',
    // overlay: { warnings: false, errors: true },
  },

  module: {
    rules: [
      {
        //css文件处理
        test: /\.css?$/,
        //执行顺序从右到左
        use: ['vue-style-loader', 'css-loader']
      },
      {
        test: /\.styl(us)?$/,
        use: ['vue-style-loader', 'css-loader', 'stylus-loader']
      },
      {
        test: /\.(js|vue)$/,
        use: 'eslint-loader',
        enforce: 'pre'
      }, {
        test: /\.less?$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      }, {
        test: /\.vue$/,
        use: 'vue-loader'
      }, {
        test: /\.js$/,
        exclude: /node_modules/,//很重要
        use: {
          loader: 'babel-loader'
        }
      }, {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024,
            esModule: false,
          }
        }
      }, {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000,
          }
        }
      }, {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000,
          }
        }
      }
    ]
  },

  plugins: [
    //热更新
    new webpack.HotModuleReplacementPlugin()
  ]
})

2.2 作业

2.2 作业

webpack.common.js

webpack.dev.js