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"]
                    }
                }
            }
        ]
    }
 };