（二）webpack核心概念

 webpack的5个核心概念

1、entry：入口(entry)指示webpack以哪个文件作为入口起点开始打包，分析构建内部依赖图。

2、output：输出 (output)指示webpack打包后的资源bundles输出到哪里，以及如何命名。

3、 loader：loader让webpack能够去处理那些非JavaScript资源css、img等，将它们处理成webpack能够识别的资源，可以理解成一个翻译过程(webpack自身只能理解js和json) 。

4、plugins：插件(plugins)可用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

5. mode：模式(mode)指示webpack使用相应模式的配置。

    ··开发模式(development) :配置比较简单，能让代码本地调试运行的环境。

    ··生产模式(production):代码需要不断优化达到性能最好。能让代码优化上线运行的环境。ps：都会自动启用一些插件，生产模式使用插件更多

1. 基本使用

1. 在项目下创建配置文件“webpack.config.js”（名称使用的默认的，最好不要改名），配置而文件的作用是：当每次只输入webpack命令不加任何参数的时候，默认会找到配置文件，按照配置文件中的指令进行加载。
2. 在配置文件中，module.exports={五大核心配置项}

   const { resolve } = require('path')  //导入node里的包，使用resolve()方法自动找到项目当前目录
   module.exports = {
     entry: './src/index.js',  //指定以index为入口文件开始打包
     output: {
       filename: "build.js",  //指定打包后的名称为build
       path: resolve(__dirname, 'build')  //参数一当前根目录名(固定),参数二是打包输出的目录名
     },
     module:{
       //loader:处理非js的资源，翻译成能够识别的资源
       rules:[]  //处理规则
     },
     plugins:[
       //放插件，可以辅助loader，也可单独使用，比loader功能更强大
     ],
     mode: 'development'  //生产模式
   }

   输入webpack运行就可以在对应位置看到打包后的资源

 2. 多入口和多出口的情况（entry，outp