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 
The Source Chrome DevTool
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