webpack解析ES6、jsx、css、图片字体、代码压缩、热更新使用示例

原理

我们创建的前端项目会用到大都会用到vue或react这些前端框架，这些项目在运行是需要构建的，因为像es6，less和sass，模板语法，vue指令和jsx语法是无法在浏览器中直接执行的，需要构建这样的一个操作来保证项目运行，webpack就是这样一个构建的工具。
webpack是一个打包模块化JavaScript的工具，在webpack里一切文件皆模块，通过Loader转换文件，通过 Plugin 注入钩子，最后输出多个模块组合成的文件。webpack专注于构建模块化的项目。
上图为webpack在官网上的图片，一切文件：JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块，这样的好处是能清晰的描述出各个模块之间的依赖关系，以方便 Webpack 对模块进行组合和打包。 经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。

在项目中webpack做的事情就是：分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
webpack与node ,npm 的关系
webpack是npm生态中的一个模块，可以通过全局安装webpack来使用webpack对项目进行打包；webpack的运行依赖于node的环境，没有node是不能够打包的，但是webpack打包后的项目只是前端的静态资源和后台没有关系，也就是说不依赖于node，有后台能力的都可以部署项目；npm是于Node社区中产生的，是nodejs的官方包管理工具，当你下载安装好node的时候，npm cli 就自动安装好了。正是npm的包管理，使得项目可以模块化的开发，模块化开发大大提高了我们的开发效率，但是模块化开发的文件往往需要额外的处理才能让浏览器识别，手动处理非常繁琐，这就是webpack工具的意义。
目前最新的webpack版本是v4.43.0，安装最新版的webpack版本命令：

npm install --save-dev webpack

npm install 、npm install --save 和 npm install --save-dev 比较？

命令	描述
npm install X	模块安装到项目node_modules目录下;模块依赖不会写入devDependencies或dependencies 节点。如果删除node_modules目录，使用npm install 初始化项目时，运行 npm install 初始化项目时不会下载模块
–	–
npm install --save X(等价于npm install -S X)	模块安装到项目node_modules目录下;模块依赖被写进dependencies 节点;如果删除node_modules目录，使用npm install 初始化项目时，会将模块下载到项目目录（node_modules）下;运行npm install –production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中;可以通过 require() 来引入本地安装的包。
–	–
npm install --save-dev X(等价于npm install -D X)	模块安装到项目node_modules目录下;模块依赖被写入devDependencies 节点。如果删除node_modules目录，使用npm install 初始化项目时，会将模块下载到项目目录（node_modules）下。运行npm install –production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。可以通过 require() 来引入本地安装的包。

 "dependencies"：应用程序在生产环境中需要的包，线上环境需要用到的依赖
 "devDependencies"：应用程序开发测试需要的包，开发时依赖；//减少 node_modules目录的大小以及npm install花费的时间

webpack4.x和3.x比较大的区别：

1、Node环境的升级：不再支持node4.0的版本，最低支持6.11.5。

2、增加了mode的配置，mode:‘production’ | ‘development’ | ‘none’，mode配置当前的开发环境，内置了很多功能，相比之前的版本减少了很多专门的配置。

development：开发环境，就是我们写代码的环境。

production：生产环境，代码放到线上的环境。

对mode不同的配置会启用不同的插件，直观的区别是开发环境的代码不提供压缩，生产环境的代码提供压缩。

3、原生支持处理JSON文件，不需要json-loader

4、webpack4之前，使用extract-text-webpack-plugin插件将css从js文件中分离出来打包，webpack4官方推荐使用 MiniCssExtractPlugin。

5、内置插件uglifyjs-webpack-plugin压缩js

6、CommonsChunkPlugin废弃，代替的是optimization.splitChunks 和 optimization.runtimeChunk

CLI：Command Line Interface(命令行接口)

为了更合适且方便地使用配置，可以在webpack.config.js中对webpack进行配置，CLI 中传入的任何参数会在配置文件中映射为对应的参数。

不使用配置文件时

webpack <entry> [<entry>] -o <output>//webpack 入口文件 -output bundled 文件

npm init
npm install --save-dev webpack webpack-cli//"webpack": "^4.43.0"

app/Greeter.js:定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块

module.exports = function() {
    var greet = document.createElement('div');
    greet.textContent = "Hi there and greetings!";
    return greet;
};

app/main.js:把Greeter模块返回的节点插入页面

const greeter = require('./Greeter.js');
document.querySelector("#root").appendChi