Skip to content

Instantly share code, notes, and snippets.

@jimblue

jimblue/webpack.config.js

Created August 31, 2020 20:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jimblue/8c657fa6c74815fadbe13d17393cb889 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jimblue/8c657fa6c74815fadbe13d17393cb889 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jimblue created this gist Aug 31, 2020.
    153 changes: 153 additions & 0 deletions webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,153 @@
    const path = require('path')
    const { loader: MiniCssExtractLoader } = require('mini-css-extract-plugin')
    const { HotModuleReplacementPlugin, SourceMapDevToolPlugin } = require('webpack')
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    const ESLintPlugin = require('eslint-webpack-plugin')
    const StyleLintPlugin = require('stylelint-webpack-plugin')

    module.exports = {
    mode: Settings.mode.name,
    devtool: false,
    entry: './main.scss',
    output: {
    futureEmitAssets: true, // improves Webpack speed
    pathinfo: Settings.mode.prod, // improves Webpack speed in development
    path: resolve(Settings.path.root, 'public', Settings.env.outputFolder),
    publicPath: Settings.mode.prod ? `${Settings.env.cdn}/${Settings.env.outputFolder}/` : '/',
    filename: Settings.mode.prod ? 'js/[name].[chunkhash].js' : 'js/[name].js',
    chunkFilename: Settings.mode.prod ? 'js/[name].[chunkhash].js' : 'js/[name].js',
    },
    performance: {
    hints: Settings.mode.prod ? 'error' : false,
    maxEntrypointSize: Settings.env.maxEntrypointSize * 1024,
    maxAssetSize: Settings.env.maxAssetSize * 1024,
    },
    optimization: {
    removeAvailableModules: false, // improves Webpack speed in development
    removeEmptyChunks: false, // improves Webpack speed in development
    noEmitOnErrors: true,
    runtimeChunk: false,
    splitChunks: false, // improves Webpack speed in development
    },
    module: {
    rules: [
    // JAVASCRIPT loader (using BABEL)
    {
    test: /\.(mjs|js)$/,
    exclude: /node_modules/,
    use: [
    {
    loader: 'babel-loader',
    options: {
    cacheDirectory: true,
    },
    },
    ],
    },
    // STYLE loader (using SASS and POSTCSS)
    {
    test: /\.(scss|sass|css)$/,
    use: [
    {
    loader: MiniCssExtractLoader,
    options: {
    esModule: true,
    hmr: Settings.mode.dev,
    },
    },
    {
    loader: 'css-loader',
    options: {
    esModule: true,
    sourceMap: true,
    importLoaders: 3,
    },
    },
    {
    loader: 'postcss-loader',
    options: {
    sourceMap: true,
    },
    },
    {
    loader: 'resolve-url-loader',
    options: {
    sourceMap: true,
    },
    },
    {
    loader: 'sass-loader',
    options: {
    sourceMap: true,
    implementation: require('sass'),
    sassOptions: {
    outputStyle: 'expanded',
    },
    },
    },
    ],
    },
    // IMAGE loader
    {
    test: /\.(webp|png|jpg|jpeg|gif|svg|ico)$/,
    use: [
    {
    loader: 'file-loader',
    options: {
    name: Settings.mode.prod ? 'images/[name].[hash].[ext]' : 'images/[name].[ext]',
    },
    },
    {
    loader: 'image-webpack-loader',
    options: {
    disable: Settings.mode.dev,
    },
    },
    ],
    },
    // FONT loader
    {
    test: /\.(woff|woff2|eot|ttf)$/,
    use: [
    {
    loader: 'file-loader',
    options: {
    name: Settings.mode.prod ? 'fonts/[name].[hash].[ext]' : 'fonts/[name].[ext]',
    },
    },
    ],
    },
    ],
    },
    plugins: [
    // Enable HMR globally
    new HotModuleReplacementPlugin(),

    // Custom source map output
    new SourceMapDevToolPlugin({
    test: /\.(mjs|js|scss|sass|css)$/,
    exclude: ['vendors.js'],
    filename: '[file].map',
    publicPath: '/',
    columns: true,
    module: true,
    }),

    // Provide ESLint support
    new ESLintPlugin({
    files: ['**/*.{mjs,js}'],
    lintDirtyModulesOnly: Settings.env.lintDirtyModulesOnly,
    }),

    // Provide Stylelint support
    new StyleLintPlugin({
    files: ['**/*.{scss,sass,css}'],
    lintDirtyModulesOnly: Settings.env.lintDirtyModulesOnly,
    }),

    new MiniCssExtractPlugin({
    filename: Settings.mode.prod ? 'css/[name].[contenthash].css' : 'css/[name].css',
    }),
    ]
    }