Target

The target value describe
web For browsers(the default)All the code in one file
node For Node.js, use therequireStatement loads Chunk code
async-node For Node.js, load Chunk code asynchronously
webworker In view of the WebWorker
electron-main forElectronThe main thread
electron-renderer For the Electron render thread

For example, when you set target:’node’, the source code statement require(‘fs’) importing the node.js native module will be retained, and the fs module’s contents will not be packaged into Chunk.

Devtool

Devtool configures how the Source Map is generated by Webpack. The default value is false, which means that the Source Map is not generated.

module.export = {
  devtool: 'source-map'
}
Copy the code

Watch and WatchOptions

Listening mode: Listens for file updates and recompiles when the file changes.

Webpack listening mode is disabled by default. The following configuration is required to enable it:

module.export = {
  watch: true
}
Copy the code

When DevServer is used, the listening mode is turned on by default.

In addition, Webpack also provides the watchOptions configuration to control the listening mode more flexibly, using the following:

module.export = {
  // watchOptions only make sense if listening mode is enabled
  // Default is false, that is, not enabled
  watch: true.// Listen for the mode runtime parameters
  // Only when listening mode is enabled
  watchOptions: {
    // A file or folder that is not listened on and supports regular matching
    // Empty by default
    ignored: /node_modules/.// Wait 300ms to execute the action after listening to the change to prevent the file update too fast and recompile too frequently
    // the default is 300ms
    aggregateTimeout: 300.// Determine whether the file has changed by constantly asking the system whether the specified file has changed
    // Query every 1000 milliseconds by default
    poll: 1000}}Copy the code

Externals

Externals is used to tell Webpack which modules are used in the code to build that need not be packaged, meaning that these templates are provided by the external environment and Webpack can ignore them when packaging.

module.export = {
  externals: {
    // Replace jquery in the import statement with the global jquery variable in the runtime
    jquery: 'jQuery'}}Copy the code

ResolveLoader

ResolveLoader tells Webpack how to find the Loader

ResolveLoader’s default configuration is as follows:

module.exports = {
  resolveLoader: {// Go to the directory to find Loader
    modules: ['node_modules'].// The suffix of the entry file
    extensions: ['.js'.'.json'].// A field specifying the location of the entry file
    mainFields: ['loader'.'main']}}Copy the code

This configuration item is used to load the local Loader.