Nonsupport vue-loader?
Closed this issue · 4 comments
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/"}
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?
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.
What happens if you remove vue
? Just to see if it's 100% related to that.
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/"}