Article
2 comments

SPFx – Reference Webpack configuration – Web Part

The following configuration shows the webpack.js generated during the build process of a SPFx Hello World wep part. References to fixed path in the generated webpack config were replaced with the default way of resolving path. ( path.resolve(__dir ).

SPFx version: 1.9.0 – SPO

module.exports = {
  module: {
    rules: [{
      use: [{
        loader: path.resolve(__dirname, '/node_modules/@microsoft/loader-load-themed-styles/lib/index.js'),
        options: {
          async: true
        }
      }, {
        loader: path.resolve(__dirname, '/node_modules/css-loader/index.js'),
        options: {
          minimize: true
        }
      }],
      test: {}
    }, {
      use: [{
        loader: path.resolve(__dirname, '/node_modules/@microsoft/loader-cased-file/lib/index.js'),
        options: {
          name: '[name:lower]_[hash].[ext]'
        }
      }],
      test: {}
    }, {
      use: [{
        loader: path.resolve(__dirname, '/node_modules/html-loader/index.js')
      }],
      test: {}
    }, {
      test: {},
      enforce: 'pre',
      use: path.resolve(__dirname, '/node_modules/source-map-loader/index.js')
    }],
    noParse: [{}]
  },
  resolve: {
    alias: {},
    modules: ['node_modules', 'lib']
  },
  context: path.resolve(__dirname, '.'),
  devtool: 'source-map',
  mode: 'development',
  entry: {
    'hello-world-web-part': path.resolve(__dirname, '/lib/webparts/helloWorld/HelloWorldWebPart.js'),
  },
  externals: ['@microsoft/sp-lodash-subset', '@microsoft/sp-core-library', '@microsoft/sp-office-ui-fabric-core', '@microsoft/decorators', '@microsoft/sp-diagnostics', '@microsoft/sp-dynamic-data', '@microsoft/sp-page-context', '@microsoft/office-ui-fabric-react-bundle', '@microsoft/sp-polyfills', '@microsoft/sp-http', '@microsoft/sp-loader', '@microsoft/sp-component-base', '@microsoft/sp-property-pane', '@microsoft/sp-webpart-base', '@microsoft/sp-client-preview', '@microsoft/sp-extension-base', '@microsoft/sp-application-base', '@microsoft/sp-webpart-workbench', 'react', 'react-dom', 'HelloWorldWebPartStrings'],
  output: {
    chunkFilename: '[id].[name]_[chunkhash].js',
    filename: '[name].js',
    library: '9757de0abf0425f3ad93c0cf50f3216f',
    libraryTarget: 'amd',
    path: path.resolve(__dirname, '/dist'),
    devtoolModuleFilenameTemplate: 'webpack:///../[resource-path]',
    devtoolFallbackModuleFilenameTemplate: 'webpack:///../[resource-path]?[hash]'
  },
  plugins: [{
    options: {
      scriptName: {
        name: '\\/[name](_[a-z0-9-]+)*\\\\.js',
        isTokenized: true
      }
    }
  }, {
    definitions: {
      'process.env.NODE_ENV': '\'dev\'',
      DEBUG: true,
      DEPRECATED_UNIT_TEST: false,
      NPM_BUILD: false,
      DATACENTER: true
    }
  }]
}

2 Comments

  1. A problem with the above output is that the test properties of the loader rules are displayed as empty objects. This is because there’s no canonical representation for a RegExp object in JSON. A workaround is to augment the prototype: RegExp.prototype.toJSON = RegExp.prototype.toString.

    Reply

  2. Is there any way to print the full webpack config generated during the build?

    Reply

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.