一、webpack

webpack是一种前端资源构建工具，也是静态模块打包器，根据模块的依赖关系进行静态分析，打包生成对应的静态资源

二、五个核心概念

1.entry

入口文件，有多入口和单入口之分，指示webpack以哪一个文件为入口开始打包，分析构建内部依赖图 
    entry: './src/js/index.js',

2.output

输出，指示打包后的资源输出到哪里去，以及如何命名 
  output: {
    filename: 'js/[name].[contenthash:10].js',//输出文件名
    path: resolve(__dirname, 'build')//输出路径，__dirname是nodejs变量，代表当前文件目录的绝对路径
  },

3.module

一般提供loader处理那些非JavaScript的文件
（1）如果只有一个loader可以直接使用     loader:'文件处理的loader' ，然后在options中做相应的配置
（2）如果有多个loader可以放在use数组中，loader的处理顺序为从右至左，要注意顺序
（3）不同的文件要配置不同的loader处理
（4）正常来说一个文件只能被一个loader处理，当一个文件被多个loader处理的时候一定要知道loader执行的顺序，比如是先执行eslint-loader还是babel-loader（eslint->babel，因为如果先babel后再eslint，如果有语法错误，前面就白做了） 
 module: {
    rules: [
          {
            /*处理less文件*/
            test: /\.less$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              { loader: 'postcss-loader' },
              'less-loader'
            ]
          },
          {
            /*处理css文件*/
            test: /\.css$/,
            use: [
              'style-loader'
              'css-loader',
            ]
          }, 
          {
            /*处理图片文件*/
            test: /\.(png|jpg|jpeg|gif)$/,
            loader: 'url-loader',
                        enforce:'pre',//优先执行，post为延迟执行
            options: {
              limit: 8 * 1024,
              name: '[contenthash:10].[ext]',//对打包后的文件重命名
              esModule: false,//如果需要处理html中的图片，还需要关闭es6模块对图片的处理
              outputPath: 'images'//打包输出的目录
            }
          },
          {
            //其他文件的处理
            exclude: /\.(html|css|js|png|jpg|jpeg|gif)$/,
            loader: 'file-loader',
            options: {
              name: '[contenthash:10].[ext]',
              outputPath: 'media'
            }
          },
    ]
  },

4.plugins

插件用于执行范围更广的任务，包括打包优化、压缩、重新定义环境变量等等... 
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        //html压缩
        collapseWhitespace: true,//溢出空格
        removeComments: true//移除注释
      }
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.[contenthash:10].css'
    }),
    new WorkboxWebpackPlugin.GenerateSW({
      //帮助serviceWorker快速启动
      //删除旧的serviceWorker
      //生成一个serve-worker.js配置文件
      clientsClaim: true,
      skipWaiting: true

    })
  ],

5.mode

指示webpack使用相应模式的配置 
 mode: 'development',
（1）development:能让代码本地调试运行的环境
源代码经过webpack编译处理输出的资源能被浏览器允许，在这个过程中加了一些自动化的操作，让开发效率更高
（2）production：能让代码优化上线的环境
将js中css文件提取出来
代码进行统一压缩
兼容性处理(js/css)
...