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
}
}]
}
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.
Is there any way to print the full webpack config generated during the build?