webpack custom loader and posted to npm

First, the interpretation of the loader's official website:

　　1, loader module is derived as a function of the node. This function is called when the loader converting resources. Given function will call the  Loader API , and through  this access to the context.

　　https://webpack.docschina.org/contribute/writing-a-loader

　　2, loader which features have?

　　https://webpack.docschina.org/concepts/loaders/#loader-features

　　loader module for converting the source code. loader can make you  import or "load" file preprocessing module. Therefore, loader similar to other build tools "task (task)", and provides a powerful approach to the front steps of the building. The loader can files from different languages (e.g., typescript) into JavaScript or inline image into data URL. loader even allows you to directly in JavaScript module  import CSS file!

Two, three, local development and testing of methods:

　　The following is an example to achieve in the development and production environment, each path introducing different resource files. First, we write a loader in the build directory:

　　

　　index.js static-loader in the code:

let loaderUtils = require('loader-utils');

module.exports = function(source) {
  let options = loaderUtils.getOptions(this) || {};
  source = source.replace(/(\/static\/)(.*?\.(png|jpe?g|gif|webp))/g, options.replace + '$2');
  return source
}

　　Test Method 1 single loader, matching (Test), the rule may be simply provided by the object  path.resolve points to the local file

  rules: [
      {
        test: /\.(js|vue|css)$/,
        loader: path.resolve(__dirname, './Loaders/static-loader/index.js'),
        include: path.resolve(__dirname, '../src'),
        exclude: path.resolve(__dirname, '../node_modules'),
        options: {
          replace: process.env.NODE_ENV == 'production' ? './production/static/' : './development/static/'
        }
      }
   ]

　　Test Method 2, match (test) a plurality of loaders, may be used  resolveLoader.modules configuration, which will be searched WebPACK loaders from these directories.

  resolveLoader: {
    modules: [
      path.resolve(__dirname, '../build/Loaders'),
      'node_modules'
    ]
  },
  module: {
    rules: [
      {
        test: /\.(js|vue|css)$/,
        loader: path.resolve(__dirname, './Loaders/static-loader/index.js'),
        include: path.resolve(__dirname, '../src'),
        exclude: path.resolve(__dirname, '../node_modules'),
        options: {
          replace: process.env.NODE_ENV == 'production' ? './production/static/' : './development/static/'
        }
      }]
    }

　　Test Method 3, to create a separate library and packages that you can use  npm linkto be associated to the project you want to test.

　　1, first established himself on github repository, clone to the local Executive npm init to initialize the project, the following new files.

　　　 Use .gitignore and .npmignore will node_modules excluded. index.js for the loader code.

　　　　

　　2, the implementation npm link in the local repository folder, if you encounter permission problems, execute sudo npm link

 　　3, in another project file, execute sudo npm link custome-tian-loader, the lower loader mapping definition from the project to the current directory node_modules

　　　　https://docs.npmjs.com/cli/link

Third, the loader will be uploaded to npm

　　1, the first in a npm npmjs.com registered account, after setting mailbox will receive a verification email, you need to click on the link to post a module

　　2, the implementation npm adduser username or npm login

　　3, the implementation npm publish, discover the error:

 　 4, solve the wrong way:

　　　　a. Check whether the warehouse was set Taobao has become the image library
　　　　　　npm config get registry

　　　　　　https://registry.npm.taobao.org/

　　　　. b If yes, then set it back to the original warehouse
　　　　　　npm the SET Registry config = HTTP: //registry.npmjs.org
　　　　. c login account (if not Login)
　　　　　　npm npm adduser add a user or the Login

　　　　d. Again released
　　　　　　npm publish

　　　　e. 如发布成功，则再次将仓库地址设为淘宝镜像地址
　　　　　　npm config set registry=https://registry.npm.taobao.org/

　　5、发布上去后，在npmjs.com官网就可以看到自己的loader模块：

　　6、在项目中npm i custome-tian-loader，就可以和引入其他node模块一样引入自己的loader了：

rules: [
      {
        test: /\.(js|vue|css)$/,
        loader: 'custome-tian-loader',
        include: path.resolve(__dirname, '../src'),
        exclude: path.resolve(__dirname, '../node_modules'),
        options: {
          replace: process.env.NODE_ENV == 'production' ? './production/static/' : './development/static/'
        }
      }
]