feat(:boom:) webpak 5

- Upgrading to webpack 5
- Addressing security issues
- Simplifying steup steps
- Simplifying webpack config
- and more...

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 AtomicPages LLC
+Copyright (c) 2020 Dennis Thompson
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,102 +1,108 @@
-Semantic UI & Webpack 2 Boilerplate
-=======================================
+# Semantic UI & Webpack Boilerplate
 
 After spending a few days on this issue, I decided to create a boilerplate so other developers don't run into the same issues I did when trying to add Semantic UI to a project of my own.
 
-### How to Use
-1. Clone the repo
-2. Install dependencies via `npm`
-	* **Note:** `yarn` users will encounter issues installing `semantic-ui` source, if this occurs kill the process and run:
+## How to Use
 
+1.  Clone the repo
+2.  Install dependencies via `npm`
 
-	~~~bash
-	npm i semantic-ui
-	~~~
+    - **Note:** `yarn` users will encounter issues installing `semantic-ui` source, if this occurs kill the process and run:
 
-3. Run the font path fix.
-	* Run `node font-fix.js` from the command line
-	* There is an incorrect transformation that occurs whith the relative paths when using webpack, we need to run this any time we update/install semantic-ui
-	If you don't care about semantic-ui bundled fonts, then **do not** run this font fix command; amend your webpack config as follows:
+    ```sh
+    npm i semantic-ui
+    ```
 
-		<a name="idcurls"></a>
+3.  Run the font path fix.
 
-		~~~js
-		{
-			test: /\.less$/, // import css from 'foo.less';
-			use: [
-				'style-loader',
-				{
-					loader: 'css-loader',
-					options: { url: false }
-				},
-				'less-loader'
-			]
-		}
-		~~~
+    -   Run `node font-fix.js` from the command line
+    -   There is an incorrect transformation that occurs with the relative paths when using webpack, we need to run this any time we update/install semantic-ui
+        If you don't care about semantic-ui bundled fonts, then **do not** run this font fix command; amend your webpack config as follows:
 
-4. Start the webpack dev server
+            <a name="idcurls"></a>
 
+            ```js
+            {
+            	test: /\.less$/, // import css from 'foo.less';
+            	use: [
+            		'style-loader',
+            		{
+            			loader: 'css-loader',
+            			options: { url: false }
+            		},
+            		'less-loader'
+            	]
+            }
+            ```
 
-##### CLI Junkie?
-~~~bash
+4.  Start the webpack dev server
+
+### CLI
+
+```sh
 git clone https://github.com/atomicpages/semantic-ui-webpack2-boilerplate.git
 npm i
 node font-fix.js
 npm start
-~~~
+```
+
+## Adding a Custom Theme in Semantic UI
 
-### Adding a Custom Theme for Semantic UI
 Currently, the best way to do this is to develop your theme inside of the `semantic` folder (or wherever your assets are insatlled) and then make a copy in the root. Due to the ridged nature of Semanitc UI, it might not be possible to do this otherwise. Other options:
 
 1. Scrap `less` imports and amend `webpack.config.js` as follows:
 
-	~~~js
-	{
-		test: /\.css$/, // changed from \.less$
-		use: [
-			'style-loader',
-			'css-loader'
-		]
-	}
-	~~~
+    ```js
+    {
+    	test: /\.css$/, // changed from \.less$
+    	use: [
+    		'style-loader',
+    		'css-loader'
+    	]
+    }
+    ```
+
+    If you ran `font-fix.js` we need to undo what we did. To do this delete the `semantic` folder and reinstall using `npm` Once this is complete we can now build `semantic-ui` independently of Webpack:
 
-	If you ran `font-fix.js` we need to undo what we did. To do this delete the `semantic` folder and reinstall using `npm` Once this is complete we can now build `semantic-ui` independently of Webpack:
+    ```sh
+    cd semantic
+    gulp build
+    gulp watch
+    ```
 
-	~~~bash
-	cd semantic
-	gulp build
-	gulp watch
-	~~~
+    inside of `app/index.js` make the following change:
 
-	inside of `app/index.js` make the following change:
+    ```js
+    import css from '../semantic/dist/semantic.css';
+    ```
 
-	~~~js
-	import css from '../semantic/dist/semantic.css';
-	~~~
+    **Note:** if you've set aliases ensure those are updated for the proper path.
 
-	**Note:** if you've set aliases ensure those are updated for the proper path.
+## Adding a Custom Theme
 
-### Adding a Custom Theme
 Due to the rigid nature of Webpack _and_ Semantic UI, they don't mingle very well. To by pass this, we can develop our theme inside of the `semantic` source folder directly and use gulp tasks to copy it to our project root.
 
-~~~bash
+```sh
 gulp copy-to # copies to semantic folder
 gulp copy-from # copies from the semantic folder
 gulp copy-theme-config # copies theme.config to project root; run with copy-from by default
-~~~
+```
 
 In order to get webpack to deploy the new changes, all modifications to theme files must be done inside the `semantic-ui` folder.
 
-### Build for Production
-// TODO
+## Build for Production
+
+Just run `npm run build`
+
+## Common issues
 
-### Common issues
 1. URL issues with some assets not able to be found
 
-	Based on experience, this is usually an issue with the way paths are resolved in webpack. There are two solutions:
+    Based on experience, this is usually an issue with the way paths are resolved in webpack. There are two solutions:
+
+    1. Fix the path to be correct (like `font-fix.js`)
+    2. Tell `css-loader` to [ignore urls](#idcurls)
 
-	1. Fix the path to be correct (like `font-fix.js`)
-	2. Tell `css-loader` to [ignore urls](#idcurls)
+## Requirements
 
-### Requirements
-* Node 6.x+
+-   Node 10.x+

app/index.js

@@ -1,4 +1,7 @@
+import $ from 'jquery';
+
 import css from 'semantic/semantic.less';
+
 import 'semantic/definitions/modules/transition';
 import 'semantic/definitions/modules/accordion';
 

font-fix.js

@@ -2,27 +2,31 @@ const fs = require('fs');
 
 function fixFontPath(filename) {
     if (fs.existsSync(filename)) {
-        let content = fs.readFileSync(filename, 'utf8');
+        const content = fs.readFileSync(filename, 'utf8');
         let quote = '"';
 
         if (/@fontPath\s*:\s*'/.test(content)) {
             quote = "'";
         }
 
-        let newContent = content.replace(
-            /@fontPath\s*:\s*("|')\.{2}\/\.{2}\/themes\//g,
-            `@fontPath  : ${quote}../../`
+        fs.writeFileSync(
+            filename,
+            content.replace(
+                /@fontPath\s*:\s*("|')\.{2}\/\.{2}\/themes\//g,
+                `@fontPath  : ${quote}../../`
+            ),
+            'utf8'
         );
-
-        fs.writeFileSync(filename, newContent, 'utf8');
     } else {
         console.warn(`${filename} does not exist`);
     }
 }
 
-fixFontPath('semantic/src/themes/basic/elements/icon.variables');
-fixFontPath('semantic/src/themes/default/globals/site.variables');
-fixFontPath('semantic/src/themes/flat/globals/site.variables');
-fixFontPath('semantic/src/themes/github/elements/icon.variables');
-fixFontPath('semantic/src/themes/material/elements/icon.variables');
-fixFontPath('semantic/src/themes/material/globals/site.variables');
+[
+    'semantic/src/themes/basic/elements/icon.variables',
+    'semantic/src/themes/default/globals/site.variables',
+    'semantic/src/themes/flat/globals/site.variables',
+    'semantic/src/themes/github/elements/icon.variables',
+    'semantic/src/themes/material/elements/icon.variables',
+    'semantic/src/themes/material/globals/site.variables',
+].forEach(fixFontPath);

gulpfile.js

@@ -7,47 +7,40 @@ const SEMANTIC_GULP = path.resolve(__dirname, 'semantic', 'gulpfile.js');
 const THEME_NAME = 'theme';
 
 gulp.task('build', () => {
-    return gulp.src(SEMANTIC_GULP)
-        .pipe(chug({ tasks: [ 'build' ]}));
+    return gulp.src(SEMANTIC_GULP).pipe(chug({ tasks: ['build'] }));
 });
 
 gulp.task('build-javascript', () => {
-    return gulp.src(SEMANTIC_GULP)
-        .pipe(chug({ tasks: [ 'build-javascript' ]}));
+    return gulp.src(SEMANTIC_GULP).pipe(chug({ tasks: ['build-javascript'] }));
 });
 
 gulp.task('build-css', () => {
-    return gulp.src(SEMANTIC_GULP)
-        .pipe(chug({ tasks: [ 'build-css' ]}));
+    return gulp.src(SEMANTIC_GULP).pipe(chug({ tasks: ['build-css'] }));
 });
 
 gulp.task('build-assets', () => {
-    return gulp.src(SEMANTIC_GULP)
-        .pipe(chug({ tasks: [ 'build-assets' ]}));
+    return gulp.src(SEMANTIC_GULP).pipe(chug({ tasks: ['build-assets'] }));
 });
 
 gulp.task('clean', () => {
-    return gulp.src(SEMANTIC_GULP)
-        .pipe(chug({ tasks: [ 'clean' ]}));
+    return gulp.src(SEMANTIC_GULP).pipe(chug({ tasks: ['clean'] }));
 });
 
 gulp.task('watch', () => {
-    return gulp.src(SEMANTIC_GULP)
-        .pipe(chug({ tasks: [ 'watch' ]}));
+    return gulp.src(SEMANTIC_GULP).pipe(chug({ tasks: ['watch'] }));
 });
 
-gulp.task('copy-to', () =>{
-    return gulp.src(THEME_NAME + '/**/*.*', { base: '.'})
-        .pipe(gulp.dest('semantic/src/themes/'));
+gulp.task('copy-to', () => {
+    return gulp.src(THEME_NAME + '/**/*.*', { base: '.' }).pipe(gulp.dest('semantic/src/themes/'));
 });
 
-gulp.task('copy-from', [ 'copy-theme-config' ],  () => {
-    return gulp.src('semantic/src/themes/' + THEME_NAME + '/**/*.*')
+gulp.task('copy-from', ['copy-theme-config'], () => {
+    return gulp
+        .src('semantic/src/themes/' + THEME_NAME + '/**/*.*')
         .pipe(gulp.dest('./' + THEME_NAME));
 });
 
 gulp.task('copy-theme-config', () => {
     del('./theme.config');
-    return gulp.src('semantic/src/theme.config')
-        .pipe(gulp.dest('.'));
+    return gulp.src('semantic/src/theme.config').pipe(gulp.dest('.'));
 });