mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-07 22:56:51 +02:00
Code Issues Releases Wiki Activity

Use webpack

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-23 10:23:13 +07:00
parent 83e61eb7e3
commit ada4976227
9 changed files with 4029 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.babelrc Normal file
View File

@@ -0,0 +1,6 @@
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}

2
.gitignore vendored
View File

@@ -1,3 +1,5 @@
.cache .cache
dist dist
node_modules node_modules
public/bundle.js
public/bundle.js.map

7
client/CoverLoader.jsx Normal file
View File

@@ -0,0 +1,7 @@
import loadable from '@loadable/component';
import slug from './helpers/slug';
const CoverLoader = loadable(props => import(`./layouts/${slug(props.pattern)}/Cover`));
export default CoverLoader;

3
client/Home.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
//import CoverLoader from './CoverLoader';
import BadgeCover from './layouts/badge/Cover'; import BadgeCover from './layouts/badge/Cover';
import BreadcrumbCover from './layouts/breadcrumb/Cover'; import BreadcrumbCover from './layouts/breadcrumb/Cover';
import ButtonWithIconCover from './layouts/button-with-icon/Cover'; import ButtonWithIconCover from './layouts/button-with-icon/Cover';
@@ -116,7 +117,7 @@ const Home = () => {
<div className="flex flex-wrap items-start pa4"> <div className="flex flex-wrap items-start pa4">
<div className="pa1 w-20"> <div className="pa1 w-20">
<Link to="/badge" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3"> <Link to="/badge" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<BadgeCover /> <BadgeCover pattern="Badge" />
<h4 className="f5 mv0 pt3">Badge</h4> <h4 className="f5 mv0 pt3">Badge</h4>
</Link> </Link>
</div> </div>

2
client/helpers/slug.js Normal file
View File

@@ -0,0 +1,2 @@
const slug = item => item.toLowerCase().split(' ').join('-');
export default slug;

4245
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

21
package.json
View File

@@ -1,13 +1,15 @@
{ {
"name": "csslayout", "name": "csslayout",
"scripts": { "scripts": {
"dev": "parcel client/index.html --out-dir dist", "dev": "webpack --mode=development",
"build": "parcel build client/index.html --out-dir dist", "dev-server": "webpack-dev-server",
"sitemap": "cp robots.txt dist && node bin/sitemap && cp sitemap.xml dist", "build": "webpack --mode=production",
"prebuild": "rm -rf dist/*", "sitemap": "cp robots.txt public && node bin/sitemap && cp sitemap.xml public",
"prebuild": "rm -rf public/*",
"postbuild": "npm run sitemap && react-snap" "postbuild": "npm run sitemap && react-snap"
}, },
"dependencies": { "dependencies": {
"@loadable/component": "^5.10.3",
"highlight.js": "^9.16.2", "highlight.js": "^9.16.2",
"react": "^16.12.0", "react": "^16.12.0",
"react-dom": "^16.12.0", "react-dom": "^16.12.0",
@@ -15,7 +17,16 @@
"react-snap": "^1.23.0" "react-snap": "^1.23.0"
}, },
"devDependencies": { "devDependencies": {
"parcel-bundler": "^1.12.4" "@babel/core": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"@babel/preset-react": "^7.7.4",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"parcel-bundler": "^1.12.4",
"style-loader": "^1.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
}, },
"reactSnap": { "reactSnap": {
"source": "dist", "source": "dist",

2
client/index.html → public/index.html
View File

@@ -7,7 +7,7 @@
</head> </head>
<body class="avenir w-100"> <body class="avenir w-100">
<div id="root"></div> <div id="root"></div>
<script src="./index.jsx"></script> <script src="./bundle.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-139616701-3"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139616701-3"></script>
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];

29
webpack.config.js Normal file
View File

@@ -0,0 +1,29 @@
const path = require('path');
module.exports = {
entry: './client/index.jsx',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
devtool: 'cheap-module-eavl-source-map',
devServer: {
contentBase: path.join(__dirname, 'public')
},
};