Last active
March 23, 2018 23:02
-
-
Save Miniwe/359b90e9133008038045988e72ae5d44 to your computer and use it in GitHub Desktop.
webpack.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import '../scss/index.scss'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const path = require('path'); | |
const webpack = require('webpack'); | |
const ExtractTextPlugin = require('extract-text-webpack-plugin'); | |
const WebpackNotifierPlugin = require('webpack-notifier'); | |
// const HtmlWebpackPlugin = require('html-webpack-plugin'); | |
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); | |
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); | |
const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); | |
const CopyWebpackPlugin = require('copy-webpack-plugin'); | |
const VENDOR_LIBS = ['bootstrap']; | |
const BUNDLE_LIBS = ['./src/js/index.js']; | |
const extractSass = new ExtractTextPlugin({ | |
filename: "[name].[contenthash].css", | |
disable: process.env.NODE_ENV === "development" | |
}); | |
const config = { | |
entry: { | |
bundle: BUNDLE_LIBS, | |
vendor: VENDOR_LIBS | |
}, | |
output: { | |
path: path.join(__dirname, 'dist'), | |
filename: '[name].js' | |
}, | |
module: { | |
rules: [ | |
{ | |
use: 'babel-loader', | |
test: /\.js$/, | |
exclude: /node_modules/ | |
}, | |
{ | |
test: /\.(jpe?g|png|gif|svg)$/, | |
use:[ | |
{ | |
loader: 'url-loader', | |
options: { | |
limit: 40000, | |
name: 'images/[hash]-[name].[ext]' | |
} | |
}, | |
{ | |
loader : 'image-webpack-loader', | |
options: { bypassOnDebug: true } | |
} | |
] | |
}, | |
{ | |
test: /.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/, | |
use: [{ | |
loader: 'file-loader', | |
options: { | |
name: 'fonts/[name].[ext]', | |
outputPath: '/', | |
publicPath: 'fonts' | |
} | |
}] | |
}, | |
{ | |
test: /\.scss$/, | |
use: extractSass.extract({ | |
use: ['css-loader', 'postcss-loader', 'sass-loader'], | |
// use style-loader in development | |
fallback: "style-loader" | |
}) | |
}, | |
{ | |
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, | |
// Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin | |
// loader: "url?limit=10000" | |
use: "url-loader" | |
}, | |
{ | |
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, | |
use: 'file-loader' | |
} | |
] | |
}, | |
plugins: [ | |
new WebpackNotifierPlugin({ | |
title: 'Neoscapes' | |
}), | |
new webpack.ProvidePlugin({ | |
$: 'jquery', | |
jQuery: 'jquery', | |
Tether: 'tether', | |
Popper: ['popper.js', 'default'] | |
}), | |
new BrowserSyncPlugin({ | |
proxy: 'http://localhost:8888/', | |
port: 3000, | |
files: [ | |
'**/*.php' | |
], | |
ghostMode: { | |
clicks: false, | |
location: false, | |
forms: false, | |
scroll: false | |
}, | |
injectChanges: true, | |
logFileChanges: true, | |
logLevel: 'debug', | |
logPrefix: 'wepback', | |
notify: true, | |
reloadDelay: 0 | |
}), | |
new webpack.optimize.CommonsChunkPlugin({ | |
names: 'vendor' | |
}), | |
new CopyWebpackPlugin([ | |
{ from: 'src/images', to: 'images' } | |
]), | |
new ExtractTextPlugin('styles.css') | |
] | |
}; | |
//If true JS and CSS files will be minified | |
if (process.env.NODE_ENV === 'production') { | |
config.plugins.push( | |
new UglifyJSPlugin(), | |
new OptimizeCssAssetsPlugin() | |
); | |
} | |
module.exports = config; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment