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
创建完成后目录结构是这样的
上面说过了，webpack4已经默认了entry和output，entry默认的是根目录下src的index.js，所以新建一个src/index.js，简单的写点东西，如下：
然后在package.json中添加两条命令，在之前的版本中，通常需要定义两个配置文件，dev和prod一个开发一个生产，那么在最新的版本中我们只需要这样：
分别运行 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文件并进行如下配置：
在上面的index.js文件中执行一下那个函数，然后终端执行 npm run dev，文件已经被打包到了dist文件夹下，浏览器打开index.html我们会看到打印出来的test
5、安装简单的web服务器，并添加热加载 webpack-dev-server
npm install--save-dev webpack-dev-server
修改配置文件 webpack.config.js 和 package.json，配置完成后就可以运行 npm run dev在浏览器查看了，并且支持热加载
6、其他插件以及加载器
加载css
npm install--save-dev style-loader css-loader
加载图片
npm install--save-dev file-loader
build前删除dist文件夹
npm installclean-webpack-plugin --save-dev
最终结果是这样的
