# 前言

webpack在前端化过程中十分重要，所以花了一段时间学习webpack，以及webpack4新特性，本文是按照从易到难的过程，梳理部分webpack概念，常见的loader，plugins，webpack4新特新，还有部分高级概念。

webpack需要掌握的核心概念👇

• Entry:webpack开始构建的入口模块
• Output: 如何命名输出文件，以及输出目录，比如常见的dist目录。
• Loaders:作用在于解析文件，将无法处理的非js文件，处理成webpack能够处理的模块。
• Plugins:更多的是优化，提取精华(公共模块去重)，压缩处理(css/js/html)等，对webpack功能的扩展。
• Chunk: 个人觉得这个是webpack 4 的Code Splitting 产物，抛弃了webpack3的CommonsChunkPlugin,它最大的特点就是配置简单，当你设置 mode 是 production，那么 webpack 4 就会自动开启 Code Splitting，可以完成将某些公共模块去重，打包成一个单独的chunk。

此次学习webpack4新特性，基本上按照官网来配置的。

如果你跟我一样，在配置自己的webpack中遇到问题，可以来这里找一找思路，希望本文对你更多的是抛砖引玉，对你学习webpack4新特性有所帮助。

# Webpack基础知识

# 什么是webpack

webpack其实我理解就是模块打包工具，将多个模块打包到生成一个最终的bundle.js问题。

目前来看，webpack4.0已经可以打包任何形式的模块。

# 如何安装Webpack

首先确保你有node环境，在终端运行下面指令

node -v
npm -v

出现了两个版本号后，接下来就可以继续学习webpack了，npm包管理工具是必须的。

# 初始化项目

npm init 

这个意思就是为了使项目符合规范，初始化一个项目，这样子使项目符合规范。

接下来就发现，在该根目录下，会生成一个package.json文件，这个文件描述了node项目，node包的一些信息。也就是说，npm init 生成的就是一个package.json文件。

package.json属性说明

	name - 包名.
    version - 包的版本号。
    description - 包的描述。
    homepage - 包的官网URL。
    author - 包的作者，它的值是你在https://npmjs.org网站的有效账户名，遵循“账户名<邮件>”的规则，		例如：zhangsan <zhangsan@163.com>。
    contributors - 包的其他贡献者。
    dependencies / devDependencies - 生产/开发环境依赖包列表。它们将会被安装在 node_module 目录下。
    main - main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
    keywords - 关键字

# 接下来就是安装webpack

 npm install webpack webpack-cli -g   // 全局安装webpack