Custom loader

Custom loader official website address

1. Preparation

  • NPM init -y generates a package.json file with the default contents

  • NPM install webpack webpack- CLI install dependency

    Note: If multiple people collaborate, provide the same image source to install dependent development specifications

    1. Create an. NPMRC file in the root directory and add the following content:

    registry=https://registry.npm.taobao.org
Copy the code

    2. Use the command line to set up the mirror source: NPM config set registry at https://registry.npm.taobao.org

    It is recommended to use.npmrcThe file

  • Install other dependencies

    npm install -D clean-webpack-plugin html-webpack-plugin
Copy the code

2. The first custom loader

2.1. Match a Loader

To match a single loader, use path.resolve directly to your own custom loader to write a function that converts hello to hello in the entry file

1. Create the my-first-loader.js file under SRC according to laoder usage rules

module.exports = function (source) {
  return source.replace('hello'.'hello')}Copy the code

2. Add the following content to the webpack.config.js file:

const path = require('path')
module.exports = {
  rules: [{test: '/\.js$/'.use: path.resolve(__dirname, 'src/my-first-loader.js')}}]Copy the code

3. Run the NPM run dev command to package the package

4. Go to the index. HTML page in the dist folder to view the result

2.2. Match Multiple Loaders

To match multiple loaders, WebPack provides a resolVeloader. modules configuration to manage multiple loaders as a whole. Webpack retrieves corresponding loaders from this configuration when packaging

The ability to write a parse less file

2.2.1. Use the Loader provided by NPM

You need to install style-loader CSS-loader less less-loader in the development environment

module.exports = {
  rules: [{test: '/\.less$/'.use: ['style-loader'.'css-loader'.'less-loader']]}}Copy the code

When webpack processes less files, multiple Loaders are required to process them together. The resolution sequence is from last to first. Less-loader, CSS-loader, and style-loader are executed first.

2.2.2. Customize Loader processing

< span style = “max-width: 100%; clear: both; min-width: 1px Page in the head.

1. Create a lib folder, manage loader files, and create my-less-loader in the lib folder

const less = require('less')

module.exports = function (source) {
  less.render(source, (error, output) = > {
    this.callback(error, output.css)
  })
  return Callback () always returns undefined when called
}
Copy the code

This.callback () refers to the Loader API

2. Create my-CSS-loader in the lib folder

module.exports = function (source) {
  return JSON.stringify(source)
}
Copy the code

3. Create my-style-loader in the lib folder

module.exports = function (source) {
  return `
      const tag = document.createElement('style')
      tag.innerHTML = ${source}
      document.head.appendChild(tag)
  `
}
Copy the code

4. Package the results