search

vuejs-templates / webpack-simple

A simple Webpack + vue-loader setup for quick prototyping.
2.27k stars 894 forks source link

The webpack-simple template is not processing video tag or mp4 file #167

Open leonardojobim opened 6 years ago

leonardojobim commented 6 years ago

The webpack-simple template is not processing the tag below:

<video poster="../../assets/videos/explore.jpg" preload="auto" autoplay muted style="width: 1155px; height: 650px; top: -153px; left: 29.8387px;">
  <source src="../../assets/videos/explore.mp4" type="video/mp4">
  <source src="../../assets/videos/explore.webm" type="video/webm">
</video>

It shows the message: ./src/assets/videos/explore.mp4 Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type.

The solution of @Zhangdroid below looks to work, but I don't know how to apply it to webpack 2. https://github.com/vuejs-templates/webpack/issues/277

Regards,

guillecro commented 6 years ago

Same here, when i build my webpack-simple project the urls are not being transformed like the other urls..

wuyuedefeng commented 6 years ago

you can try to edit build/vue-loader.conf.js

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction,
    postcss: [require('postcss-cssnext')()]
  }),
 // add this line
  transformToRequire: {
    video: 'src',
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

build/webpack.base.conf.js add below code

   {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
    }

it can solve my problem same with you, hope can help you