domsPlace/webpack.config.js
2018-10-22 20:30:47 +11:00

116 lines
2.6 KiB
JavaScript

const
webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
SharpLoader = require('responsive-loader/sharp'),
path = require('path')
;
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/public/index.html',
filename: 'index.html',
inject: 'body'
});
// export webpack config
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'./public/index.jsx'
],
output: {
path: '/dist',
filename: "app.js"
},
mode: 'development',
resolve: {
modules: ['node_modules', './public'],
extensions: ['.js', '.jsx', '.css', '.scss' ],
alias: {
'@public': path.resolve(__dirname, './public'),
'@objects': path.resolve(__dirname, './public/objects'),
'@components': path.resolve(__dirname, './public/components'),
'@assets': path.resolve(__dirname, './public/assets')
}
},
// declare loaders to be used in webpack
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
"@babel/preset-env",
{
"targets": {
"node": "current",
"browsers": [
"Chrome >= 41",
"FireFox >= 44",
"Safari >= 7",
"Explorer 11",
"last 4 Edge versions"
]
},
"useBuiltIns": false
}
],
"@babel/preset-react"
]
}
}
},
{
test: /\.scss$|\.css$/i,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.svg$|\.webm$|\.mp4$/i,
use: [{
loader: "file-loader",
options: {
name: "[path][name].[ext]",
context: 'public'
}
}]
},
{
test: /\.jpe?g$|\.gif$|\.png$/i,
use: [{
loader: "responsive-loader",
options: {
adapter: SharpLoader,
sizes: [250, 500, 1000, 1500, 2000, 2500],
name: "[path][name]_[width]x.[ext]",
context: 'public'
}
}]
},
{
test: /\.(eot|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/,
loader: 'url-loader'
}
]
},
// initialize the added webpack plugins
plugins: [
HTMLWebpackPluginConfig,
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
DEVELOPMENT: JSON.stringify(true)
})
]
};