Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const devMode = process.env.NODE_ENV !== 'production';
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
entry: {
// vendor: ['react', 'react-dom'],
app: "./assets/src"
},
output: {
// options related to how webpack emits results
path: path.resolve(__dirname, "public/dist"), // string
// the target directory for all output files
// must be an absolute path (use the Node.js path module)
// filename: "app.js", // string
// the filename template for entry chunks
// publicPath: "/assets/", // string
// // the url to the output directory resolved relative to the HTML page
// library: "MyLibrary", // string,
// the name of the exported library
// chunkFilename: 'app.js',
// libraryTarget: "umd", // universal module definition
// the type of the exported library
/* Advanced output configuration (click to show) */
},
optimization: {
splitChunks: {
cacheGroups: {
default: false,
// Custom common chunk
bundle: {
name: 'commons',
chunks: 'all',
minChunks: 3,
reuseExistingChunk: false,
},
// Customer vendor
vendors: {
chunks: 'initial',
name: 'vendors',
test: 'vendors',
},
// Merge all the CSS into one file
styles: {
name: 'styles',
test: /\.s?css$/,
chunks: 'all',
minChunks: 1,
reuseExistingChunk: true,
enforce: true,
},
},
},
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
beautify: false,
mangle: {
keep_fnames: true
},
compress: {
drop_console: false
},
comments: false
}
}),
]
},
plugins: [
new CleanWebpackPlugin(['public/dist/*.*']),
new HtmlWebPackPlugin({
template: "./assets/public/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].css',
chunkFilename: devMode ? '[id].css' : '[id].css'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new OptimizeCSSAssetsPlugin({}),
new ManifestPlugin()
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.json$/,
loader: 'json-loader',
type: 'javascript/auto',
exclude: /node_modules/,
},
{
test: /\.html$/,
exclude: /node_modules/,
use: [
{
loader: "html-loader",
options: {minimize: true}
}
]
},
{
test: /\.s?css$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
}
]
},
devtool: 'inline-source-map',
resolve: {
extensions: [".js", ".jsx", ".json", ".scss", ".css"]
},
devServer: {
port: 9000,
stats: {
colors: true
},
hot: true,
proxy: {
'/api/v1': 'http://localhost:8080/'
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.