webpack打包assets内容

[zhangzihb]

正在学习这个demo,但是src/assets 的运用不是特别清楚 如果能更新一些webpack打包的资源运用就完美了

[VincentHuang218]

@zhangzihb 可以看看这个：https://github.com/petehunt/webpack-howto

[kenberkeley]

@zhangzihb

src/assets 就是存放一些需要 Webpack 处理的静态资源（与 vue-cli 生成的官方模板是一致的）

例如，您想该目录下的 test.png 的 base64，那么您就可以直接：
import imgBase64 from 'assets/test.png'
然后爱干嘛干嘛。例如，您可以这样玩：

var img = document.createElement('img')
img.src = imgBase64
document.body.appendChild(img)

能使用 import 加载静态资源的关键是，您需要在 Webpack 配置中设定对应的 loader：

modules: {
  loaders: [
    ...
    { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url-loader?limit=8192' },
    ...
  ]
}

在 build/webpack.base.conf.js 中 Line 49 已经配置了

[zhangzihb]

@VincentHuang218 谢谢提供资料

[zhangzihb]

@kenberkeley 非常感谢 昨天遇到的问题是放在 src/assets 中的less文件没有正确的编译,也是webpack配置的问题. 按照您提供的提供的思路 修改配置后解决了对应的问题. 这个demo很棒,摸索出了不少东西!