webpack打包注意点
一、配置文件
- 打包文件存放路径,执行npm run build命令之后,所有静态资源都放置在dist/static下(webpack.prod.conf.js)
- dist/static文件目录解释:css存放样式,fonts放置icon文件,img放置图片资源,js项目js逻辑,media放置音频资源
- 生成目录的配置(webpack.base.conf.js):
二、element-ui使用注意点
- 若是自定义了样式,那么在main.js 当中,引入位置应当如此,否则打包之后,自定义的样式将被element自身的样式覆盖:
三、图片注意点
- 打包图片时,应当注意所有写在js逻辑当中的动态切换图片的写法,在打包之后,都会失效,解决方案有一下几个:
- 一种是将所有动态切换的图片全部都提前用<img>标签写在页面上,用display样式去控制显示或隐藏
- 二种是将所有动态的图片路径在打包之前,修改为(../dist/static/img/xx.png)其中,dist为项目名,static为静态资源,img为图片存放目录,而做此项操作,需要对一下文件(webpack.base.conf.js)做修改,limit改为100,即为大于100k的图片不压缩为base64,如此才能保证上方的路径正确
- 三种将所有动态图片路径改为修改class名,将图片放置在class内