webpack之输出路径处理

前言：

• 本文演示了如何通过配置webpack.config.js来优化最后build成功的dist目录。
• 最后留了一个问题待解决
  

正文：

紧接上文《 webpack之重新认知babel-loader 》项目目录：

执行 npm run build之后，查看dist下面打包结果，简直乱作一锅，我们原本src下目录结构规划的很好啊(¬_¬)！

优化dist目录

目标目录结构：

1、安装插件clean-webpack-plugin。

它的作用是在每次build之前，清除dist目录。

$ npm i -D clean-webpack-plugin

在webpack.config.js中配置clean-webpack-plugin插件：

2、配置js输出到dist/assets/js目录下：

3、配置生成的index.html输出目录：

4、配置图片输出目录

其中[name]是图片原理的名字，[ext]是之前的后缀名。

5、配置字体输出目录

执行 npm run build ，输出的dist目录和我们预想的一样。

6、出现问题

但是，在浏览器打开dist/index.html文件，发现图片和字体图标都不能正常加载，但是js却正常加载了（html-webpack-plugin的功劳）！

如何解决？