Wednesday, February 1, 2017

webpack 1 sourcemaps not showing es6

Leave a Comment

I am using Webpack 1 with babel6 and devServer and am trying to display the es6 source in Chrome/Safari, So far I only get to see the generated es5 code. Here is my .babelrc

{   "presets": ["es2015", "react", "stage-0"] } 

and the webpack.config.js:

var webpack = require('webpack') var path = require('path');  config = {    entry: {     admin_index: [       'babel-polyfill',       './app/bundles/admin/index-entry.js'     ],   },    output: {     path: path.resolve(__dirname, '../app/assets/javascripts/dist/'),     filename: '[name]-bundle.js',   },    module: {     cache: true,     loaders: [       {          test: /\.jsx?$/,          // loader: 'babel',          loader: 'happypack/loader',         exclude: /node_modules|bower_modules/,         include: [           path.join(__dirname, "app/bundles"),         ],         query: {           cacheDirectory: true,         }       },     ]   },    resolve:{     extensions: ['', '.js', '.jsx'],     modulesDirectories: ["node_modules"],   },   devtool: 'eval-source-map',   plugins:[     new HappyPack({       loaders: [ 'babel?presets[]=es2015&presets[]=react&presets[]=stage-0'],       threads: 8,     })   ],    watchOptions: {     ignored: /node_modules/   },  } module.exports = config 

I inlcuded a screenshot of the Chrome Resources tab's source

enter image description here

package.json

    {       "name": "client",       "version": "1.0.0",       "description": "",       "main": "index.js",       "scripts": {         "test": "NODE_ENV=test mocha './app/**/*.spec.js' --compilers js:babel-register --recursive --require testSetup.js",         "test:watch": "npm test -- --watch",         "start": "NODE_ENV=dev node server.js"       },       "author": "",       "license": "ISC",       "devDependencies": {         "babel-core": "^6.7.4",         "babel-eslint": "^6.0.4",         "babel-loader": "^6.2.4",         "babel-plugin-react-hot": "^1.0.4",         "babel-plugin-transform-flow-strip-types": "^6.18.0",         "babel-polyfill": "^6.7.4",         "babel-preset-es2015": "^6.6.0",         "babel-preset-react": "^6.5.0",         "babel-preset-stage-0": "^6.5.0",         "babel-register": "^6.7.2",         "css-loader": "^0.23.1",         "enzyme": "^2.2.0",         "eslint": "^2.6.0",         "eslint-plugin-react": "^5.0.1",         "expect": "^1.16.0",         "happypack": "^2.1.1",         "jsdom": "^8.2.0",         "mocha": "^2.4.5",         "mocha-jsdom": "^1.1.0",         "node-sass": "^3.4.2",         "npm-check-updates": "^2.8.9",         "npm-install-webpack-plugin": "^3.0.0",         "react-addons-perf": "^15.1.0",         "react-addons-test-utils": "^15.1.0",         "react-hot-loader": "^3.0.0-beta.6",         "react-render-visualizer": "^0.2.2",         "redux-devtools": "^3.3.1",         "redux-devtools-dock-monitor": "^1.1.1",         "redux-devtools-log-monitor": "^1.0.11",         "sinon": "^1.17.3",         "style-loader": "^0.13.1",         "webpack": "^1.13.1",         "webpack-dev-server": "^1.14.1",         "webpack-notifier": "^1.3.0",         "why-did-you-update": "0.0.8"       },       "dependencies": {         "Faker": "^0.7.2",         "aphrodite": "^1.1.0",         "axios": "^0.12.0",         "classnames": "^2.2.5",         "color": "^0.11.3",         "counterpart": "^0.17.4",         "cuid": "^1.3.8",         "damals": "^0.9.4",         "delay": "^1.3.1",         "draft-js": "^0.7.0",         "draft-js-export-html": "^0.3.0",         "fecha": "^2.1.0",         "file-loader": "^0.8.5",         "halogen": "^0.2.0",         "history": "^2.0.1",         "humanize-plus": "^1.8.2",         "intl": "^1.1.0",         "lodash": "^4.13.1",         "memoizee": "^0.3.10",         "normalizr": "^2.1.0",         "pluralize": "^3.0.0",         "query-string": "^4.2.2",         "query-string-parser": "^0.1.4",         "react": "^15.1.0",         "react-addons-shallow-compare": "^15.1.0",         "react-dnd": "^2.1.4",         "react-dnd-html5-backend": "^2.1.2",         "react-dom": "^15.1.0",         "react-dropzone": "^3.4.0",         "react-functional": "^1.2.0",         "react-grid-layout": "^0.13.0",         "react-modal": "^1.4.0",         "react-player": "^0.12.0",         "react-redux": "^4.4.5",         "react-router": "^3.0.0-beta.1",         "react-router-redux": "^4.0.0",         "react-rte": "^0.5.0",         "react-select": "^1.0.0-rc.2",         "react-stateless": "^0.2.1",         "redux": "^3.5.2",         "redux-crud": "^1.0.0",         "redux-form": "^5.2.5",         "redux-saga": "^0.14.2",         "reselect": "^2.2.1",         "seamless-immutable": "^5.1.1",         "url-loader": "^0.5.7"       }     } 

Can anyone spot anything that I might have had wrong in the config that prevents me from seeing the es6 in the chrome source tab?

Thank you!

0 Answers

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment