webpack试练03

1、tree shaking

提到tree shaking就要说到mode
当mode为develoment|none时，未使用到的模块也会被被打包进来
当mode为production时，未使用到的模块则不会被打包进了
当然希望打包进来的也是有方法的

在package.json文件中添加副作用列表，列表内的不管用没用到，都会打包进来
"sideEffects": [
  "**/*.css",
  "**/*.scss",
  "./esnext/index.js",
  "./esnext/configure.js"
],

2、Scope Hoisting

未开启时存在的问题：打包后的代码存在大量的闭包代码，导致体积增大，作用域变多，内存开销大
开启后：会被webpack加上一层包裹 import会被编译成__webpack_require，打包出IIFE(匿名闭包)
原理：将所有模块的代码按顺序放在一个函数的作用域里，然后适当的重命名一些变量以防止变量名冲突，以此来减少函数的声明和内存的开销
当mode为develoment|none时

// 可以手动开启
new webpack.optimize.ModuleConcatenationPlugin(),

当mode为production时，默认开启
仅支持es6语法

3、代码分割及动态import

动态引入import需babel插件的支持

{
  "presets": [["@babel/preset-env"], "@babel/preset-react"],
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

import React from "react";
import ReactDOM from "react-dom";
import logo from "../../../images/loaders.png";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Text: null,
    };
  }
  loadComponent = () => {
  // 在这里就可以动态引入了，这一个text组件也会单独被打包出来，当点击时则会动态加载
    import("./text.js").then((Text) => {
      this.setState({
        Text: Text.default,
      });
    });
  };

  render() {
    const { Text } = this.state;
    return (
      <div className="search">
        {Text ? <Text /> : "11"}
        <img onClick={this.loadComponent} src={logo} alt="" />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

4、在webpack中使用ESLint

创建.eslintrc.js文件

module.exports = {
  // 所使用的及继承的lint包都需要安装 
  "parser": "babel-eslint",
  "extends": "airbnb",
  // "rules": {
  //     "semi": "error"
  // },
  "env": {
    "browser": true,
    "node": true
  }
}

webpack配置修改

 module: {
    rules: [
      {
        test: /.js$/,
        use: [
          "babel-loader",
          "eslint-loader"
        ],
      },
    ]
  }

想要详细了解请看官网配置：eslint.bootcss.com/

5、webpack打包组件或基础库

说来惭愧，入行两年多了，竟然没注册过npm，自己连个简单的组件库都没有

看代码吧

--webpack 配置
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
  entry: {
    "larger-number": "./src/index.js",
    "larger-number.min": "./src/index.js",
  },
  mode: 'none',
  output: {
    filename: "[name].js",
    // 打包库的名字
    library: "largeNumber",
    // 支持  amd cmd es6 script标签引入
    libraryTarget: "umd",
    libraryExport: "default",
  },
  optimization: {
    minimize: true,
    minimizer: [
      // mode: production 时默认使用的压缩插件,
      new TerserPlugin({
        include: /\.min\.js$/,
      }),
    ],
  },
};

--index 使用打包文件
if (process.env.NODE_ENV === "production") {
  module.exports = require("./dist/larger-number.min.js");
} else {
  module.exports = require("./dist/larger-number.js");
}

github地址：github.com/838216870/w…

不断学习中，有想沟通交流的欢迎评论留言；