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的功劳)!


如何解决?


阅读更多

没有更多推荐了,返回首页