Reference book “In Plain English Webpack”

Following the previous chapter, this article introduces several common configurations

1. Module

Module is the rule that configures processing modules and has three main parts.

  • Loader (see previous chapter)
  • noParse
  • parse

1.2 noParse

NoParse filters out files that do not need to be parsed to improve performance, such as third-party libraries (react,react-dom)

module: {
    noParse: '/react|react-dom/'
}
Copy the code

1.3 the parse

The difference with noParse configuration items is that Parser can be parsed down to the syntax level, allowing for more fine-grained configuration of which module syntax is parsed and which is not, whereas noParse only controls which files are not parsed.

Module: {rules: [parser: {amd: false / / Disable AMD CommonJs: false, / / disable COMMONJS}]}Copy the code

2. Resolve

Resolve configures how Webpack finds files for modules.

  • alias
  • extensions

2.1 alias

Create an alias for import or require to make module introduction easier.

If I wanted to introduce a component at/SRC /components/button, I would write it without setting alias:

import Button from './src/components/button'

If I configure alias, I can abbreviate it to

import Button from 'components/button'

resolve:{ 
     alias : { 
     components : './src/components/'
     }
}
Copy the code

If you want to hit a specific file, you can write alias

resolve:{ 
    alias : { 
    'react$' :'./path/to/react.min .js'
    }
}
Copy the code

2.2 extensions

The Extensions configuration allows you to import modules without suffix names

Extensions: ['.js','json'] // This is the defaultCopy the code

That is, when you want to import the react.js file, you can write something like this

import react from './path/to/react'
Copy the code

3. DevServer

DevServer is for development efficiency, not packaging. To use this command, you need to install NPM I -d webpack-dev-server. The webpack-dev-server command cannot be used directly in the terminal, but must be configured in package.json before NPM run server can be started (the command can be customized).

  • hot
  • port
  • open
  • contentBase

3.1 hot

This is one of the most useful features of DevServer. It allows you to write code without having to refresh. It replaces the original code with the modified code, implementing partial updates. The need to form a complete set of HotModuleReplacementPlugin used together.

const webpack = require("webpack"); Exports = {devServer: {hot: true}, plugins: [new webpack HotModuleReplacementPlugin () / / use webpack plug-ins]}Copy the code

Ps: If you use webpack hot update, modify the style file, do not hot update to the style file. It is possible that the style file is separated from the JS file, so the style file does not take effect.

3.2 the port

The devServer.host configuration item is used to configure port 8080 for devServer services. By default, port 8081 is used if port 80 is occupied by another program.

3.3 the open

When Dev Server is started and first built, it automatically opens the web page to be developed using our system’s browser.

3.4 contentBase

Configure the DevServer HTTP server file root directory. You can do this if you want to set the public directory in the project root directory to the file root of the DevServer server.

DevServer :{contentBase: path.join(dirName, 'public')}Copy the code

4. devtool

Select a Source Map format to enhance the debugging process. Different values significantly affect the speed of build and rebuild. For details, please refer to Webpack Chinese Devtool