webpack打包注意点(一)

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内