webpack系列--webpack4.x入门配置基础（一）

一、前言

webpack在不断的迭代优化，目前已经到了4.29.6。在webpack4这个版本中，做了很多优化，引入了很多特性，将获得更多模块类型，.mjs支持，更好的默认值，更为简洁的模式设置，更加智能的chunk，新增的splitChunks来自定义分隔代码块等等。升级待4，在打包速度，代码体积，数量，以及运行效率上有一个飞跃。

 

二、安装webpack4最基础入门

2.1首先初始化npm 项目，npm init初始化，生成package.json

node版本建议8.2以上

npm init -y

npm i webpack webpack-cli webpack-dev-server -D

npm i -D是npm install --save-dev 的缩写，是安装模块并保存到package.json的devDependencies中，主要是开发环境的依赖包。

 

2.2新建src/index.js 和 dist/index.html

 

 

2.3webpack4是零配置

在使用webpack进行打包的时候，默认情况下会将src下的入口文件(index.js)进行打包。

可以直接在终端中输入命令webpack 将当前的内容进行一个简单的打包。

这样dist文件夹下面多了一个main.js文件。

但是有一个黄色警告，mode是webpack中独有的，两种打包环境，一个是开发环境：development，另外一个是生产环境：production。

打包的时候，输入webpack --mode=development或者webpack --mode=production就不会出现警告提示了。

下面是webapck --mode=production命令打包，这个是代码压缩过的，细心的朋友应该也发现打包后小了很多。

 

2.4新建config/webpack.config.js创建文件

在 webpack v4 中，可以无须任何配置，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 配置文件。这比在 terminal(终端) 中手动输入大量命令要高效的多，所以让我们创建一个配置文件：

进入到webpack.config.js文件中进行配置，具体在代码中注释（这里简单的一些，具体的下面会给大家）