Loader configuration and preparation of webpack3.0 (i.)

The loader is used to convert the module's source code. Loader allows you to preprocess files when you import or "load" the module. Loader can convert a file from a different language (such as TypeScript) to JavaScript, or convert an inline image to a data URL. Loader even allows you to import CSS files directly in the JavaScript module!

Before we learn more about loader, we are familiar with the common configuration rules for loader. There are two common types of configuration rules:

Rule 1:

The value of options in the loader configuration can be obtained during loader execution, handled appropriately, or you can add the query parameter directly to the loader path with the following configuration:

rules: [   {      /\.text$/,      ' text-loader?name=1 '// If the options option is configured, The query parameter added in the path cannot be obtained    }]

You can also use the resolveLoader.modules configuration, Webpack will search for these loaders from these directories. For example, if you have a local directory in your project /loaders and a directory with a loader file named Text-loader.js, you can configure this:

resolveloader: {  modules: [    ' node_modules ',    ' loaders ')  ]},module: {    Rules: [        {          /\.text$/,          ' text-loader '// If the Node_modules directory does not exist, Then the loaders directory will be taken to find         }    ]}

If you want to match multiple loader for a file of a certain type, you can configure it according to the following rules, multiple loader modules are used! Split, and the actual loader execution order is from right to left

/\.scss$/, Loader:' Style-loader!css-loader!sass-loader '}

Rule 2:

If you want to match multiple loader, you can also use the usage configuration array, the actual loader execution order is from bottom to top

{  /\.scss$/,  use:[    {      loader:' Style-loader ',      options:{}    },    { Loader:' Css-loader ' },    {loader:' Sass-loader ' }  ]}

If no extra configuration is made for the introduced loader, you can add the loader name to the use array:

{  /\.scss$/,  use:[' style-loader ', ' css-loader ', ' Sass-loader ']}

Once you're familiar with the basic configuration rules for loader, let's start learning how to write your own loader.

WEBPACK3.0 Loader loader configuration and writing (ii)

Loader configuration and preparation of webpack3.0 (i.)