6 年之前 · 4cb5c703d4
--- a/README.md
+++ b/README.md
@@ -0,0 +1 @@
 
				+# Webpack 4 & Babel 7 Boilerplate
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -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"
			
 
				+  }
			
 
				+}
			
--- a/src/app.js
+++ b/src/app.js
@@ -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);
			
--- a/src/js/message.js
+++ b/src/js/message.js
@@ -0,0 +1 @@
 
				+export default "Hello World";
			
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -0,0 +1,11 @@
 
				+body {
			
 
				+  background-color: #ccc;
			
 
				+
			
 
				+  h1 {
			
 
				+    color: darkred;
			
 
				+  }
			
 
				+
			
 
				+  p {
			
 
				+    color: darkblue;
			
 
				+  }
			
 
				+}
			
--- a/src/template.html
+++ b/src/template.html
@@ -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>
			
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -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;