Please include purge css in the config or provide the procedure for adding autoprefixer, cssnano and purge css for production build.

How can we auto reload HTML on save as well?

when I run the code 'npm run dev' in the terminal it outputs the error 'npm ERR! missing script: dev'.
npm-debug.log

The devDependency clean-webpack-plugin was updated from 2.0.1 to 2.0.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

clean-webpack-plugin is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

When installing dependencies trough npm you get the message: found 74 high severity vulnerabilities.

This can be fixed with a fairly simple update to the package-lock.json.

Will provide fixing pull request so you can check

Hi there,

Thanks for this great starter kit. I have a little issue. I am trying to configure the webpack prod file to generate multiple HTML files using this approach, but when I do the build its simply dumping raw HTML in console.

Can you help ?

Thanks

Hi,

I was wondering what the advantage/logic is behind having a folder called "public" with an empty .gitkeep file inside. I found this public folder inside the starter zip and inside the "build" folder after running "npm run build".

After some googling and looking through the configs I still couldn't figure out why they are there. Would love to know.

Thanks!

When I run command 'npm run build' nothing happens. I don't see any errors, but the public directory is empty. It happens also on empty and fresh template.

There have been updates to the babel7 monorepo:

• • The devDependency @babel/core was updated from 7.4.3 to 7.4.4.

• The devDependency @babel/plugin-proposal-class-properties was updated from 7.4.0 to 7.4.4.
• The dependency @babel/polyfill was updated from 7.4.3 to 7.4.4.
• The devDependency @babel/preset-env was updated from 7.4.3 to 7.4.4.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

Fails to load in SVG's for me.
I've added the following into webpack.config.helper.js in the rules section.

{
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader'
}

And getting You may need an appropriate loader to handle this file type. on all the SVG types. Any suggestions?

Hello,
I am getting promise undefined error on IE11. I have installed core-js (v3) and imported it in my entry js file but the error is still there.

ModuleConcatenationPlugin is deprecated and config.optimization.concatenateModules should be used. Right now try to figure out what needs be changed in webpack.config.prod.js after that hopefully will create PR.
https://webpack.js.org/migrate/4/#deprecatedremoved-plugins

Hi, can you please tell me when we do
npm start
index.js is executed? It is not referenced in index.html, so what is making it getting executed?
I added a ne js file in src/scripts but it does not get executed
Thanks

To reproduce just clone the master branch then run:

npm install

You should receive the message:

found 2 high severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details

Then after running npm fix audit

+ [email protected]
removed 3 packages and updated 3 packages in 109.493s
fixed 2 of 2 vulnerabilities in 11519 scanned packages

So I think you should update your package.json to take this into account.

npm WARN build npm buildcalled with no arguments. Did you mean tonpm run-script build?

This is a great starterkit, however I seem to have problems loading fonts. When I try to load a font in my src directory I encounter an error:

ERROR in ./node_modules/css-loader?sourceMap=true!./node_modules/sass-loader/lib/loader.js!./src/styles/index.scss
Module not found: Error: Can't resolve './assets/digital-7.ttf' in '/Users/AlexanderFallenstedt/Code/personal/threejs-solar-system/src/styles'
 @ ./node_modules/css-loader?sourceMap=true!./node_modules/sass-loader/lib/loader.js!./src/styles/index.scss 6:80-113
 @ ./src/styles/index.scss
 @ ./src/scripts/index.js
 @ multi (webpack)-dev-server/client?http://localhost:1337 webpack/hot/dev-server ./src/scripts/index

How I am attempting to load the font:

@font-face {
  font-family: digital;
  src: url('./assets/digital-7.ttf');
}
h1 {
  font-family: digital;
}

I'm going through your webpack.config-helper.js however I'm unsure what plugin is needed if any.

Our app is choking when we load it up in IE 11. We are getting SCRIPT1002: Syntax error on the chunk.js file. It is having trouble with multiple things in that file. What are we missing for Babel to transpose all that to es5?

chunkjs.txt

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": "3.0.0"
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}

webpack.common.js

const Path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: Path.resolve(__dirname, '../src/scripts/index.js')
  },
  externals: {
    // jQuery: 'jQuery',
    foundation: 'Foundation'
  },
  output: {
    path: Path.join(__dirname, '../build'),
    filename: 'js/[name].js'
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: false
    }
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin([
      { from: Path.resolve(__dirname, '../public'), to: 'public' }
    ]),
    new HtmlWebpackPlugin({
      template: Path.resolve(__dirname, '../src/index.html')
    })
  ],
  resolve: {
    alias: {
      '~': Path.resolve(__dirname, '../src')
    }
  },
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      },
      {
        test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]'
          }
        }
      },
    ]
  },
  
};

webpack.config.dev.js

const Path = require('path');
const Webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'cheap-eval-source-map',
  output: {
    chunkFilename: 'js/[name].chunk.js'
  },
  devServer: {
    inline: true
  },
  plugins: [
    new Webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    }),
    new Webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: Path.resolve(__dirname, '../src'),
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          emitWarning: true, 
        }
      },
      {
        test: /\.js?x?$/,
        include: Path.resolve(__dirname, '../src'),
        exclude: /node_modules\/(?![gsap\-es|lodash\-es])/,
        loader: 'babel-loader',
        query: {
          "presets": ["@babel/preset-env", "@babel/preset-react"],
        }
      },
      {
        test: /\.s?css$/i,
        use: ['style-loader', 'css-loader?sourceMap=true', 'sass-loader']
      },
    ],
  },
});

webpack.config.prod.js

const Webpack = require('webpack');
const merge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
  // devtool: 'source-map',
  stats: 'errors-only',
  bail: true,
  output: {
    // filename: 'js/[name].[chunkhash:8].js',
    // chunkFilename: 'js/[name].[chunkhash:8].chunk.js'
    filename: 'js/[name].js',
    chunkFilename: 'js/chunk.js'
  },
  plugins: [
    new Webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new Webpack.optimize.ModuleConcatenationPlugin(),
    new Webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
  }),
    new MiniCssExtractPlugin({
      filename: 'bundle.css'
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js?x?$/,
        exclude: /node_modules\/(?![gsap\-es|lodash\-es])/,
        loader: 'babel-loader',
        query: {
          "presets": ["@babel/preset-env", "@babel/preset-react"],
        }
      },
      {
        test: /\.s?css/i,
        use : [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
});

browserslistrc

[production staging]
>5%
last 2 versions
Firefox ESR
not ie < 11

[development]
last 1 chrome version
last 1 firefox version
last 1 edge version

I would like to do "npm start" and then view the scss file being compiled, is this not possible?
I get this error message:

ERROR in ./src/scripts/index.js
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: No ESLint configuration found.

I thought this repo would have everything needed to run sass in dev mode?

Running the command "npm run build" outputs the error:
clean-webpack-plugin: C:\Users......\webpack-starter\build has been removed.

The devDependency webpack was updated from 4.35.3 to 4.36.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hi,
I try to install with "npm install" and the first error message is:

"Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9 .4/win32-x64-67_binding.node Cannot download "https://github.com/sass/node-sass/releases/download/v4.9.4/win3 2-x64-67_binding.node": HTTP error 404 Not Found
--"
thank you for help.

I'm trying to load a background image like so:
<div class="page-header" style="background-image: url('./img/background.jpg')">
but I get a 404 on the image url. The img folder is inside src.
I've also tried writing it like this url('~img/background.jpg') but I get the same result. Can you please let me know how I can solve this? Thanks!

Hi all,
I new to webpack and this starter template and am trying to include multiple JS files as part of my project along side index.js. How does importing work in this repository? Can I still import via a CDN in the HTML?

I'm a first timer in this and found that npm run start gave me the dev server, not npm run:

package.json:
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js --colors",
"start": "webpack-dev-server --open --config webpack/webpack.config.dev.js"
},

Please verify your instructions in README.md and adjust accordingly if I'm correct.

Hello, I am having an issue running npm install. Is this related to webpack-starter?

$ npm install
npm ERR! Windows_NT 10.0.18362
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\Mike\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "install"
npm ERR! node v12.16.2
npm ERR! npm v3.6.0

npm ERR! primordials is not defined
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! C:\users\mike\jsdev\webpack-starter\npm-debug.log

Thank you!

Hi, I have Chrome and Edge on my win10 box. When I do npm start, it luaunches IE instead of those 2 browsers.
After googling, I adde a bs-config.json in the root, restart, still opens IE11
Thanks

Hello,
Is there a way to inject CSS directly in the HTML instead using Javascript to load it?
During development on page refresh all elements get displayed "unstyled" for few seconds.
Thanks

npm start not working : node version v10.15.2

When I type the command npm start in my terminal in VS Code , browser opened up http://localhost:8080/
but the changes made to index.js are not reflected in browser ?
Am I doing something wrong here ?

I have tried few options like host: '0.0.0.0', port: 8080 in "dev" object but did not work. Any ideas to get it to work so we can test how page displays on various mobile screens?

Great project!

It would be good to add stylelint and postcss (autoprefixer, cssnano)

Dependabot encountered the following error when parsing your .dependabot/config.yml:

Automerging is not enabled for this account. You can enable it from the [account settings](https://app.dependabot.com/accounts/wbkd/settings) screen in your Dependabot dashboard.

Please update the config file to conform with Dependabot's specification using our docs and online validator.

i removed .eslintrc in favor of .eslintrc.js
but eslint ignores my relaxed semicolon config

the config propagates to node_modules/eslint/lib/rules/semi.js
where options.omitLastInOneLineBlock is true
but still, it has no effect,
or there is a second pass of eslint that ignores my config

im stuck, please help : /

// .eslintrc.js

// debug
console.log('hello from .eslintrc.js');

module.exports = {
  rules: {
    // relaxed semicolon config
    semi: ["error", "always", { omitLastInOneLineBlock: true }],
  }
}

this .eslintrc is also ignored:

{
  "rules": {
    "semi": ["error", "always", { "omitLastInOneLineBlock": true }]
  }
}

// src/scripts/index.js

console.log('hello')
//                  ^ eslint error
console.log('world')
//                  ^ eslint error

cd /tmp
git clone --depth=1 https://github.com/wbkd/webpack-starter.git
cd webpack-starter
npm install
rm .eslintrc
cp /tmp/.eslintrc.js .
cp /tmp/index.js src/scripts/index.js
npm run start 

> [email protected] start /tmp/webpack-starter
> webpack-dev-server --open --config webpack/webpack.config.dev.js

ℹ ｢wds｣: Project is running at http://localhost:8081/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /tmp/webpack-starter
hello from .eslintrc.js
ℹ ｢wdm｣: wait until bundle finished: /
⚠ ｢wdm｣: Hash: db6471af805096a10c6e
Version: webpack 4.41.4
Time: 3418ms
Built at: 12/25/2019 3:47:05 PM
          Asset       Size  Chunks             Chunk Names
     index.html  382 bytes          [emitted]  
  js/0.chunk.js    904 KiB       0  [emitted]  
      js/app.js   14.2 KiB     app  [emitted]  app
public/.gitkeep    0 bytes          [emitted]  
Entrypoint app = js/0.chunk.js js/app.js
[0] multi (webpack)-dev-server/client?http://localhost:8081 ./src/scripts/index.js 40 bytes {app} [built]
[.... modules built ....]
    + 22 hidden modules

WARNING in ./src/scripts/index.js
Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):

/tmp/webpack-starter/src/scripts/index.js
  5:21  error  Missing semicolon  semi
  6:21  error  Missing semicolon  semi

✖ 2 problems (2 errors, 0 warnings)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 552 bytes {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Compiled with warnings.

Can we add jasmin test in this starter project?

When run npm run dev got errors !

> webpack-dev-server --open --config webpack-dev.config.js --watch --colors

module.js:471
    throw err;
    ^

Error: Cannot find module 'string-width'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (...)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --open --config webpack-dev.config.js --watch --colors`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     ....log

To fix this, need add "string-width": "^2.1.1" dependencies to package.json file.

Hi

When trying to build a project, the build doesn't seem to start.
@ First I couldn't star the build. I needed to put the 'set' command before NODE_ENV in the build script. Afterwards I could run the command 'npm run build' but the the process only starts for a split second. There's no build folder, but also no error message.

Any advice? Keep up the good work with this repo! I'm using it quite a lot

Cheerz

The devDependency copy-webpack-plugin was updated from 5.0.2 to 5.0.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

copy-webpack-plugin is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The best you can see it when you keep reloading the page and for some milliseconds the "webpack starter" text stays black until css is loaded.

The devDependency webpack-cli was updated from 3.3.1 to 3.3.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack-cli is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

I'm probably missing something simple, but I can't seem to find my assets (images/ video). Is Webpack in Dev moving the HTML somewhere? Thanks.

After cloning this repo and doing npm install. When I did npm start. My webpack-dev-server does not start, instead, it gives the below error. What could be the issue for this error?

[email protected] start D:\D-Drive\WebDevelopment\JavaScript\Pluralsight\JavaScript-Fundamentals\webpack-starter

webpack-dev-server --open --config webpack/webpack.config.dev.js

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\D-Drive\WebDevelopment\JavaScript\Pluralsight\JavaScript-Fundamentals\webpack-starter
events.js:174
throw er; // Unhandled 'error' event
^

Error: spawn cmd ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:240:19)
at onErrorNT (internal/child_process.js:415:16)
at process._tickCallback (internal/process/next_tick.js:63:19)
Emitted 'error' event at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:246:12)
at onErrorNT (internal/child_process.js:415:16)
at process._tickCallback (internal/process/next_tick.js:63:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: webpack-dev-server --open --config webpack/webpack.config.dev.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

hi , i default have one page index.html . i need about.html ,..??

Hello,
is it possible to add support for async functions to the webpack config?

I've found some approaches on how to add it, but couldn't figure it out:
https://medium.com/@tanbt/configure-async-await-es7-in-webpack-4-78adfda46eac

Basically you add this to the entry:
entry: ["@babel/polyfill", "./src/app.js"],

But i can't get it to work. I'd like to be able to run stuff like:

async function hello() { return "Hello" };
hello().then((value) => console.log(value))

Thank you!

There are some security vulnerabilities at install. It would be nice if these could be resolved.

Does this need to be updated to ../build?

I am using visual code as my editor. I copied your link and downloaded everything through my cmd prompt (windows). I tried installing everything and I am getting an error message when I use npm run dev to start up the server. I also tried using npm start and still keep getting the error message saying "scripts missing" or what not. Could you please help me fix the issue. I am doing a tutorial through plural sight and working of course with java script. Thank you for your help.

I'm trying to get up and running with this kit. I copied the contents of this repo into my own, and I'm running into the following errors after npm install and npm run dev:

/Users/cklimkow/workspace/js-lightbox/webpack.config-helper.js:3
const Path = require('path')
^^^^^
SyntaxError: Use of const in strict mode.
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/cklimkow/workspace/js-lightbox/webpack-dev.config.js:1:80)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

This one is easy enough to fix, just remove 'use strict'; from webpack.config-helper.js

Then, I'm now running into this issue:

/Users/cklimkow/workspace/js-lightbox/webpack.config-helper.js:9
module.exports = (options) => {
                           ^^
SyntaxError: Unexpected token =>
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/cklimkow/workspace/js-lightbox/webpack-dev.config.js:1:80)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

But I don't have a quick solution to this one. I was hoping this kit would be a quick drag-and-drop solution. Help?