Wednesday, 12 April 2017

Webpack generate .js .map with .jsx

I work on a project based on create-react-app, and since some time, the .jsx files generate a .js .map files.

They're 2 problems.

  • The generated files (.js and .map) are 'untracked' by Git. I don't want these files in the git.

  • With the Chrome DevTool, the Source tab display the .js file, but I wish display the .jsx.

These problems happened some time ago. Before that, everything worked. I suspect Webpack when updating files, but I don't sure about that. Thank you for your answer.


The files generated in project folder enter image description here

The Source Chrome DevTool

enter image description here

Webpack

var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var findCacheDir = require('find-cache-dir');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
var getClientEnvironment = require('./env');
var paths = require('./paths');
var config = require('./../.env/config.json');
var project = require('./../package.json');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
var WriteFilePlugin = require('write-file-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');

var publicPath = '/';
var publicUrl = '';
var env = getClientEnvironment(publicUrl);

var CONFIG_ENV = process.env.CONFIG_ENV;
var PROJECT = process.env.PROJECT;
var app = paths[PROJECT];

var data = require(app.data);

var info = {
    version: project.version,
    name: project.name,
    env: CONFIG_ENV,
    project: PROJECT
};

var htmlPlugin = [];
app.templates.map(template => {
    htmlPlugin.push(
        new HtmlWebpackPlugin({
            template: template.path,
            filename: template.name,
            alwaysWriteToDisk: true,
            inject: true,
            meta: data.meta,
            conf: data.conf,
            page: data.page,
            env: config[CONFIG_ENV]
        })
    );
});

var statics = [{
    context: app.images,
    from: '**/*',
    to: 'static/images'
}, {
    context: paths.commons.images,
    from: '**/*',
    to: 'static/images'
}];

if (PROJECT === 'site') {
    statics.push({
        context: paths.site.aem,
        from: '**/*',
        to: 'static/data'
    });
}

module.exports = {
    entry: {
        main: [
            require.resolve('react-dev-utils/webpackHotDevClient'),
            require.resolve('./polyfills'),
            app.main
        ],
        vendor: Object.keys(project.dependencies),
    },
    devServer: {
        outputPath: path.join(__dirname, './public')
    },
    output: {
        path: app.public,
        pathinfo: true,
        filename: 'static/js/[name].js',
        publicPath: publicPath
    },
    externals: {
        envVar: JSON.stringify(config[CONFIG_ENV]),
        info: JSON.stringify(info)
    },
    resolve: {
        fallback: paths.nodePaths,
        extensions: ['.js', '.json', '.jsx', ''],
        alias: {
            'waypoint-js': paths.alias.waypointsJs
        }
    },

    devtool: 'source-map',
    module: {
        preLoaders: [{
            test: /\.(js|jsx)$/,
            loader: 'eslint',
            include: [
                app.src,
                paths.commons.base
            ],
        }],
        loaders: [{
                test: /\.pug$/,
                loaders: ['pug-loader?pretty=true']
            }, {
                test: /\.(js|jsx)$/,
                include: [
                    app.src,
                    paths.commons.base
                ],
                loader: 'babel',
                query: {
                    cacheDirectory: findCacheDir({
                        name: 'react-scripts'
                    })
                }
            }, {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!postcss-loader!resolve-url-loader!sass-loader?sourceMap')
            },
            {
                test: /\.(ico|jpg|jpeg|png|gif|svg)(\?.*)?$/,
                loader: 'url',
                query: {
                    publicPath: '../../',
                    name: 'static/images/[name].[ext]',
                    limit: 10000
                }
            }, {
                test: /\.(woff|woff2|eot|ttf)$/,
                loader: 'file-loader',
                query: {
                    name: 'static/fonts/[name].[ext]'
                }
            },
            {
                test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
                loader: 'url',
                query: {
                    limit: 10000,
                    name: 'static/videos/[name].[hash:8].[ext]'
                }
            }, {
                test: /\.json$/,
                exclude: /node_modules/,
                loader: 'json'
            }
        ]
    },


    postcss: function() {
        return [
            autoprefixer({
                browsers: [
                    '> 1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'IE 9'
                ]
            })
        ];
    },
    plugins: [
        new CopyWebpackPlugin(statics),
        new CopyWebpackPlugin([{
            from: paths.site.src + '/manifest.json',
            to: 'manifest.json'
        }]),
        new CopyWebpackPlugin([{
            from: paths.site.src + '/robots.txt',
            to: 'robots.txt'
        }]),
        new CopyWebpackPlugin([{
            from: paths.site.src + '/sitemap.xml',
            to: 'sitemap.xml'
        }]),
        new CopyWebpackPlugin([{
            from: paths.commons.base + '/js/lightweight-detection.js',
            to: 'static/js/lightweight-detection.js'
        }]),
        new CopyWebpackPlugin([{
            from: paths.commons.base + '/locales',
            to: 'static/locales'
        }]),

        new webpack.optimize.CommonsChunkPlugin('vendor', 'static/js/vendor.min.js'),
        new InterpolateHtmlPlugin({
            PUBLIC_URL: publicUrl
        }),

        new webpack.DefinePlugin(env),
        new webpack.HotModuleReplacementPlugin(),
        new CaseSensitivePathsPlugin(),
        new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),

        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
        new HtmlWebpackHarddiskPlugin(),
        new SWPrecacheWebpackPlugin({
            cacheId: 'i-fly-a380',
            filename: 'service-worker.js',
            mergeStaticsConfig: true,
            runtimeCaching: [{
                handler: 'cacheFirst',
                urlPattern: '/'
            }],
            staticFileGlobsIgnorePatterns: [/\.map$/]
        })
    ].concat(htmlPlugin),
    node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    }
};



via Kevin Py

No comments:

Post a Comment