学习webPack的作用

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

工作原理

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

安装webPack

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

npm install -g webpack

3. 初始化项目
   打开控制台，进入我们刚才建立的文件夹，输入下面的命令行，这时候我们会看到 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"
}

4. 建立配置文件

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的简单的认识，如有不足的地方，望提醒