Preface: the author study webpack knowledge from the foundation to the principle to write a series, in order to review. Hope to help more friends who are learning Webpack.

Webpack series learning – First experience

Webpack series learning – Basic Usage one

Webpack series learning – various loaders to use

Webpack series learning – hot update and compression

Use ESLint in WebPack

Integration with CI/CD systems

Added preCOMMIT hooks to the local development phase

  • Install the husky
npm i husky -D
Copy the code
  • Add NPM scripts to incrementally check modified files by lint-staged
"scripts": {"precommit":"lint-staged"
  },
  "lint-staged": {"linters:{ "*.{js,css}": ["eslint --fix","git add"]}}Copy the code

And webpack integration

  • With eslint-Loader, check the JS specification at build time
// webpack.config.js
    module.exports = {
        module: {rules:[
                {
                    test:/\.js$/,
                    exclude:/node_modules/,
                    use:[
                        "babel-loader"."eslint-loader"}]}}Copy the code

Use eslint – loader

  • Installing dependency packages
npm i eslint eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint-loader babel-eslint eslint-config-airbnb -D
Copy the code
  • Add eslint-Loader to Webpack
// webpack.config.js
    module.exports = {
        module: {rules:[
                {
                    test:/\.js$/,
                    exclude:/node_modules/,
                    use:[
                        "babel-loader"."eslint-loader"}]}}Copy the code
  • Create.eslintrc.js in the root directory
module.exports = {
        "parse":"babel-eslint"."extends":"airbnb"."env": {"browser":true."node":true
        }
        // Custom rules
        // rules:{

        / /}
    }
Copy the code
  • Packaging builds after the command you can see esLint prompt code errors

Webpack packages components and base libraries

Implement a large integer plus library package

  • You need to package the compressed and uncompressed versions
  • Support AMD/CJS/ESM module introduction

The name of the packaged output library

  • Uncompressed version of large-number.js
  • Compress large – number. Min. Js

How do I expose the library

  • Library: Specifies a global variable for the library
  • LibraryTarget: A way to support library introduction

start

  • Create a new project folder large-number
  • Create a new project folder large-number
  • Install webpack
npm i webpack webpack-cli -D
Copy the code
  • Install terser webpack — the plugin
npm i terser-webpack-plugin -D
Copy the code
  • Create a webpack. Config. Js
const TerserPlugin = require('terser-webpack-plugin');

    module.exports = {
        entry: {"large-number":"./src/index.js"."large-number.min":"./src/index.js",},output: {filename:'[name].js'.library: 'largeNumber'.libraryTarget:"umd".libraryExport:'default'
        },
        mode: 'none'.optimization: {
            minimize: true.minimizer: [
                new TerserPlugin({
                    include: /\.min\.js$/,})]}}Copy the code
  • Create a SRC/index. Js
export default function add(a, b) {
        let i = a.length - 1;
        let j = b.length - 1;

        let carry = 0;
        let ret = ' ';
        while (i >= 0 || j >= 0) {
            let x = 0;
            let y = 0;
            let sum;

            if (i >= 0) {
                x = a[i] - '0';
                i --;
            }

            if (j >= 0) {
                y = b[j] - '0';
                j --;
            }

            sum = x + y + carry;

            if (sum >= 10) {
                carry = 1;
                sum -= 10;
            } else {
                carry = 0;
            }
            / / 0 + ' '
            ret = sum + ret;
        }

        if (carry) {
            ret = carry + ret;
        }

        return ret;
    }
Copy the code
  • Create index.js in the root directory
// Distinguish between production and test environments
    if (process.env.NODE_ENV === 'production') {
        module.exports = require('./dist/large-number.min.js');
    } else {
        module.exports = require('./dist/large-number.js');
    }
Copy the code
  • Increase the NPM scripts
 "scripts": {
        "build": "webpack",
        "prepublish": "webpack"
    },
Copy the code

  • Package the NPM run build

  • Release NPM package

    • npm login
    • npm publish

  • Use large-count packages in other projects

  • The installation

 npm i large-count -S
Copy the code
  • use
import largeCount from 'large-count';

  render(){
      const largeRes = largeCount('99'.'1')
      return (
          <div>
              { largeRes }
          </div>)}Copy the code
  • Package the NPM Run build and see the results as normal

The above code is posted on Github

Debug can be downloaded.