Skip to content

Webpack Notes

Resources

Plugins

Articles

font-awesome config with webpack and foundation

  • webpack config - allow to process image and font files.
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
  • Configure scss imports
  • In _settings.scss add $fa-font-path: "~font-awesome/fonts"; to end of the page.
  • In app.scss add @import '~font-awesome/scss/font-awesome'; after @import "settings".

Errors and notes

Wordpress Configuration

  • wp_enqueue_script( $this->plugin_name, \PASEO_WP_FORM_DIR_URL . 'site/assets/paseo-wp-form-api.js', array('jquery'), $this->version, false ); - enqueue with jQuery as a dependency.
  • Use externals to not include jquery in the bundle but use the Wordpress instance of jquery.
  externals: {
    jquery: 'jQuery'
  },
  • Add webpack.ProvidePlugin with jQuery as the global variable.
    new webpack.ProvidePlugin({
      jQuery: 'jquery'
    })
"target": "es5",
"lib": [
       "es2016", "dom"
     ],