Skip to content

Instantly share code, notes, and snippets.

@a-m-dev
Last active October 12, 2018 21:07
Show Gist options
  • Save a-m-dev/e744df029c8dc37fc8deb1f90ed2e5e4 to your computer and use it in GitHub Desktop.
Save a-m-dev/e744df029c8dc37fc8deb1f90ed2e5e4 to your computer and use it in GitHub Desktop.
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
entry: {
app: './src/js/index.jsx'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
// this publicPath will prevent from loading bundle.js and app.css from wrong directions
// (like localhost:3000/pageName/subPageName/app.css or same applies to bundle.js file nighter)
// and it will make sure that you alyas load your css and bundle js file from
// localhost:3000/app.css and localhost:3000/bundle.js without giving shit about nested routes...
},
resolve: {
extensions: ['.js' , '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','sass-loader'],
publicPath: '/dist'
})
},
// { // this is for class names like _W3de some wierd class name generated by webpack
// test: /\.(css|scss)$/,
// use: ExtractTextPlugin.extract({
// fallback: 'style-loader',
// publicPath: '/dist',
// use: [
// {
// loader: 'css-loader',
// options: {
// modules: true,
// sourceMap: false,
// importLoaders: true,
// // localIdentName: "[name]__[local]___[hash:base64:5]"
// // localIdentName: '[path]-[name]__[local]--[hash:base64:5]'
// localIdentName: "_[hash:base64:5]"
// }
// },
// {
// loader: 'sass-loader',
// options: {
// sourceMap: true
// }
// }
// ],
// })
// },
{
test: /\.(jpg|jpeg|png|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
outputPath: 'img/',
publicPath: 'img/', // this line will remove the dist from images addres in app.css after build
// problem was if you use any image in sass files the addres swould be like /distimg/blah.jpeg but this line will; convert it to img/blah.jpeg
context: 'src/images' // grab all images from here and keep folder structure
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
outputPath: 'fonts/',
publicPath: 'fonts/', // this line will remove the dist from fonts addres in app.css after build
context: 'src/fonts' // grab all fonts from here and keep folder structure
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
minify: {
collapseInlineTagWhitespace: true,
collapseWhitespace: true,
}
}),
new ExtractTextPlugin({
filename: 'app.css',
disable: false,
allChunks: true
})
],
devServer: {
contentBase: path.join(__dirname , 'dist'),
compress: true,
port: 3000,
open: true,
// https: true,
// host: '127.0.0.5',
historyApiFallback: true,
stats: 'minimal',
}
}
@a-m-dev
Copy link
Author

a-m-dev commented Jul 14, 2018

@a-m-dev
Copy link
Author

a-m-dev commented Jul 18, 2018

also make sure to use this module(savage) : https://www.npmjs.com/package/webpack-bundle-analyzer

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