Home Explore Help
Sign In
LInE
/
iGeomH
5
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

initial

Robertino Mendes Santiago Junior 6 years ago
commit
4cb5c703d4
8 changed files with 10356 additions and 0 deletions
Unified View Show Diff Stats
  1. 1 0
      README.md
  2. 10196 0
      package-lock.json
  3. 36 0
      package.json
  4. 11 0
      src/app.js
  5. 1 0
      src/js/message.js
  6. 11 0
      src/scss/style.scss
  7. 10 0
      src/template.html
  8. 90 0
      webpack.config.js

+ 1 - 0
README.md
View File 

@@ -0,0 +1 @@
 
+# Webpack 4 & Babel 7 Boilerplate

File diff suppressed because it is too large
+ 10196 - 0
package-lock.json


+ 36 - 0
package.json
View File 

@@ -0,0 +1,36 @@
 
+{
 
+  "name": "webpack-babel-boilerplate",
 
+  "version": "1.0.0",
 
+  "description": "",
 
+  "main": "index.js",
 
+  "scripts": {
 
+    "dev": "NODE_ENV=development webpack-dev-server --mode development --open",
 
+    "build": "NODE_ENV=production webpack --mode production",
 
+    "test": "echo \"Error: no test specified\" && exit 1"
 
+  },
 
+  "keywords": [],
 
+  "author": "",
 
+  "license": "ISC",
 
+  "devDependencies": {
 
+    "@babel/cli": "^7.1.5",
 
+    "@babel/core": "^7.1.6",
 
+    "@babel/node": "^7.0.0",
 
+    "@babel/preset-env": "^7.1.6",
 
+    "@babel/preset-react": "^7.0.0",
 
+    "@babel/register": "^7.0.0",
 
+    "babel-loader": "^8.0.4",
 
+    "babel-register": "^6.26.0",
 
+    "css-loader": "^1.0.1",
 
+    "html-webpack-plugin": "^3.2.0",
 
+    "mini-css-extract-plugin": "^0.4.4",
 
+    "node-sass": "^4.10.0",
 
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
 
+    "sass-loader": "^7.1.0",
 
+    "style-loader": "^0.23.1",
 
+    "uglify-js": "^3.4.9",
 
+    "uglifyjs-webpack-plugin": "^2.0.1",
 
+    "webpack": "^4.25.1",
 
+    "webpack-cli": "^3.1.2",
 
+    "webpack-dev-server": "^3.1.10"
 
+  }
 
+}

+ 11 - 0
src/app.js
View File 

@@ -0,0 +1,11 @@
 
+import style from './scss/style.scss';
 
+import message from './js/message';
 
+
 
+const header = document.createElement('h1');
 
+header.innerHTML = 'Webpack 4 & Babel 7';
 
+
 
+const paragraph = document.createElement('p');
 
+paragraph.innerHTML = message;
 
+
 
+const app = document.getElementById('app');
 
+app.prepend(header, paragraph);

+ 1 - 0
src/js/message.js
View File 

@@ -0,0 +1 @@
 
+export default "Hello World";

+ 11 - 0
src/scss/style.scss
View File 

@@ -0,0 +1,11 @@
 
+body {
 
+  background-color: #ccc;
 
+
 
+  h1 {
 
+    color: darkred;
 
+  }
 
+
 
+  p {
 
+    color: darkblue;
 
+  }
 
+}

+ 10 - 0
src/template.html
View File 

@@ -0,0 +1,10 @@
 
+<!DOCTYPE html>
 
+<html lang="en" dir="ltr">
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <title>Webpack Babel Boilerplate</title>
 
+  </head>
 
+  <body>
 
+    <div id="app"></div>
 
+  </body>
 
+</html>

+ 90 - 0
webpack.config.js
View File 

@@ -0,0 +1,90 @@
 
+// Imports
 
+const path = require('path');
 
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
+const BabelRegister = require("babel-register");
 
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 
+
 
+const devMode = process.env.NODE_ENV !== 'production'
 
+
 
+// Webpack Configuration
 
+const config = {
 
+
 
+  // Entry
 
+  entry: './src/app.js',
 
+
 
+  // Output
 
+  output: {
 
+    path: path.resolve(__dirname, './dist'),
 
+    filename: '[name].[chunkhash].js'
 
+  },
 
+  optimization: {
 
+    minimizer: [
 
+      new UglifyJsPlugin({
 
+        cache: true,
 
+        parallel: true,
 
+        sourceMap: true // set to true if you want JS source maps
 
+      }),
 
+      new OptimizeCSSAssetsPlugin({})
 
+    ],
 
+    splitChunks: {
 
+			cacheGroups: {
 
+				commons: {
 
+					chunks: "initial",
 
+					minChunks: 2,
 
+					maxInitialRequests: 5,
 
+					minSize: 0 
+				},
 
+				vendor: {
 
+					test: /node_modules/,
 
+					chunks: "initial",
 
+					name: "vendor",
 
+					priority: 10,
 
+					enforce: true
 
+				}
 
+			}
 
+		}
 
+  },
 
+  module: {
 
+    rules : [
 
+      {
 
+        test: /\.js$/,
 
+        exclude: /node_modules/,
 
+        use: ['babel-loader']
 
+      },
 
+      // CSS Files
 
+      {
 
+        test: /\.(sa|sc|c)ss$/,
 
+        use: [
 
+          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
 
+          'css-loader',
 
+          //'postcss-loader',
 
+          'sass-loader',
 
+        ]
 
+      }
 
+    ]
 
+  },
 
+
 
+  // Plugins
 
+  plugins: [
 
+    new HtmlWebpackPlugin({
 
+      template: './src/template.html',
 
+      filename: 'index.html',
 
+      hash: true
 
+    }),
 
+    new MiniCssExtractPlugin({
 
+      filename: devMode ? '[name].css' : '[name].[hash].css',
 
+      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
 
+    })
 
+  ],
 
+
 
+  // OPTIONAL
 
+  // Reload On File Change
 
+  watch: true,
 
+  // Development Tools (Map Errors To Source File)
 
+  devtool: 'source-map',
 
+};
 
+
 
+// Exports
 
+module.exports = config;