带你了解webpackwebpack.config.js就是webPack的配置文件，这个文件需要我们手动建立在项目的根

学习webPack的作用

如果你从事前端工作，那你一定用过或者听说过webPack，现在最流行的三个前端框架（Vue.js, React.js, AngluarJS）都与webPack紧密相连，如果想让我们前端技术有一个质的提升，那你不得不了解学习webPack，否则你向前端进步的脚步会受到阻碍，

工作原理

将项目作为整体，通过给定的主文件（如： index.js）从主文件开始找到项目的所有依赖的文件，使用loaders处理她们，最后打包为一个或者多个，浏览器可以识别的javaScript文件，注意：webpack只能打包commonJS的规范下的js文件

安装webPack

创建一个文件夹（webpack_demo）
全局安装webPack

npm install -g webpack

初始化项目打开控制台，进入我们刚才建立的文件夹，输入下面的命令行，这时候我们会看到 package.json文件

npm init

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ybb",
  "license": "ISC"
}

建立配置文件

webpack.config.js就是webPack的配置文件，这个文件需要我们手动建立在项目的根目录下。 webpack.config.js主要分为5大模块：

module.exports = { entry: {}, //入口文件 output: {}, // 出口文件 module:{}, // 模块 plugins: {}, // 插件 devServer：{} // webpack开发服务功能 }

webpack.config.js配置

这里才是我们今天的重点之重，webpack的所有的知识点都在这里，必须画重点了，接下来让我们一起了解webpack各个配置的具体作用

入口文件配置项--entry

入口配置项里面放的文件，表示我们从哪里开始打包我们的文件， entry有三种方式：

第一种：表示文件只有一个入口index.js文件，即只打包一个index.js文件

    module.exports = {
      entry：{
        index: './index' 
      }
    }

第二种：打包多个同级文件，会被打包到同一个文件里面

    module.exports = {
      entry：['./index1','./index2']
    }

第三种：打包多页面,会被打包到不同的文件里面

    module.exports = {
      entry：{
      index1: './index1',
      index2: './index2'
	  }
    }

出口文件配置项--output

出口文件的配置项，表示打包后的文件所在的地方这里面有三个参数：

path：表示打包后的文件所在位置，图例是放在dist文件夹下面
filename：表示打包后文件的名字，【name】表示源文件的名字，一搬会用到【chunkhash】表示版本，当文件发生变化的时候chunkhash变化，否则不变
publicPath: 打包后引入js文件路径会统一加个./

    module.exports = {
	    output:{
	      path: path.resolve(__dirname, 'dist'),
	      filename: '[name].bundle.js',
	      publicPath: './' 
	    }
    }

模块配置项--module

模块主要是解析css和图片转换压缩等功能，其实说白了就是处理非js文件，将文件转化为webpack可以处理的有效模块。值得注意下：之前webpack配置加载器的时候使用loaders，但是现在使用rules，所以下面主要对rules进行讲解 module一般有一下几个配置项

test: 用于匹配文件的扩展名，进而识别应该被loader转化的文件。【必填】
use: loader的名称，执行顺序从后向前【必填】
include: 手动添加必须处理的文件，可以加快webpack的搜索速度，用于优化loader 【可选】
exclude：手动添加需要排除的文件，和include一样都可以优化loader【可选】
loader：它和use一样都是表示loader的名字，区别是一个是use是数组可以加载多少，而loader只加载一个

   module.exports = {
    module：{
         rules: [{
   			test: /\.css$/,  // 匹配后缀为.css的文件
   			use: ['style-loader', 'css-loader'], 
   			include: path.resolve(__dirname, src), //  加载src目录下的js文件
   			exclude: path.resolve(__dirname, 'node_modules') ｝// 排除node_modules 文件
   		] 
       }
   }

插件--plugins

用于扩展webpack的功能，引入项目需要的插件

   module.exports = {
    plugins：{
         new HappyPack({
           id: 'js',
           cache: true,
           loaders: ['babel-loader?cacheDiretory=true'],
           ThreadPool: happThreadPool
          })
       }
   }

开发服务器功能 -- devServer

用于监听你的代码的修改，并自动刷新显示修改后的结果，devServer是一个本地开发服务器，基于node.js构建。它有以下配置项： contentBase: 本地服务器加载的页面所在的目录

host：设置服务器Ip
compress：表示服务端压缩是否开启
port：配置服务器端口号
inline：表示是否实时刷新

   module.exports = {
    devServer：{
         contentBase: path.resolve(__dirname, 'dist'), //加载dist文件夹下面的文件
         host: 'localhost', 
          compress: true, // 开启服务器压缩
           port: 1717, // 端口号是1717
           inline: true // 实时刷新
       }
   }

以上是本人对webpack的简单的认识，如有不足的地方，望提醒