Upgrade Webpack 3 and dependences - Started

[rrfaria]

I did the upgrade to webpack 3 in some parts but the css is not loading in the extension

look what I did: package.json

{
  "name": "react-chrome-extension-boilerplate",
  "version": "0.9.0",
  "description": "Boilerplate for Chrome extension React.js project",
  "scripts": {
    "dev": "node scripts/dev",
    "build": "node scripts/build",
    "compress": "node scripts/compress",
    "compress-keygen": "crx keygen",
    "clean": "rimraf build/ dev/ *.zip *.crx",
    "lint": "eslint app chrome test scripts webpack/*.js",
    "test-e2e": "cross-env NODE_ENV=test mocha -r ./test/setup-app test/e2e",
    "test": "cross-env NODE_ENV=test mocha -r ./test/setup-app test/app"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/jhen0409/react-chrome-extension-boilerplate.git"
  },
  "keywords": [
    "chrome",
    "extension",
    "react",
    "redux",
    "hot reload",
    "webpack",
    "boilerplate"
  ],
  "author": "Jhen <developer@jhen.me>",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^7.1.6",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.2",
    "babel-loader": "^7.1.2",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-react-optimize": "^1.0.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "chai": "^4.1.2",
    "chromedriver": "^2.33.2",
    "cross-env": "^5.1.1",
    "crx": "^3.2.1",
    "css-loader": "^0.28.7",
    "css-modules-require-hook": "^4.2.2",
    "eslint": "^4.11.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.5.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "jsdom": "^11.3.0",
    "minimist": "^1.2.0",
    "mocha": "^4.0.1",
    "node-sass": "^4.7.2",
    "postcss-loader": "^2.0.8",
    "pug-cli": "^1.0.0-alpha6",
    "rimraf": "^2.6.2",
    "sass-loader": "^6.0.6",
    "selenium-webdriver": "^3.6.0",
    "shelljs": "^0.7.8",
    "sinon": "^4.1.2",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-hot-middleware": "^2.20.0",
    "webpack-httpolyglot-server": "^0.2.2"
  },
  "dependencies": {
    "bluebird": "^3.5.1",
    "classnames": "^2.2.5",
    "react": "^16.1.1",
    "react-dock": "^0.2.4",
    "react-dom": "^16.1.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  }
}

prod.config.js

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const customPath = path.join(__dirname, './customPublicPath');

module.exports = {
  entry: {
    todoapp: [customPath, path.join(__dirname, '../chrome/extension/todoapp')],
    background: [customPath, path.join(__dirname, '../chrome/extension/background')],
    inject: [customPath, path.join(__dirname, '../chrome/extension/inject')]
  },
  output: {
    path: path.join(__dirname, '../build/js'),
    filename: '[name].bundle.js',
    chunkFilename: '[id].chunk.js'
  },
  plugins: [
    new ExtractTextPlugin('../css/[name].css'),
    new webpack.IgnorePlugin(/[^/]+\/[\S]+.dev$/),
    new webpack.optimize.UglifyJsPlugin({
      comments: false,
      compressor: {
        warnings: false
      }
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              'react-optimize'
            ]
          }
        }
      },
      {
        test: /\.(css|scss|sass)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  autoprefixer({ browsers: ['last 2 versions'] })
                ]
              },
            },
            'sass-loader',
          ]
        }),
      }
    ]
  }
};

and .babelrc

{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["add-module-exports", "transform-decorators-legacy", "transform-runtime"]
}

All files is compiling but in the end css isn't loaded.

Please help me.

I've tried load style using the pug template but also didn't work

[srghma]

check https://github.com/BjornMelgaard/react-chrome-extension-boilerplate (though it is in progress, I've successfully updated dependencies)

[dvdschwrtz-zz]

@BjornMelgaard great work. I don't want the auth setup so it is giving me problems when I try to remove that and I would rather avoid digging through all the changes you made. Is anyone working on upgrading the base version to webpack 3? I noticed the comments above from @rrfaria - did you get it working?

[dvdschwrtz-zz]

@BjornMelgaard Ok, after a small break and some focus, I got it working after taking auth out but there are lots of issues I am having using the syntax I want with react which is pretty seamless in the original. I will go back to version 1 and maybe we can eventually upgrade to 3 off the standard version. I will take a look. Am not sure how long it will take

[dvdschwrtz-zz]

For the upgrade to webpack 3, I have a couple of questinos about the current configuration. Why is the inject script hot reloading turned off? Is this because of the iframe? Also, I am not familiar with the hot reloading internals or changes since webpack 1. Do we still need the replace folder with webpack/replace/JsonpMainTemplate.runtime.js and webpack/replace/process-update.js. If so, will these work with the new react-hot-loader? I can dig into this more but dont have a ton of time for this right now, so if someone knows the answer it would be very helpful! Thanks :)

[rrfaria]

This one has webpack 3 configuration https://github.com/ayastreb/bandwidth-hero

maybe we can analyse and use those webpack setups

[rrfaria]

this one is a very good upgrade

https://github.com/wkw/react-chrome-extension-boilerplate

but now I have to know how to upgrade to react 16 and webpack 4.6

[yjiq150]

Check this out. I updated it to use React 16/Webpack 4 https://github.com/yjiq150/react-chrome-extension-boilerplate

I just made a PR for the same problem today here. https://github.com/jhen0409/react-chrome-extension-boilerplate/pull/98