nickjj / manifest-revision-webpack-plugin

Write out a manifest file containing your versioned webpack chunks and assets.
ISC License
124 stars 40 forks source link

Nonsupport vue-loader? #11

Closed ethe closed 8 years ago

ethe commented 8 years ago

I tried to use vue-loader and manifest-revision-webpack-plugin together, my entry is main.js so here's my webpack config, base config:

var path = require('path')

module.exports = {
  entry: {
    main: [
      './src/main.js'
    ]
  },
  output: {
    path: path.resolve(__dirname, '../../spellworks/static/public'),
    publicPath: '/static/public/',
    filename: '[name].[chunkhash].js',
    chunkFilename: '[id].[chunkhash].js'
  },
  resolve: {
    extensions: ['', '.js', '.vue'],
    alias: {
      'src': path.resolve(__dirname, '../src')
    }
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel!eslint',
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  vue: {
    loaders: {
      js: 'babel!eslint'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  }
}

and production config:

var webpack = require('webpack')
var config = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');

config.vue.loaders = {
  js: 'babel!eslint',
  // http://vuejs.github.io/vue-loader/configurations/extract-css.html
  css: ExtractTextPlugin.extract('style-loader', 'css-loader'),
  less: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader'),
  sass: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'),
  stylus: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader')
}

// http://vuejs.github.io/vue-loader/workflow/production.html
config.plugins = (config.plugins || []).concat([
  new ExtractTextPlugin('[name].[chunkhash].css'),
  new ManifestRevisionPlugin('../spellworks/static/public/' + 'manifest.json', {
    rootAssetPath: './src/assets',
  })
])

module.exports = config

But seems in manifest.js could only find {"assets": {"main.css":"main.29bf0f553599c654ffbf.css"},"publicPath":"/static/public/"}

nickjj commented 8 years ago

I'm not sure what vue-loader does.

Does ./src/assets contain all of the raw assets? Would you have expected to see a bunch of images and at least 1 JS file?

ethe commented 8 years ago

My file tree:

.
├── package.json
├── README.md
├── src
│   ├── app.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── hello.vue
│   └── main.js
└── test
    └── unit
        ├── Hello.spec.js
        └── index.js

Yeah, I use vue.js created some components, every component include at least one <style> tag (they would be bundled together to a css file) and <script> tag(also would be bundled to a js file), and I want to see js file in manifest. But I tried to set root asset path ./src/assets or ./src, neither worked as I expected.

nickjj commented 8 years ago

What happens if you remove vue? Just to see if it's 100% related to that.

ethe commented 8 years ago

Ok, I removed vue:

> webpack --progress --profile --hide-modules --colors --config build/webpack.prod.conf.js

1545ms build modules    
2ms seal 
3ms optimize 
2ms hashing 
5ms create chunk assets 
1490ms additional chunk assets
1ms optimize chunk assets 
0ms optimize assets 
9ms emit 
Hash: 21b72faec4566c3c6a40
Version: webpack 1.12.9
Time: 3070ms
                                           Asset     Size  Chunks             Chunk Names
assets/logo.82b9c7a5a3f405032b1db71a25f67021.png  6.85 kB          [emitted]  
                    main.d52047a0aae652ef0145.js    76 kB       0  [emitted]  main

Expected one image file and on js file, bug only got {"assets":{"main.js":"main.d52047a0aae652ef0145.js"},"publicPath":"/static/public/"}