Webpack 2 / Babel incorrect sources (ES5 instead of ES6)
I'm having problems with the original maps. Instead of correct ES6 code, I am getting source maps with babel loaded ES5 file. I've tried all types of devtool source files, even with webpack.SourceMapDevToolPlugin.
When I use eval
, the file paths look fine, but when I click on them, they go to the correct file, but after translating to ES5, the correct paths - in other types of map types, looks like this: Wrong paths
I have no idea what else I can try.
common.webpack.js file:
const webpack = require('webpack');
const argv = require('minimist')(process.argv.slice(2));
const {
root,
removeEmpty,
ifProd,
ifDev,
getEnvConsts,
ifRelease,
} = require('../helpers');
const defaults = require('../defaults');
// Webpack plugins
const CleanPlugin = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const ExtendedDefinePlugin = require('extended-define-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const HappyPack = require('happypack');
const PORT = argv['hmr-port'] || defaults.HMR_PORT || 3000;
module.exports = (options) => {
const ENV = options.env;
const BROWSER = options.browser;
const buildPath = ENV === 'development'
? 'dist'
: `${process.env.__DIR__ || 'build'}/${BROWSER}`;
const definedPlugins = Object.assign({}, {
'process.env.NODE_ENV': ENV,
__BROWSER__: BROWSER,
__ENV__: ENV,
__TAG_SHA__: process.env.__TAG_SHA__,
__VERSION__: process.env.__VERSION__,
__EXTENSION_ID__: defaults.__EXTENSION_ID__,
}, getEnvConsts());
const config = {
devtool: ENV === 'development'
? '#cheap-inline-source-map'
: 'source-map',
resolve: {
extensions: ['.jsx', '.js'],
modules: [defaults.SRC_DIR, 'node_modules'],
alias: {
react: root('node_modules/react'),
React: root('node_modules/react'),
}
},
context: defaults.SRC_DIR,
entry: {
'sidebar/sidebar': [
'babel-polyfill',
'./extension/sidebar/index.jsx',
'./extension/style.js',
],
'background/background': [
'babel-polyfill',
'./extension/background/background.js',
],
},
output: {
path: root(buildPath),
publicPath: '/',
filename: '[name].js',
},
module: {
rules: removeEmpty([
ifRelease({
test: /\.jsx?$/,
exclude: /node_modules/,
enforce: 'pre',
use: [{ loader: 'eslint-loader', options: { failOnWarning: true } }],
}),
{
test: /.jsx?$/,
include: [defaults.SRC_DIR],
loader: (ENV === 'development')
? 'happypack/loader?id=1'
: 'babel-loader',
query: {
cacheDirectory: true,
}
},
{
test: /.worker.js$/,
use: [
{ loader: 'worker-loader' },
],
},
{
test: /.s?css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader'],
}),
},
{
test: /.svg$/,
use: [
{ loader: 'simple-svgo-loader' }
],
},
{
test: /\.(jpe?g|png|gif)$/i,
loaders: [
'url-loader',
{
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 4,
},
pngquant: {
quality: '75-90',
speed: 3,
},
},
},
],
}
]),
},
performance: {
hints: false,
},
plugins: removeEmpty([
// new webpack.SourceMapDevToolPlugin({
// filename: '[file].map',
// test: /.jsx?$/,
// }),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.NamedModulesPlugin(),
ifRelease(new StyleLintPlugin({
syntax: 'scss',
context: defaults.SRC_DIR,
})),
new ExtractTextPlugin('style.css'),
new ExtendedDefinePlugin(definedPlugins),
new CleanPlugin([buildPath], {
root: root(),
verbose: true,
}),
new CopyPlugin(removeEmpty([
{ from: 'extension/icons', to: 'icons' },
{ from: 'extension/helpers/autoclose/autoclose.js', to: 'autoclose.js' }
])),
new HtmlPlugin({
template: root('scripts/hot-reload.html'),
inject: true,
minify: {
removeComments: false,
collapseWhitespace: false,
keepClosingSlash: false
}
}),
new HtmlPlugin({
filename: 'background/background.html',
chunks: removeEmpty([ ifProd('common'), 'background/background' ]),
inject: 'head',
title: 'Background'
}),
ifDev(new WriteFilePlugin({
// log: false,
})),
ifDev(new webpack.DllReferencePlugin({
context: '.',
manifest: require(root('config/webpack/dlls/vendor.json')),
})),
ifDev(new AddAssetHtmlPlugin({
filepath: require.resolve(root('config/webpack/dlls/dll__vendor.js')),
includeSourcemap: false
})),
ifDev(new HappyPack({
id: '1',
threads: 8,
loaders: ['babel-loader'],
verbose: true,
debug: false,
})),
ifProd(new webpack.optimize.CommonsChunkPlugin({
name: 'common',
})),
// ifDev(new webpack.LoaderOptionsPlugin({
// minimize: false,
// debug: true,
// })),
ifProd(new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false,
})),
ifProd(new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true,
warnings: false,
},
sourceMap: true,
})),
]),
};
return config;
};
package.json file:
{
"version": "1.0.68",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"add-asset-html-webpack-plugin": "^1.0.2",
"archiver": "^1.3.0",
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-istanbul": "^0.12.1",
"babel-loader": "^7.0.0",
"babel-plugin-istanbul": "^3.1.2",
"babel-plugin-react": "^1.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"chai": "4.0.0-canary.1",
"chai-as-promised": "5.3.0",
"chrome-webstore-manager": "^0.4.1",
"clean-webpack-plugin": "^0.1.14",
"colors": "^1.1.2",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^3.1.4",
"css-loader": "^0.26.1",
"css-object-loader": "^0.0.7",
"debug": "^2.6.0",
"enzyme": "^2.7.0",
"es6-promise": "^4.1.0",
"esdoc": "^0.5.2",
"esdoc-es7-plugin": "^0.0.3",
"esdoc-flow-plugin": "^1.0.0",
"eslint": "^3.12.2",
"eslint-config-airbnb": "^13.0.0",
"eslint-config-airbnb-flow": "^1.0.2",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-loader": "^1.6.1",
"eslint-plugin-chai-expect": "^1.1.1",
"eslint-plugin-chai-friendly": "^0.2.0",
"eslint-plugin-compat": "^0.1.3",
"eslint-plugin-flowtype": "^2.29.2",
"eslint-plugin-html": "^1.7.0",
"eslint-plugin-immutable": "^1.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.8.0",
"eslint-plugin-redux-saga": "^0.3.0",
"eslint-plugin-sinon": "^0.2.0",
"express": "^4.14.1",
"extended-define-webpack-plugin": "^0.1.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.10.0",
"flow-bin": "^0.38.0",
"flow-typed": "^2.0.0",
"fs-jetpack": "^0.10.5",
"generate-json-webpack-plugin": "^0.2.1",
"generate-plist-webpack-plugin": "^0.0.2",
"happypack": "^4.0.0-beta.1",
"html-loader": "^0.4.4",
"html-webpack-plugin": "^2.26.0",
"http-proxy-middleware": "^0.17.3",
"image-webpack-loader": "^3.2.0",
"istanbul": "1.1.0-alpha.1",
"jsdom": "^9.9.1",
"jsdom-global": "^2.1.1",
"karma": "^1.3.0",
"karma-chai": "^0.1.0",
"karma-chai-as-promised": "^0.1.2",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-es6-shim": "^1.0.0",
"karma-firefox-launcher": "^1.0.0",
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "^2.2.1",
"karma-opera-launcher": "^1.0.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-safari-launcher": "^1.0.0",
"karma-sinon": "^1.0.5",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.2",
"lint-staged": "^3.5.1",
"minimist": "^1.2.0",
"mocha": "^3.2.0",
"mocha-better-spec-reporter": "^3.1.0",
"nightwatch": "^0.9.12",
"node-sass": "^4.3.0",
"nodemon": "^1.11.0",
"npm-run-all": "^4.0.0",
"nyc": "^10.0.0",
"phantomjs-prebuilt": "^2.1.14",
"plist": "^2.0.1",
"precommit-hook-eslint": "^3.0.0",
"react-addons-test-utils": "^15.4.2",
"react-hot-loader": "3.0.0-beta.6",
"reactotron-react-js": "^1.6.0",
"reactotron-redux": "^1.6.1",
"redux-logger": "^2.8.1",
"require-glob": "^3.2.0",
"rsg-alt": "^3.15.0",
"sass-loader": "^4.1.1",
"sass-variable-loader": "^0.1.1",
"selenium-webdriver": "^3.0.1",
"sentry-cli-binary": "^1.10.2",
"simple-svgo-loader": "^1.0.0",
"sinon": "2.0.0-pre.5",
"style-loader": "^0.13.1",
"stylelint": "^7.7.1",
"stylelint-config-standard": "^15.0.1",
"stylelint-scss": "^1.4.1",
"stylelint-webpack-plugin": "^0.5.1",
"svgo": "^0.7.2",
"url-loader": "^0.5.8",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5",
"worker-loader": "^0.8.0",
"write-file-webpack-plugin": "^3.4.2"
},
"dependencies": {
"archiver-promise": "^1.0.0",
"axios": "^0.15.3",
"dexie": "^1.5.1",
"moment": "^2.18.1",
"moment-timezone": "^0.5.11",
"raven-js": "^3.15.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-moment": "^0.2.2",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0",
"redux-saga": "^0.14.3"
},
"pre-commit": [
"lint-staged"
],
"scripts": {
"start": "nodemon --watch config --watch scripts/dev-middleware.js --exec \"node_modules/.bin/cross-env NODE_ENV=development __TAG_SHA__=$(git show-ref $(git describe --tags $(git rev-list --tags --max-count=1)) | awk '{print $1}') node scripts/dev-middleware.js\"",
"start:old": "node_modules/.bin/cross-env NODE_ENV=development node scripts/dev-middleware.js",
"start:hot-reload": "node_modules/.bin/cross-env NODE_ENV=development node_modules/.bin/npm-run-all webpack:dll:gen start:dev",
"start:dev": "node scripts/hot-reload.js",
"webpack": "node_modules/.bin/webpack",
"webpack:dll:gen": "./node_modules/.bin/webpack --config config/webpack/dll.webpack.js",
"build": "node_modules/.bin/npm-run-all build:chrome",
"build:all": "node_modules/.bin/cross-env NODE_ENV=production __BROWSER__=all node_modules/.bin/npm-run-all webpack",
"build:chrome": "node_modules/.bin/cross-env NODE_ENV=production __BROWSER__=chrome node_modules/.bin/npm-run-all webpack",
"build:firefox": "node_modules/.bin/cross-env NODE_ENV=production __BROWSER__=firefox node_modules/.bin/npm-run-all webpack",
"build:opera": "node_modules/.bin/cross-env NODE_ENV=production __BROWSER__=opera node_modules/.bin/npm-run-all webpack",
"build:edge": "node_modules/.bin/cross-env NODE_ENV=production __BROWSER__=edge node_modules/.bin/npm-run-all webpack",
"build:safari": "node_modules/.bin/cross-env NODE_ENV=production __BROWSER__=safari node_modules/.bin/npm-run-all webpack",
"clean:build": "node_modules/rimraf/bin.js build",
"clean:coverage": "node_modules/rimraf/bin.js coverage",
"clean:docs": "node_modules/rimraf/bin.js documentation",
"test:mocha": "node_modules/.bin/_mocha --opts config/mocha.conf",
"coverage": "node_modules/.bin/npm-run-all test coverage:report",
"coverage:_save": "node_modules/.bin/cross-env NODE_ENV=test node_modules/.bin/nyc --reporter=html node_modules/.bin/babel-node node_modules/.bin/babel-istanbul cover node_modules/mocha/bin/_mocha -- --opts config/mocha.conf",
"coverage:gen": "node_modules/.bin/npm-run-all clean:coverage coverage:_save",
"coverage:check": "node_modules/.bin/nyc check-coverage --lines 95 --functions 95 --branches 95",
"coverage:report": "node_modules/.bin/codecov",
"test": "node_modules/.bin/cross-env NODE_ENV=test node_modules/.bin/karma start",
"test:silent": "node_modules/karma/bin/karma start --log-level=disable --reporters=",
"test:watch": "yarn test -- --auto-watch --no-single-run --browsers PhantomJS --reporters dots,coverage",
"e2e:setup": "node_modules/.bin/selenium-standalone install",
"e2e:run": "node_modules/.bin/nightwatch",
"e2e:complex": "node_modules/.bin/npm-run-all build:chrome e2e:run",
"e2e": "yarn run e2e:run",
"docs:gen": "node_modules/.bin/esdoc -c config/esdoc.json",
"docs": "node_modules/.bin/npm-run-all clean:docs docs:gen",
"lint": "node_modules/.bin/eslint -c .eslintrc.yml --quiet .",
"release:chrome:prepare": "node_modules/.bin/npm-run-all build:chrome",
"release:chrome": "VERSION=$(git describe --tags $(git rev-list --tags --max-count=1) | sed -E -e 's/(^production|^development|^release|^beta)-//') && node_modules/.bin/cross-env node_modules/.bin/cross-env __DIR__=release __VERSION__=$VERSION node scripts/release.js",
"tag-sha": "git show-ref $(git describe --tags $(git rev-list --tags --max-count=1)) | awk '{print $1}'",
"getLastVersion": "git describe --tags $(git rev-list --tags --max-count=1)",
"validate": "npm ls",
":postinstall": "node node_modules/phantomjs-prebuilt/install.js",
"::postinstall": "node_modules/.bin/flow-typed update",
"lint-staged": "node_modules/.bin/lint-staged",
"lint:style": "node_modules/.bin/stylelint 'src/**/*.css'",
"lint:style:scss": "node_modules/.bin/stylelint 'src/**/*.scss' --syntax=scss"
},
"lint-staged": {
"*.css": "lint:style",
"*.scss": "lint:style:scss"
}
}
.babelrc.json file
{
"env": {
"test": {
"plugins": [
"transform-flow-strip-types",
["istanbul", { "exclude": ["**/*.spec.js", "*.js"]}]
],
"presets": [
["es2015", { "modules": false }],
"stage-0",
"react"
]
}
},
"plugins": [
"transform-flow-strip-types",
"transform-class-properties"
],
"presets": [
["es2015", { "modules": false }],
"stage-0",
"react"
],
"sourceMaps": true
}
dev-middleware.js file
const express = require('express');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpack = require('webpack');
const path = require('path');
const argv = require('minimist')(process.argv.slice(2));
const webpackConfig = require('../webpack.config');
const { root } = require('../config/helpers');
const app = express();
const compiler = webpack(webpackConfig);
const PORT = argv['hmr-port'] || 3000;
app.use(webpackDevMiddleware(compiler, {
historyApiFallback: true,
inline: true,
stats: {
colors: true,
assets: true,
version: false,
hash: false,
timings: false,
chunks: false,
chunkModules: false,
},
headers: { 'Access-Control-Allow-Origin': '*' },
clientLogLevel: 'info',
}));
app.use(express.static(root('dist')));
app.get('*', (req, res) => {
res.sendFile(path.resolve(root('dist'), 'index.html'));
});
app.listen(PORT, 'localhost', () => {
console.log(`Listening on port: ${PORT}`);
});
+3
source to share