feat: webpack dotenv support

(cherry picked from commit 6b2f41a)

docs/docs/features/bundles.md

@@ -2,7 +2,7 @@
 id: bundles
 title: Bundles
 sidebar_label: Bundles
-slug: /features
+slug: /features/
 ---
 
 Template and layout bundles are a build-time optimization which ensures
@@ -134,4 +134,4 @@ where the layout option value is the name of the layout.
 ### Bundle analyzer
 Packer's [build script](/docs/commands#build) can use Webpack Bundle Analyzer to see what's inside each bundle for further optimization
 
-![Bundle Analyzer](../../static/img/webpack-bundle-analyzer.png)
+![Bundle Analyzer](../../static/img/webpack-bundle-analyzer.png)

docs/docs/features/dotenv.md

@@ -0,0 +1,24 @@
+---
+id: dotenv
+title: Dotenv
+sidebar_label: Dotenv
+slug: /features/dotenv
+---
+
+Packer uses dotenv and webpack to load any environment values you have stored in ``.env``
+
+## Usage
+
+Create an .env file
+
+```dotenv
+S3_BUCKET="YOURS3BUCKET"
+SECRET_KEY="YOURSECRETKEYGOESHERE"
+```
+
+Use it in your code
+
+```javascript
+console.log(process.env.S3_BUCKET)
+// YOURS3BUCKET
+```

docs/sidebars.js

@@ -15,6 +15,7 @@ module.exports = {
       'config/webpack',
     ],
     Features: [
+      'features/dotenv',
       'features/bundles',
       'features/liquid-styles',
       'features/admin-api',

src/webpack/config/dev.config.js

@@ -15,6 +15,7 @@ const css = require('../parts/css');
 const scss = require('../parts/scss');
 const assets = require('../parts/assets');
 const liquidStyles = require('../parts/liquid-styles');
+const env = require('../parts/env');
 const copy = require('../parts/copy');
 
 const mergeDev = customConfigCheck(config.get('merge.dev'));
@@ -40,6 +41,7 @@ module.exports = merge([
   scss,
   css,
   copy,
+  env,
   {
     mode: 'development',
     devtool: 'eval-source-map',
@@ -65,8 +67,9 @@ module.exports = merge([
         ],
       }),
 
-      new webpack.DefinePlugin({
-        'process.env': {NODE_ENV: '"development"'},
+      new webpack.EnvironmentPlugin({
+        NODE_ENV: 'development',
+        DEBUG: false,
       }),
 
       new webpack.HotModuleReplacementPlugin(),

src/webpack/config/prod.config.js

@@ -23,6 +23,7 @@ const assets = require('../parts/assets');
 const copy = require('../parts/copy');
 const optimization = require('../parts/optimization');
 const liquidStyles = require('../parts/liquid-styles');
+const env = require('../parts/env');
 const mergeProd = customConfigCheck(config.get('merge.prod'));
 
 core.entry = {
@@ -38,6 +39,7 @@ const output = merge([
   scss,
   css,
   copy,
+  env,
   {
     mode: 'production',
     devtool: false,
@@ -55,8 +57,9 @@ const output = merge([
         filename: '[name].css',
       }),
 
-      new webpack.DefinePlugin({
-        'process.env': {NODE_ENV: '"production"'},
+      new webpack.EnvironmentPlugin({
+        NODE_ENV: 'production',
+        DEBUG: false,
       }),
 
       new HtmlWebpackPlugin({

src/webpack/parts/env.js

@@ -0,0 +1,14 @@
+const PackerConfig = require('../../config');
+const config = new PackerConfig(require('../../../packer.schema'));
+require('dotenv').config({path: `${config.get('root')}/.env`});
+const webpack = require('webpack');
+
+const env = {
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': JSON.stringify(process.env),
+    }),
+  ],
+};
+
+module.exports = env;