You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
Ludwig Behm d5b74e2182 changed entrypoint links on landing page 8 months ago
..
dist changed entrypoint links on landing page 8 months ago
src update pointer style 9 months ago
.gitignore Renaming landing_page directory to website 1 year ago
Dockerfile Renaming landing_page directory to website 1 year ago
README.md Renaming landing_page directory to website 1 year ago
package-lock.json Bump ini from 1.3.5 to 1.3.7 in /website 9 months ago
package.json Renaming landing_page directory to website 1 year ago
postcss.config.js Renaming landing_page directory to website 1 year ago
webpack.config.js Renaming landing_page directory to website 1 year ago
yarn-error.log Renaming landing_page directory to website 1 year ago

README.md

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.