Skip to content

Instantly share code, notes, and snippets.

@efalayi
Last active June 22, 2020 07:32
Show Gist options
  • Select an option

  • Save efalayi/5d56c0a18e33fa49cc4a0ec0d81cea5b to your computer and use it in GitHub Desktop.

Select an option

Save efalayi/5d56c0a18e33fa49cc4a0ec0d81cea5b to your computer and use it in GitHub Desktop.
Full webpack config file for bootstrap and fontawesome
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const path = require('path');
const precss = require('precss');
const TransferWebpackPlugin = require('transfer-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'eval',
entry: [
'webpack/hot/only-dev-server',
'tether',
'font-awesome/scss/font-awesome.scss',
'./client/app.jsx'
],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
devServer: {
contentBase: 'build/', // Relative directory for base of server
publicPath: '/',
inline: true,
port: process.env.PORT || 3000, // Port Number
host: '127.0.0.1', // Change to '0.0.0.0' for external facing server
historyApiFallback: true,
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
tether: 'tether',
Tether: 'tether',
'window.Tether': 'tether',
Popper: ['popper.js', 'default'],
'window.Tether': 'tether',
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
Button: 'exports-loader?Button!bootstrap/js/dist/button',
Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
Util: 'exports-loader?Util!bootstrap/js/dist/util'
}),
new ExtractTextPlugin('main.css'),
new TransferWebpackPlugin([
{ from: 'client' },
])
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
},
},
{
test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /\.(scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run post css actions
options: {
plugins() {
// post css plugins, can be exported to postcss.config.js
return [
precss,
autoprefixer
];
}
}
}, {
loader: 'sass-loader' // compiles SASS to CSS
}
]
})
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: 'url-loader?limit=10000',
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
use: 'file-loader',
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
'file-loader?name=images/[name].[ext]',
'image-webpack-loader?bypassOnDebug'
]
},
// font-awesome
{
test: /font-awesome\.config\.js/,
use: [
{ loader: 'style-loader' },
{ loader: 'font-awesome-loader' }
]
},
// Bootstrap 4
{
test: /bootstrap\/dist\/js\/umd\//, use: 'imports-loader?jQuery=jquery'
}
]
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment