Skip to content

Instantly share code, notes, and snippets.

@gugadev
Created March 18, 2017 18:40
Show Gist options
  • Save gugadev/60332a0d2fea66d244fe740534ec0c18 to your computer and use it in GitHub Desktop.
Save gugadev/60332a0d2fea66d244fe740534ec0c18 to your computer and use it in GitHub Desktop.
Example of webpack configuration with Vue and Babel. Takes too much time (~50s).
import webpack from 'webpack';
import path from 'path';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import postcssImport from 'postcss-import';
import pxtorem from 'postcss-pxtorem';
import cssnext from 'postcss-cssnext';
import postcssNesting from 'postcss-nesting';
import postcssVariables from 'postcss-variables';
import postcssColorFn from 'postcss-color-function';
import cssnano from 'cssnano';
export default {
entry: {
bundle: './src/ui/main'
},
output: {
path: './assets',
filename: 'js/[name].min.js'
},
module: {
rules: [
{
test: /\.js?/,
use: [
{
loader: 'babel-loader',
options: {
presets: [ [ 'es2015', { modules: false } ]]
}
}
],
exclude: [/node_modules/]
},
{
test: /particles\.js/,
use: [
{
loader: 'exports-loader',
options: {
particlesJS: 'window.particlesJS,pJSDom: window.pJSDom'
}
}
]
},
{
test: /\.css?/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
plugins: () => [
postcssImport({
//addDependencyTo: w
}),
cssnext({
warnForDuplicates: false
}),
pxtorem({
rootValue: 16,
unitPrecision: 5,
mediaQuery: true,
propList: ['*']
}),
postcssVariables,
postcssColorFn,
postcssNesting,
cssnano({ zIndex: false })
]
}
}
]
})
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
hash: 'sha512',
digest: 'hex',
name: '[hash].[ext]'
}
},
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
optimizationLevel: 7,
interlaced: false
}
}
]
},
{
test: /\.vue?/,
loader: 'vue-loader'
}
]
},
resolve: {
modules: [
path.resolve('/'),
'node_modules/'
],
extensions: ['.js', '.vue'],
unsafeCache: true
},
plugins: [
new webpack.ProvidePlugin({
Promise: 'imports-loader?this=>global!exports-loader?global.Promise!es6-promise',
fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
}),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('css/[name].min.css')
],
devtool: 'source-map',
stats: { colors: true },
watch: true
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment