phoenix-components-library/webpack.config.js

Component library for Phoenix Frontend Projects.

const path = require("path");
const webpack = require("webpack");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const inProduction = false;
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpackDevServer = (process.env.NODE_ENV === 'dev_server');
const autoprefixer = require('autoprefixer');
const pkg = require('./package.json');

const libraryName= pkg.name;
const cssFileTemplate = 'bundle.css';
const jsFileTemplate = "bundle.js";
const outputDir = './lib';

module.exports = {
    entry: path.join(__dirname, "./react/index.js"),
    output: {
        path: path.join(__dirname, outputDir),
        filename: jsFileTemplate,
        library: libraryName,
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: path.resolve(__dirname, "node_modules"),
                use: { loader: "babel-loader" },
            },
            {
                test: /\.(sass|s?css)$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        { loader: 'css-loader', options: { sourceMap: true } },
                        {
                            loader: 'postcss-loader', options: {
                                sourceMap: true,
                                plugins: [
                                    autoprefixer,
                                ]
                            }
                        },
                        { loader: 'sass-loader', options: { sourceMap: true } }
                    ],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(less)$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        { loader: 'css-loader', options: { sourceMap: true } },
                        { loader: 'less-loader', options: { javascriptEnabled: true } },
                    ],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(png|jp(e*)g|svg|ico)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        limit: 8000,
                        name: 'img/[hash].[name].[ext]',
                        outputPath: 'assets/',
                        publicPath: '/assets/'
                    }
                },
                { loader: 'img-loader' }]
            },
            {
                test: /\.(ttf|eot|woff|woff2)$/,
                loader: "url-loader",
            },
        ]
    },
    resolve: { 
        alias: { 
            'react': path.resolve(__dirname, './node_modules/react') ,
            'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
            'assets': path.resolve(__dirname, 'assets')
        } 
    },
    externals: {
        // Don't bundle react or react-dom
        react: {
            commonjs: "react",
            commonjs2: "react",
            amd: "React",
            root: "React"
        },
        "react-dom": {
            commonjs: "react-dom",
            commonjs2: "react-dom",
            amd: "ReactDOM",
            root: "ReactDOM"
        }
    },
    devtool: 'source-map',
    plugins: [
        new ExtractTextPlugin(cssFileTemplate),
        new CleanWebpackPlugin([outputDir], {
            root: __dirname,
            verbose: true,
            dry: !!webpackDevServer
        }),
        new webpack.LoaderOptionsPlugin({ minimize: inProduction }),
        new webpack.HotModuleReplacementPlugin(),
        new ManifestPlugin({ basePath: '/lib/' })
    ],
};

if (inProduction) {
    module.exports.plugins.push(
        new webpack.DefinePlugin({
            'process.env': { NODE_ENV: JSON.stringify('production') }
        })
    );
    module.exports.plugins.push(new UglifyJSPlugin({ sourceMap: true }));
}