Replace Webpack with Parcel
Change path to some files to ease the no-config static file management
Anders Ytterström
3
.gitignore
vendored
|
|
@ -6,3 +6,6 @@ npm-debug.log
|
|||
# IntelliJ
|
||||
*.iml
|
||||
/.idea
|
||||
|
||||
.cache
|
||||
_build
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<link rel="stylesheet" href="./css/brutal.css">
|
||||
<title>🤘 Brütal Legend 🤘</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="brutal"></div>
|
||||
</body>
|
||||
<script src="bundle.js"></script>
|
||||
<script src="./src/index.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
8045
package-lock.json
generated
47
package.json
|
|
@ -1,27 +1,36 @@
|
|||
{
|
||||
"scripts": {
|
||||
"build": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors",
|
||||
"watch": "webpack -p --define process.env.NODE_ENV='\"production\"' --watch --progress --colors",
|
||||
"start": "webpack-dev-server --open"
|
||||
"start": "cross-env NODE_ENV=development parcel index.html --public-url / --out-dir _build",
|
||||
"build": "cross-env NODE_ENV=production parcel build index.html --public-url /urban-enigma/ --out-dir docs --no-source-maps --no-content-hash",
|
||||
"lint": "cross-env NODE_ENV=development prettier --check src/**/* assets/*.css"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.6.0",
|
||||
"@babel/polyfill": "^7.6.0",
|
||||
"@babel/preset-env": "^7.1.6",
|
||||
"@babel/core": "^7.4.0",
|
||||
"@babel/plugin-transform-runtime": "^7.4.0",
|
||||
"@babel/preset-env": "^7.5.5",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@babel/preset-stage-1": "^7.0.0",
|
||||
"babel-loader": "^8.0.6",
|
||||
"webpack": "^4.40.2",
|
||||
"webpack-cli": "^3.3.9",
|
||||
"webpack-dev-server": "3.8.1"
|
||||
"autoprefixer": "^9.5.0",
|
||||
"cross-env": "^5.2.0",
|
||||
"jest": "^24.9.0",
|
||||
"parcel-bundler": "^1.12.3",
|
||||
"parcel-plugin-static-files-copy": "^2.3.1",
|
||||
"prettier": "^1.18.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "16.3.2",
|
||||
"react-dom": "^16.9.0",
|
||||
"react-redux": "5.0.7",
|
||||
"redux-saga": "^1.1.1",
|
||||
"redux": "4.0.0"
|
||||
}
|
||||
"@babel/runtime-corejs2": "^7.4.2",
|
||||
"react": "^16.8.5",
|
||||
"react-dom": "^16.8.5",
|
||||
"react-redux": "^6.0.1",
|
||||
"redux": "^4.0.1",
|
||||
"redux-saga": "^1.0.2"
|
||||
},
|
||||
"postcss": {
|
||||
"modules": false,
|
||||
"plugins": {
|
||||
"autoprefixer": {}
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"defaults"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default class Album extends Component {
|
|||
img,
|
||||
purchased_on,
|
||||
} = album;
|
||||
const imagePath = `assets/covers/${img}`;
|
||||
const imagePath = `./covers/${img}`;
|
||||
const song = songs.join(', ');
|
||||
return (
|
||||
<article className="album" tabIndex="0" role="button" onClick={() => handleOnClick(album)}>
|
||||
|
|
|
|||
|
|
@ -29,4 +29,4 @@ render(
|
|||
document.getElementById('brutal')
|
||||
);
|
||||
|
||||
store.dispatch({ type: 'LOAD_ALBUMS', payload: { source: 'json/albums.json' }});
|
||||
store.dispatch({ type: 'LOAD_ALBUMS', payload: { source: './albums.json' }});
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 271 KiB After Width: | Height: | Size: 271 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 188 KiB After Width: | Height: | Size: 188 KiB |
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 71 KiB |
|
Before Width: | Height: | Size: 128 KiB After Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 136 KiB After Width: | Height: | Size: 136 KiB |
|
Before Width: | Height: | Size: 165 KiB After Width: | Height: | Size: 165 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 113 KiB After Width: | Height: | Size: 113 KiB |
|
Before Width: | Height: | Size: 443 KiB After Width: | Height: | Size: 443 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 107 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 189 KiB After Width: | Height: | Size: 189 KiB |
|
|
@ -1,30 +0,0 @@
|
|||
module.exports = {
|
||||
entry: ['./src/index.js'],
|
||||
output: {
|
||||
path: __dirname,
|
||||
publicPath: '/',
|
||||
filename: 'bundle.js'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
exclude: /node_modules/,
|
||||
loader: 'babel-loader',
|
||||
query: {
|
||||
presets: ["@babel/preset-env", "@babel/react"]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.jsx']
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
contentBase: './',
|
||||
watchOptions: {
|
||||
aggregateTimeout: 300,
|
||||
poll: 1000
|
||||
}
|
||||
}
|
||||
};
|
||||