Webpack 4的最快配置

Webpack升级到4之后，极大简化了初始化一个项目的过程，它默认不需要配置文件，但其实是不用配置entry和output，其他还是需要新建webpack.config.js文件的。

1、首先新建一个文件夹，初始化一个项目

npm init -y

配置文件package.json文件生成如下

{
  "name": "TestWebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2、安装webpack-cli，这里我建议以下的安装都进行本地安装，不要全局安装，避免与其他项目造成冲突

npm install webpack-cli --save-dev

等同于如下，具体用法参看：npm 用法

npm i -D webpack-cli

3、安装webpack

npm install webpack --save-dev

创建完成后目录结构是这样的

image

上面说过了，webpack4已经默认了entry和output，entry默认的是根目录下src的index.js，所以新建一个src/index.js，简单的写点东西，如下：

image

然后在package.json中添加两条命令，在之前的版本中，通常需要定义两个配置文件，dev和prod一个开发一个生产，那么在最新的版本中我们只需要这样：

image

分别运行 npm run dev 和 npm run build，我们会发现多出来一个dist文件夹相对应的输出main.js文件，开发环境并没有压缩，而生产环境进行了压缩等操作

mode配置
开头先讲一个 webpack4 中新增的选项：mode。可能是受 parcel(https://parceljs.org/) 的刺激，webpack4 终于也可以零配置打包了，主要原因是 webpack 终于明白了一个道理：约定大于配置。
model 的值有三种：production、development、none ，分别表示不同模式。
在 production 模式下，会默认启用下面这些插件：

process.env.NODE_ENV 的值设为 production
FlagDependencyUsagePlugin：删除无用代码
FlagIncludedChunksPlugin：删除无用代码
ModuleConcatenationPlugin：作用域提升
NoEmitOnErrorsPlugin：编译出现错误，跳过输出阶段
OccurrenceOrderPlugin
SideEffectsFlagPlugin
UglifyJsPlugin：js代码压缩

在 development 模式下，会默认启用下面这些插件：

process.env.NODE_ENV 的值设为 development
devtool 设置为 evel
NamedChunksPlugin
NamedModulesPlugin

4、接着往下，到目前为止我们还没有一个前端页面，同样在 src 文件夹下新建index.html文件，初始化内容不用做任何操作；然后安装对html打包的插件 HtmlWebpackPlugin

npm install--save-dev html-webpack-plugin

新建 webpack.config.js文件并进行如下配置：

image

在上面的index.js文件中执行一下那个函数，然后终端执行 npm run dev，文件已经被打包到了dist文件夹下，浏览器打开index.html我们会看到打印出来的test

image

5、安装简单的web服务器，并添加热加载 webpack-dev-server

npm install--save-dev webpack-dev-server

修改配置文件 webpack.config.js 和 package.json，配置完成后就可以运行 npm run dev在浏览器查看了，并且支持热加载

image image

6、其他插件以及加载器

加载css

npm install--save-dev style-loader css-loader

加载图片

npm install--save-dev file-loader

build前删除dist文件夹

npm installclean-webpack-plugin --save-dev

最终结果是这样的

image image