0
\$\begingroup\$

I am working on a html, css and js boilerplate for my projects. My goal is to have a setup where I can fire off npm run watch and all files are watched and compiled. It also should transpile and polypill the javascript.

Actually I kind of got what I wanted. But what I don't like, is that the CSS now gets injected in the index.html in a <style> tag at the top of the document. But this index.html with the injected CSS is not compiled, it's just presented by the live server.

Any ideas on how compile the CSS in it's own file? Besides that, has anybody any further tips for a such a boilerplate?

package.json

{
  "name": "webpack-babel-boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-transform-runtime": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "autoprefixer": "^9.5.1",
    "babel-loader": "^8.0.5",
    "browser-sync": "^2.26.5",
    "browser-sync-webpack-plugin": "^2.2.2",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.1",
    "extract-loader": "^3.1.0",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "node-sass": "^4.11.0",
    "postcss-cli": "^6.1.2",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.0"
  }
}

webpack.config.js

const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')


module.exports = {
  entry: {
    app: ["./_assets/js/src/index.js", "./_assets/css/sass/style.sass"]
  },
  mode: "development",
  output: {
    path: path.resolve(__dirname, "./_assets/js/dist/"),
    publicPath: "/",
    filename: ["bundle.js"]
  },
  module: {
    rules: [{
      test: /\.js?$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-transform-runtime']
        }
      }
    },
    {
            test: /\.sass$/,
      use: [
        "style-loader", // creates style nodes from JS strings
        "css-loader", // translates CSS into CommonJS
        "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ]
            },
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      },
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader',
          options: {
            attrs: [':data-src']
          }
        }
      }
    ]
  },
  watch: true,
  plugins: [
    new BrowserSyncPlugin({
      // browse to http://localhost:3000/ during development,
      // ./public directory is being served
      host: 'localhost',
      port: 3000,
      server: { baseDir: ['./'] }
    })
  ]
}

.babelrc

{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "entry",
            "debug": true
        }]
    ]
 }

postcss.config.js

module.exports = {
    plugins: {
        'autoprefixer': {}
    }
}

./_assets/js/src/index.js

import './../../css/sass/style.sass';
import './../../../index.html';

require("@babel/polyfill");
require("./test.js")
require("./onPageLoad.js")
require("./onScroll.js")


// Testing if polyfill is working, since forEach doesnt work in some browsers
let testArray = [1,2,3,4,5];
testArray.forEach( item => {
  alert(item);
});

// Testing live reload
console.log(document.getElementsByTagName('body')[0])
document.body.style.backgroundColor = "pink"
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.