Webpack And Package Json

webpack.config.js

  • css-loader basically converts @import and url('') to a require statements
  • style-loader takes the css and inserts it into the page so the styles are active on that page
  • HtmlWebpackPlugin takes your template and puts it into dist folder with <script> tag to our main app file

Both lines make require('./index.css'); be valid

var path = require('path');
 
module.exports = {
    entry : './app/index.js',
    output : {
        path: path.resolve(___dirname, 'dist'), // ___dirname is the root of the app
        publicPath: "/dist/",
        filename: "my-first-webpack.bundle.js"
    },
    module: {
        rules: [
            { test: /\.(js)$/, use: 'babel-loader' }, // looks for the Babel property in package.json
            { test: /\.css$/, use: ['style-loader', 'css-loader']}  
        ]
    }
}

Package.json

{
  "name": "github-battle",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "babel": {
    "presets": ["env", "react"] <-- *env* means we have support for latest version of javascript, *react* means babel will transpile our JSX code
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1", //  transpiles latest version of javascript
    "babel-preset-react": "^6.24.1", // transpiles all out jsx code
    "css-loader": "^0.28.9",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.20.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  }
}

Presets

Presets are plugins provided by Babel. See https://babeljs.io/docs/plugins/

env preset - Babel preset that automatically determines the Babel plugins you need based on your supported environments.

Example:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

react preset

Supports

  • preset-flow
  • syntax-jsx
  • transform-react-jsx
  • transform-react-display-name
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License