简单说说webpack的配置文件

webpack是前端最流行的打包工具之一，我们应该当对其有所了解；
来看一下webpack的配置文件：

module.exports = { //暴露出去的对象
  context: path.resolve(__dirname, '../'), 上下文
  entry: {  // 打包的文件入口 
    app: './src/main.js' // String Object Array
  },
  output: { // 打包文件的输出
    path: config.build.assetsRoot, //输出路径
    filename: '[name].js', //输出文件的命名根据entry里的app命令最终是app.js
    publicPath: process.env.NODE_ENV === 'production' //请求资源的静态绝对路径
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: { //模块的解析 代码中引入模块的相关解析
    extensions: ['.js', '.vue', '.json'], //import模块文件自动补全文件路径
    alias: { //别名 require路径中可以使用别名缩短长度
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: { //模块 处理各种资源文件
    rules: [    //根据不同文件的后缀用不同的loader去处理
      // ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/, //正则匹配.vue结尾的文件
        loader: 'vue-loader', //使用vue-loader处理
        options: vueLoaderConfig //loader的可选项
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
  plugins: [ // 插件列表
    // ...
  ],
}

webpack中的核心概念总结起来就是Entry、Output、Loaders、Plugins、Chunk。
Entry：指定webpack构建模块的入口文件，并且构建直接或者间接引入的模块。 Output：指定webpack输出文件的命名以及路径。 Loaders：处理各种资源文件如js、sass、less，将这些文件处理成webpack能够处理的模块。 Plugins：对文件的压缩、打包、甚至重新定义环境中的变量。 Chunk：其实就是将一些代码打包成一个单独的chunk，比如某些公共模块，去重，更好的利用缓存。或者按需加载某些功能。