webpack4 极速配置

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

1、首先新建一个文件夹，初始化一个项目，生成package.json文件

npm init -y

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

npm install webpack-cli --save-dev

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文件，开发环境并没有压缩，而生产环境进行了压缩等操作

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

最终结果是这样的