react-chrome-extension-boilerplate
react-chrome-extension-boilerplate copied to clipboard
jhen0409
Upgrade Webpack 3 and dependences - Started
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 <[email protected]>",
"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
check https://github.com/BjornMelgaard/react-chrome-extension-boilerplate (though it is in progress, I've successfully updated dependencies)
@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?
@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
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 :)
This one has webpack 3 configuration https://github.com/ayastreb/bandwidth-hero
maybe we can analyse and use those webpack setups
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
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
