workadventure/website
2020-10-16 10:01:20 +02:00
..
dist Fixing TCM map URL in Choose your map page 2020-10-16 10:01:20 +02:00
src Adding documentation page regarding editing your own map 2020-07-05 19:08:37 +02:00
.gitignore Renaming landing_page directory to website 2020-06-04 14:06:50 +02:00
Dockerfile Renaming landing_page directory to website 2020-06-04 14:06:50 +02:00
package-lock.json Merge pull request #296 from thecodingmachine/dependabot/npm_and_yarn/website/elliptic-6.5.3 2020-10-08 16:03:53 +02:00
package.json Renaming landing_page directory to website 2020-06-04 14:06:50 +02:00
postcss.config.js Renaming landing_page directory to website 2020-06-04 14:06:50 +02:00
README.md Renaming landing_page directory to website 2020-06-04 14:06:50 +02:00
webpack.config.js Renaming landing_page directory to website 2020-06-04 14:06:50 +02:00
yarn-error.log Renaming landing_page directory to website 2020-06-04 14:06:50 +02:00

Basic Webpack config for simple website.

Install all packages:

$ npm install

Run webpack

$ npm run build

Done! Open index.html in browser for a cat image.


Notice about production mode and postcss.config.js

In postcss.config.js there is a check for process.env.NODE_ENV variable. The thing is even if you set Webpack mode to production it won't automatically change Node environment variable.

The simplest way to configure this is to install cross-env package:

$ npm install --save-dev cross-env

Then just add another npm script in package.json for production mode:

"scripts": {
  "build": "webpack --config webpack.config.js",
  "build-production": "cross-env NODE_ENV=production webpack --config webpack.config.js"
}

Now when you run npm run build-production the process.env.NODE_ENV variable will be production and postcss.config.js check is going to work:

if(process.env.NODE_ENV === 'production') {
    module.exports = {
        plugins: [
            require('autoprefixer'),
            require('cssnano')
        ]
    }
}

From Webpack documentation: Technically, NODE_ENV is a system environment variable that Node.js exposes into running scripts. It is used by convention to determine dev-vs-prod behavior by server tools, build scripts, and client-side libraries. Contrary to expectations, process.env.NODE_ENV is not set to "production" within the build script webpack.config.js. Thus, conditionals like process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js' within webpack configurations do not work as expected.