Skip to content

Instantly share code, notes, and snippets.

@emctoo
Last active February 1, 2019 02:24
Show Gist options
  • Save emctoo/4088f5da955daa820cbd3ce8aeec5c67 to your computer and use it in GitHub Desktop.
Save emctoo/4088f5da955daa820cbd3ce8aeec5c67 to your computer and use it in GitHub Desktop.
webpack for phoenix, integrated with vue, needs some cleanup
{
"presets": [
[
"@babel/preset-env",
{
"targets":
{
"browsers": [
"last 2 Chrome versions"
]
}
}
]
]
}
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');
module.exports = (env, options) => ({
mode: 'development',
watch: true,
watchOptions: {
poll: 200,
aggregateTimeout: 1000,
ignored: /node_modules/,
},
optimization: {
minimizer: [
new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
new OptimizeCSSAssetsPlugin({})
]
},
entry: {
'app': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js'))
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../priv/static/js')
},
resolve: {
'alias': {
'vue$': 'vue/dist/vue.esm.js'
}
},
module: {
rules: [
{ test: /\.vue$/, use: 'vue-loader' },
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: ['vue-style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.css$/,
use: ['vue-style-loader', MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[hash:7].[ext]',
outputPath: '../fonts'
}
}]
},
]
},
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
new VueLoaderPlugin(),
]
});
@emctoo
Copy link
Author

emctoo commented Feb 1, 2019

yarn add vue-loader -D

Development dependency will be added, including vue-load, vue-style-load, etc.

@emctoo
Copy link
Author

emctoo commented Feb 1, 2019

vue-style-loader must be in front of MiniCssExtractPlugin.loader, in css rule.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment