Base webpack config
This commit is contained in:
Jeff Avallone
parent
c67101a209
commit
d78f4efd16
21
package.json
21
package.json
@ -10,5 +10,26 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"start": "webpack-dev-server",
|
||||||
|
"start:prod": "run-s build start:http-server",
|
||||||
|
"start:http-server": "http-server ./build",
|
||||||
|
"build": "webpack"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"autoprefixer": "^7.2.5",
|
||||||
|
"copy-webpack-plugin": "^4.4.1",
|
||||||
|
"css-loader": "^0.28.9",
|
||||||
|
"extract-text-webpack-plugin": "^3.0.2",
|
||||||
|
"favicons-webpack-plugin-cesco": "^0.0.6",
|
||||||
|
"html-webpack-plugin": "^2.30.1",
|
||||||
|
"postcss-loader": "^2.1.0",
|
||||||
|
"precss": "^3.1.0",
|
||||||
|
"style-loader": "^0.20.1",
|
||||||
|
"webpack": "^3.10.0",
|
||||||
|
"webpack-dev-server": "^2.11.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"http-server": "^0.11.1",
|
||||||
|
"npm-run-all": "^4.1.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
use: [
|
||||||
|
'precss',
|
||||||
|
'autoprefixer'
|
||||||
|
]
|
||||||
|
};
|
||||||
25
src/favicon.svg
Normal file
25
src/favicon.svg
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="512px" height="512px" viewBox="0 0 512 512">
|
||||||
|
<style><![CDATA[
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Bangers&text=R');
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-family: 'Bangers';
|
||||||
|
font-size: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
rect {
|
||||||
|
stroke: #000;
|
||||||
|
stroke-width: 5px;
|
||||||
|
}
|
||||||
|
]]></style>
|
||||||
|
<defs>
|
||||||
|
<radialGradient id="shade" cx="0.5" cy="0.5" fx="0.5" fy="0" r="1">
|
||||||
|
<stop stop-color="#000" stop-opacity="0.0" offset="0%" />
|
||||||
|
<stop stop-color="#000" stop-opacity="0.4" offset="100%" />
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
<rect x="0" y="0" width="512" height="512" fill="#bada55"></rect>
|
||||||
|
<rect x="0" y="0" width="512" height="512" fill="url(#shade)"></rect>
|
||||||
|
<text transform="translate(0 353) translate(-103 -212) translate(256 256)">R</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 849 B |
1
src/pages/404/index.js
Normal file
1
src/pages/404/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
import '../../style.css';
|
||||||
10
src/pages/404/template.html
Normal file
10
src/pages/404/template.html
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>Regexper - 404</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>404</h1>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
src/pages/index/index.js
Normal file
1
src/pages/index/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
import '../../style.css';
|
||||||
10
src/pages/index/template.html
Normal file
10
src/pages/index/template.html
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>Regexper</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>App Content</h1>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
3
src/style.css
Normal file
3
src/style.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
100
webpack.config.js
Normal file
100
webpack.config.js
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
const path = require('path');
|
||||||
|
const fs = require('fs');
|
||||||
|
const webpack = require('webpack');
|
||||||
|
const CopyPlugin = require('copy-webpack-plugin');
|
||||||
|
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||||
|
const FaviconsPlugin = require('favicons-webpack-plugin-cesco');
|
||||||
|
const HtmlPlugin = require('html-webpack-plugin');
|
||||||
|
|
||||||
|
const pkg = require('./package.json');
|
||||||
|
|
||||||
|
const pages = fs.readdirSync(path.resolve(__dirname, 'src/pages'));
|
||||||
|
const pagePlugins = pages.map(name => new HtmlPlugin({
|
||||||
|
template: `./src/pages/${ name }/template.html`,
|
||||||
|
filename: `${ name }.html`,
|
||||||
|
chunks: ['common', name],
|
||||||
|
minify: {
|
||||||
|
removeComments: true,
|
||||||
|
collapseWhitespace: true,
|
||||||
|
removeRedundantAttributes: true,
|
||||||
|
useShortDoctype: true,
|
||||||
|
removeEmptyAttributes: true,
|
||||||
|
keepClosingSlash: true,
|
||||||
|
minifyJS: true,
|
||||||
|
minifyCSS: true,
|
||||||
|
minifyURLs: true
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: pages.reduce((pages, name) => {
|
||||||
|
pages[name] = `./src/pages/${ name }`;
|
||||||
|
return pages;
|
||||||
|
}, {}),
|
||||||
|
output: {
|
||||||
|
filename: 'js/[name].[chunkhash:8].js',
|
||||||
|
chunkFilename: 'js/[name].[chunkhash:8].js',
|
||||||
|
path: path.resolve(__dirname, 'build')
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new webpack.EnvironmentPlugin({
|
||||||
|
NODE_ENV: 'development'
|
||||||
|
}),
|
||||||
|
new webpack.optimize.CommonsChunkPlugin({
|
||||||
|
name: 'common',
|
||||||
|
minChunks: 2
|
||||||
|
}),
|
||||||
|
new FaviconsPlugin({
|
||||||
|
logo: './src/favicon.svg',
|
||||||
|
persistentCache: true,
|
||||||
|
inject: true,
|
||||||
|
config: {
|
||||||
|
appName: 'Regexper',
|
||||||
|
appDescription: pkg.description,
|
||||||
|
developerName: pkg.author.name,
|
||||||
|
developerUrl: 'https://github.com/javallone/',
|
||||||
|
background: '#6b6659',
|
||||||
|
theme_color: '#bada55',
|
||||||
|
start_url: '/',
|
||||||
|
icons: {
|
||||||
|
android: true,
|
||||||
|
appleIcon: true,
|
||||||
|
coast: false,
|
||||||
|
favicons: true,
|
||||||
|
firefox: false,
|
||||||
|
windows: true,
|
||||||
|
yandex: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
new ExtractTextPlugin('css/[name].[contenthash:8].css'),
|
||||||
|
new CopyPlugin(['./public']),
|
||||||
|
...pagePlugins
|
||||||
|
],
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: ExtractTextPlugin.extract({
|
||||||
|
fallback: 'style-loader',
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'css-loader',
|
||||||
|
options: {
|
||||||
|
importLoaders: 1,
|
||||||
|
minimize: true,
|
||||||
|
sourceMap: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'postcss-loader',
|
||||||
|
options: {
|
||||||
|
ident: 'postcss'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user