FYI, just got Vue running on edge(ish) Phoenix, which now defaults to Webpack. Here’s the diff between the default assets/webpack.config.js
and the version running Vue. (I put the view app in ./js
along with the other Javascripts.
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
+ const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = (env, options) => ({
optimization: {
minimizer: [
new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
new OptimizeCSSAssetsPlugin({})
]
},
entry: {
'./js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js'))
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, '../priv/static/js')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader'
+ },
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
+ resolve: {
+ alias: {
+ 'vue$': 'vue/dist/vue.esm.js'
+ },
+ extensions: ['*', '.js', '.vue', '.json']
+ },
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
+ new VueLoaderPlugin(),
]
});
Putting this here in case it saves someone a bit of time when 1.4 comes out.