webpack basic

9 years ago · 366a01ab60
commit 366a01ab60
6 changed files with 77 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+node_modules
--- a/index.html
+++ b/index.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <main></main>
+        <script src="dist/bundle.js" charset="utf-8"></script>
+    </body>
+</html>
--- a/js/index.js
+++ b/js/index.js
@ -0,0 +1,7 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+
+ReactDOM.render(
+    <h1 className="foo">Hello, world!</h1>,
+    document.querySelector('main')
+);
--- a/js/mylib.js
+++ b/js/mylib.js
@ -0,0 +1,18 @@
+const myFunc = function(){
+    console.log('included!');
+}
+
+export default myFunc;
+
+const myFunc2 = function(){
+    console.log('also included');
+}
+
+const unnecessary = function(){
+    console.log('unnecessary');
+}
+
+export {
+    myFunc2,
+    unnecessary as omitme
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,21 @@
+{
+  "name": "test",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+      "build": "webpack-dev-server --open"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "webpack": "^2.5.1",
+    "webpack-dev-server": "^2.4.5"
+  }
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,19 @@
+module.exports = {
+    entry: './js/index.js',
+    output: {
+        filename: 'dist/bundle.js'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx)$/, //for all files that end with js/jsx
+                use: {
+                    loader: 'babel-loader', //use the babel loader to load:
+                    options: {
+                        presets: ["es2015", "react"]
+                    }
+                }
+            }
+        ]
+    }
+};