Webpack4+

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack底层是用commonJS语法规范编写，除此之外，它还支持AMD,CMD,ES6等其它语法规范。

webpack的四个核心概念

• 入口（entry）
• 出口（output）
• loader
• 插件（plugins）

入口

    由entry指定，是内部依赖图的起点，可在webpack.config.js中配置一到多个入口

module.exports{
    entry: './app/entry', // string | object | array
    // 这里应用程序开始执行
    // webpack开始打包
}

webpack的entry支持三种格式：字符串，对象，数组

字符串：适用于只有一个入口文件的情况

对象：适用于有多个入口文件的情况

数组：适用于多个入口文件的情况

出口

 

loader

 

plugins

plugins（插件，是一个数组）:webpack功能的扩展，使它的功能更加的强大

plugins是一个数组，数组中的每一项都是某一个plugin的实例，plugins数组甚至可以存在一个插件的多个实例

loader可以来处理css，但是它却无法独立的从js中抽离出来，那么我们就可以用plugins来实现,webpack 称plugins为其backbone(支柱),一切loader不能做的处理都可由plugins来做。此评价足见其重要性。

 

webpack安装的时候分为全局安装和局部安装，那么为什么还要局部安装呢？

因为项目每个版本所依赖的webpack的版本可能不一样，为了避免全局的冲突，最好再局部安装一下。

 

webpack4.0+与之前版本的一些不同之处

webpack版本更新后将webpack-cli（webpack命令行接口）从webpack中分离出来，因此在安装webpack时要注意将webpack-cli一并的安装下来。

配置webpack流程参考

1、全局安装webpack webpack-cli

npm install webpack webpack-cli -g

2、初始化 npm init

npm init

3、局部安装 webpack 

npm install webpack webpack-cli -D

在这里-D相当于--save-dev

4、配置webpack.config.js(如果此处未配置，webpack4会将通过一个默认的入口（src/index.js）打包，webpack4之前，未配置会报错)

5、webpack(打包)

安装webpack-dev-server服务器