webpack5快发布了，你还没用过4吗？

时间  2019-12-28
标签 webpack5 webpack 发布 还没 用过 繁體版
原文   原文链接

引言

webpack5 预计会在 2020 年年初发布，以前从 alpha 版本就有关注，本次重点更新在长期缓存，tree shakking 和 es6 打包这块。具体变动能够参考https://github.com/webpack/changelog-v5/blob/master/README.md。css

webpack 是现代前端开发中最火的模块打包工具，只须要经过简单的配置，即可以完成模块的加载和打包。那它是怎么作到经过对一些插件的配置，即可以轻松实现对代码的构建呢？html

本篇文章不会去探讨 webpack5 中所要更新的内容，我相信大多数前端同窗对于 webpack 只是会简单的配置，并且如今像 vue-cli、umi 等对于 webpack 都有很好的封装，但其实这样对于咱们本身是不太好的。尤为是想针对业务场景去作一些个性化的定制时。只有对 webpack 中的细节足够了解，咱们才能游刃有余，本文将从 webpack 现有的大版本 webpack4，带你一步步打造极致的前端开发环境。前端

安装 webpack 的几种方式

  • global(全局):经过 webpack index.js 运行
  • local(项目维度安装):经过 npx webpack index.js 运行

避免全局安装 webpack（针对多个项目采用不一样的 webpack 版本进行打包的场景），可采用npxvue

entry(入口)

单一入口

// webpack.config.js

const config = {
  entry: {
    main: "./src/index.js"
  }
};

### 多入口

```js
// webpack.config.js

const config = {
  entry: {
    main: "./src/index.js",
    sub: "./src/sub.js"
  }
};
复制代码

output(输出)

默认配置

// webpack.config.js
const path = require('path');
...

const config = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

module.exports = config;

复制代码

多个入口起点

若是配置建立了多个单独的 "chunk"（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符(substitutions)来确保每一个文件具备惟一的名称。node

// webpack.config.js
const path = require('path');
{
  entry: {
    main: './src/index.js',
    sub: './src/sub.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
}

// 写入到硬盘：./dist/main.js, ./dist/sub.js
复制代码

高级进阶

使用 cdnreact

// webpack.config.js
const path = require('path');
{
  entry: {
    main: './src/index.js',
    sub: './src/sub.js'
  },
  output: {
    publicPath: 'http://cdn.example.com'
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
}

// 写入到http://cdn.example.com/main.js, http://cdn.example.com/sub.js
复制代码

loaders

webpack 可使用 loader 来预处理文件。这容许你打包除 JavaScript 以外的任何静态资源。webpack

file-loader

  • file-loader 能够解析项目中的 url 引入（不只限于 css），根据咱们的配置，将图片拷贝到相应的路径，再根据咱们的配置，修改打包后文件引用路径，使之指向正确的文件。
  • 默认状况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。
rules: [
  {
    test: /\.(jpg|png|gif)$/,
    use: {
      loader: "file-loader",
      options: {
        name: "[name]_[hash].[ext]",
        outputPath: "images/"
      }
    }
  }
];
复制代码

url-loader

  • url-loader 功能相似于 file-loader，可是在文件大小（单位 byte）低于指定的限制时，能够返回一个 DataURL。
  • url-loader 把资源文件转换为 URL，file-loader 也是同样的功能。不一样之处在于 url-loader 更加灵活，它能够把小文件转换为 base64 格式的 URL，从而减小网络请求次数。url-loader 依赖 file-loader。
rules: [
  {
    test: /\.(jpg|png|gif)$/,
    use: {
      loader: "url-loader",
      options: {
        name: "[name]_[hash].[ext]",
        outputPath: "images/",
        limit: 204800
      }
    }
  }
];
复制代码

css-loader

  • 只负责加载 css 模块,不会将加载的 css 样式应用到 html
  • importLoaders 用于指定在 css-loader 前应用的 loader 的数量
  • 查询参数 modules 会启用 CSS 模块规范
module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    }
  ];
}
复制代码

style-loader

  • 负责将 css-loader 加载到的 css 样式动态的添加到 html-head-style 标签中
  • 通常建议将 style-loader 与 css-loader 结合使用

sass-loader

安装

yarn add sass-loader node-sass webpack --devcss3

  • node-sass 和 webpack 是 sass-loader 的 peerDependency，所以可以精确控制它们的版本。
  • loader 执行顺序：从下至上，从右至左
  • 经过将 style-loader 和 css-loader 与 sass-loader 链式调用，能够马上将样式做用在 DOM 元素。
// webpack.config.js
module.exports = {
...
module: {
  rules: [{
    test: /\.scss$/,
    use: [{
        loader: "style-loader" // 将 JS 字符串生成为 style 节点
    }, {
        loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
    }, {
        loader: "sass-loader" // 将 Sass 编译成 CSS
    }]
  }]
}
};
复制代码

postcss-loader

  • webpack4 中使用 postcss-loader 代替 autoprefixer，给 css3 样式加浏览器前缀。具体可参考https://blog.csdn.net/u014628388/article/details/82593185
// webpack.config.js
 {
  test: /\.scss$/,
  use: [
    'style-loader',
      'css-loader',
      'sass-loader',
      'postcss-loader'
    ],
}

//postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')({ browsers: ['last 2 versions'] }),
    ],
};

复制代码

plugins

plugin 能够在 webpack 运行到某个时刻的时候，帮你作一些事情git

HtmlWebpackPlugin

  • HtmlWebpackPlugin 会在打包结束后，自动生成一个 html 文件，并把打包生成的 js 自动引入到这个 html 文件中
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
...
plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
  ],
};
复制代码

clean-webpack-plugin

  • clean-webpack-plugin 插件用来清除残留打包文件，特别是文件末尾添加了 hash 以后，会致使改变文件内容后从新打包时，文件名不一样而内容愈来愈多。
  • 新版本中的 clean-webpack-plugin 仅接受一个对象，默认不须要传任何参数。具体可参考https://blog.csdn.net/qq_23521659/article/details/88353708
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
...
plugins: [
    new CleanWebpackPlugin()
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
复制代码

SplitChunksPlugin

  • 具体概念可参考https://juejin.im/post/5af15e895188256715479a9a
splitChunks: {
    chunks: "async",
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        },
    default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}
复制代码

MiniCssExtractPlugin

将 CSS 提取为独立的文件的插件，对每一个包含 css 的 js 文件都会建立一个 CSS 文件，支持按需加载 css 和 sourceMapes6

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: "css-loader",
            options: {
              importLoaders: 2 // 用于指定在 css-loader 前应用的 loader 的数量
              // modules: true // 查询参数 modules 会启用 CSS 模块规范
            }
          },
          "sass-loader",
          "postcss-loader"
        ]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          "css-loader",
          "postcss-loader"
        ]
      }
    ]
  }
};
复制代码

OptimizeCSSAssetsPlugin

webpack5 可能会内置 CSS 压缩器，webpack4 须要本身使用压缩器，可使用 optimize-css-assets-webpack-plugin 插件。 设置 optimization.minimizer 覆盖 webpack 默认提供的，确保也指定一个 JS 压缩器

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourcMap: true
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
  }
};
复制代码

devtool

source map

source map 就是对打包生成的代码与源代码的一种映射，主要是为了方便定位问题和排查问题。devtool 关键有 eval、cheap、module、inline 和 source-map 这几块，具体可参考文档：https://www.webpackjs.com/configuration/devtool/

  • development 环境参考配置: 'cheap-module-eval-source-map'
  • production 环境参考配置: 'cheap-module-source-map'

webpack-dev-server

webpack-dev-server 提供了一个简单的 web 服务器，而且可以实时从新加载(live reloading)。具体可参考https://www.webpackjs.com/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server

接口代理(请求转发)

若是你有单独的后端开发服务器 API，而且但愿在同域名下发送 API 请求 ，那么代理某些 URL 会颇有用。dev-server 使用了很是强大的 http-proxy-middleware 包。经常使用于接口请求转发。具体参考https://www.webpackjs.com/configuration/dev-server/#devserver-proxy

devServer: {
    contentBase: "./dist",
    open: true,
    hot: true,
    hotOnly: true,
    proxy: {
      "/api": {
        target: "https://other-server.example.com",
        pathRewrite: {"^/api" : ""},
        secure: false,
        bypass: function(req, res, proxyOptions) {
          if (req.headers.accept.indexOf("html") !== -1) {
            console.log("Skipping proxy for browser request.");
            return "/index.html";
          }
        }
      }
    }
  },
复制代码

解决单页面路由问题

当使用 HTML5 History API 时，任意的 404 响应均可能须要被替代为 index.html 经过传入如下启用：

historyApiFallback: true;
复制代码

经过传入一个对象，好比使用 rewrites 这个选项，此行为可进一步地控制：

historyApiFallback: {
  rewrites: [
    { from: /^\/$/, to: "/views/landing.html" },
    { from: /^\/subpage/, to: "/views/subpage.html" },
    { from: /./, to: "/views/404.html" }
  ];
}
复制代码

webpack-dev-middleware

webpack-dev-middleware 是一个容器(wrapper)，它能够把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也能够做为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求

// server.js
// 使用webpack-dev-middleware
// https://www.webpackjs.com/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-middleware
const express = require("express");
const webpack = require("webpack");
const webpackDevMiddleware = require("webpack-dev-middleware");
const config = require("./webpack.config.js");
const complier = webpack(config);

const app = express();

app.use(
  webpackDevMiddleware(complier, {
    publicPath: config.output.publicPath
  })
);

app.listen(3000, () => {
  console.log("server is running");
});
复制代码

Hot Module Replacement

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它容许在运行时更新各类模块，而无需进行彻底刷新。

// webpack.config.js
...
const webpack = require('webpack');
...
devServer: {
  contentBase: './dist',
  open: true,
  hot: true,
  hotOnly: true
},
plugins: [
  ...
  new webpack.HotModuleReplacementPlugin()
],

复制代码

若是已经经过 HotModuleReplacementPlugin 启用了模块热替换(Hot Module Replacement)，则它的接口将被暴露在 module.hot 属性下面。一般，用户先要检查这个接口是否可访问，而后再开始使用它。

// index.js
if (module.hot) {
  module.hot.accept("./library.js", function() {
    // 使用更新过的 library 模块执行某些操做...
  });
}
复制代码

bundle 分析

借助一些官方推荐的可视化分析工具，可对打包后的模块进行分析以及优化

  • webpack-chart: webpack 数据交互饼图
  • webpack-visualizer: 可视化并分析你的 bundle，检查哪些模块占用空间，哪些多是重复使用的
  • webpack-bundle-analyzer: 一款分析 bundle 内容的插件及 CLI 工具，以便捷的、交互式、可缩放的树状图形式展示给用户

Preloading、Prefetching

prefetch：会等待核心代码加载完成后，页面带宽空闲后再去加载 prefectch 对应的文件;preload：和主文件一块儿去加载

  • 可使用谷歌浏览器 Coverage 工具查看代码覆盖率(ctrl+shift+p > show coverage)
  • 使用异步引入 js 的方式能够提升 js 的使用率，因此 webpack 建议咱们多使用异步引入的方式，这也是 splitChunks.chunks 的默认值是"async"的缘由
  • 使用魔法注释 /_ webpackPrefetch: true _/ ，这样在主要 js 加载完，带宽有空闲时，会自动下载须要引入的 js
  • 使用魔法注释 /_ webpackPreload: true _/，区别是 webpackPrefetch 会等到主业务文件加载完，带宽有空闲时再去下载 js，而 preload 是和主业务文件一块儿加载的

babel

babel 编译 es六、jsx 等

  • @babel/core babel 核心模块
  • @babel-preset-env 编译 es6 等
  • @babel/preset-react 转换 jsx
  • @babel/plugin-transform-runtime 避免 polyfill 污染全局变量，减小打包体积
  • @babel/polyfill es6 内置方法和函数转化垫片
  • @babel/runtime
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader"
      }
    }
  ];
}
复制代码

新建.babelrc 文件

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-runtime"]
}
复制代码

按需引入 polyfill

在 src 下的 index.js 中全局引入@babel/polyfill 并写入 es6 语法，可是这样有一个缺点: 全局引入@babel/polyfill 的这种方式可能会导入代码中不须要的 polyfill，从而使打包体积更大，修改.babelrc 配置

`yarn add core-js@2 @babel/runtime-corejs2 --dev`

{
  "presets": [
    [
      "@babel/preset-env", {
      "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}
复制代码

这就配置好了按需引入。配置了按需引入 polyfill 后，用到 es6 以上的函数，babel 会自动导入相关的 polyfill，这样能大大减小打包编译后的体积。

babel-runtime 和 babel-polyfill 的区别

参考https://www.jianshu.com/p/73ba084795ce

  • babel-polyfill 会”加载整个 polyfill 库”，针对编译的代码中新的 API 进行处理，而且在代码中插入一些帮助函数
  • babel-polyfill 解决了 Babel 不转换新 API 的问题，可是直接在代码中插入帮助函数，会致使污染了全局环境，而且不一样的代码文件中包含重复的代码，致使编译后的代码体积变大。 Babel 为了解决这个问题，提供了单独的包 babel-runtime 用以提供编译模块的工具函数， 启用插件 babel-plugin-transform-runtime 后，Babel 就会使用 babel-runtime 下的工具函数
  • babel-runtime 适合在组件，类库项目中使用，而 babel-polyfill 适合在业务项目中使用。

高级概念

tree shaking(js)

tree shaking 可清除代码中无用的 js 代码，只支持 import 方式引入，不支持 commonjs 的方式引入 mode 是 production 的无需配置，下面的配置是针对 development 的

// webpack.config.js
optimization: {
  usedExports: true
}


// package.json
"sideEffects": false,
复制代码

Code Spliting

代码分割，和 webpack 无关

  • 同步代码(需在 webpack.config.js 中配置 optimization)
// index.js
import _ from 'lodash';

console.log(_.join(['a','b','c'], '****'))

// 在webpack.base.js里作相关配置
optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
复制代码
  • 异步代码(无需任何配置，但需安装@babel/plugin-syntax-dynamic-import包)
// index.js
function getComponent() {
  return import("lodash").then(({ default: _ }) => {
    const element = document.createElement("div");
    element.innerHTML = _.join(["Jack", "Cool"], "-");
    return element;
  });
}

getComponent().then(el => {
  document.body.appendChild(el);
});
复制代码

Caching(缓存)

经过使用 output.filename 进行文件名替换，能够确保浏览器获取到修改后的文件。[hash] 替换能够用于在文件名中包含一个构建相关(build-specific)的 hash，可是更好的方式是使用 [contenthash] 替换，当文件内容发生变化时，[contenthash]也会发生变化

output: {
  filename: "[name].[contenthash].js",
  chunkFilename: '[name].[contenthash].chunk.js'
}
复制代码

Shimming

webpack 编译器(compiler)可以识别遵循 ES2015 模块语法、CommonJS 或 AMD 规范编写的模块。然而，一些第三方的库(library)可能会引用一些全局依赖（例如 jQuery 中的 $）。这些库也可能建立一些须要被导出的全局变量。这些“不符合规范的模块”就是 shimming 发挥做用的地方

  • shimming 全局变量(第三方库)(ProvidePlugin 至关于一个垫片)
const path = require('path');
+ const webpack = require('webpack');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
-   }
+   },
+   plugins: [
+     new webpack.ProvidePlugin({
+       _: 'lodash'
+     })
+   ]
  };
复制代码
  • 细粒度 shimming(this 指向 window)(须要安装 imports-loader 依赖)
const path = require('path');
  const webpack = require('webpack');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
+   module: {
+     rules: [
+       {
+         test: require.resolve('index.js'),
+         use: 'imports-loader?this=>window'
+       }
+     ]
+   },
    plugins: [
      new webpack.ProvidePlugin({
        join: ['lodash', 'join']
      })
    ]
  };
复制代码

环境变量

webpack 命令行环境选项 --env 容许您传入任意数量的环境变量。您的环境变量将可访问 webpack.config.js。例如，--env.production 或--env.NODE_ENV=local

webpack --env.NODE_ENV=local --env.production --progress
复制代码

使用环境变量必须对 webpack 配置进行一项更改。一般，module.exports 指向配置对象。要使用该 env 变量，必须转换 module.exports 为函数：

// webpack.config.js
const path = require("path");

module.exports = env => {
  // Use env.<YOUR VARIABLE> here:
  console.log("NODE_ENV: ", env.NODE_ENV); // 'local'
  console.log("Production: ", env.production); // true

  return {
    entry: "./src/index.js",
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "dist")
    }
  };
};
复制代码

library 打包配置

除了打包应用程序代码，webpack 还能够用于打包 JavaScript library 用户应该可以经过如下方式访问 library:

  • ES2015 模块。例如 import library from 'library'
  • CommonJS 模块。例如 require('library')
  • 全局变量，当经过 script 脚本引入时

咱们打包的 library 中可能会用到一些第三方库，诸如 lodash。如今，若是执行 webpack，你会发现建立了一个很是巨大的文件。若是你查看这个文件，会看到 lodash 也被打包到代码中。在这种场景中，咱们更倾向于把 lodash 看成 peerDependency。也就是说，用户应该已经将 lodash 安装好。所以，你能够放弃对外部 library 的控制，而是将控制权让给使用 library 的用户。这可使用 externals 配置来完成：

// webpack.config.js
  var path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'webpack-numbers.js'
-   }
+   },
+   externals: {
+     lodash: {
+       commonjs: 'lodash',
+       commonjs2: 'lodash',
+       amd: 'lodash',
+       root: '_'
+     }
+   }
  };
复制代码

对于用途普遍的 library，咱们但愿它可以兼容不一样的环境，例如 CommonJS，AMD，Node.js 或者做为一个全局变量。为了让你的 library 可以在各类用户环境(consumption)中可用，须要在 output 中添加 library 属性：

// webpack.config.js
  var path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
-     filename: 'library.js'
+     filename: 'library.js',
+     library: 'library'
    },
    externals: {
      lodash: {
        commonjs: 'lodash',
        commonjs2: 'lodash',
        amd: 'lodash',
        root: '_'
      }
    }
  };
复制代码

当你在 import 引入模块时，这能够将你的 library bundle 暴露为名为 webpackNumbers 的全局变量。为了让 library 和其余环境兼容，还须要在配置文件中添加 libraryTarget 属性。这是能够控制 library 如何以不一样方式暴露的选项。

var path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'library.js',
+     library: 'library',
+     libraryTarget: 'umd'
    },
    externals: {
      lodash: {
        commonjs: 'lodash',
        commonjs2: 'lodash',
        amd: 'lodash',
        root: '_'
      }
    }
  };
复制代码

咱们还须要经过设置 package.json 中的 main 字段，添加生成 bundle 的文件路径。

// package.json
{
  ...
  "main": "dist/library.js",
  ...
}
复制代码

PWA 打包配置

渐进式网络应用程序(Progressive Web Application - PWA)，是一种能够提供相似于原生应用程序(native app)体验的网络应用程序(web app)。PWA 能够用来作不少事。其中最重要的是，在离线(offline)时应用程序可以继续运行功能。这是经过使用名为 Service Workers 的网络技术来实现的 添加 workbox-webpack-plugin 插件，并调整 webpack.config.js 文件：

npm install workbox-webpack-plugin --save-dev
复制代码

webpack.config.js

const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
+ const WorkboxPlugin = require('workbox-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
-     title: 'Output Management'
+     title: 'Progressive Web Application'
-   })
+   }),
+   new WorkboxPlugin.GenerateSW({
+     // 这些选项帮助 ServiceWorkers 快速启用
+     // 不容许遗留任何“旧的” ServiceWorkers
+     clientsClaim: true,
+     skipWaiting: true
+   })
  ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
复制代码

注册 Service Worker

import _ from 'lodash';
  import printMe from './print.js';

+ if ('serviceWorker' in navigator) {
+   window.addEventListener('load', () => {
+     navigator.serviceWorker.register('/sw.js').then(registration => {
+       console.log('SW registered: ', registration);
+     }).catch(registrationError => {
+       console.log('SW registration failed: ', registrationError);
+     });
+   });
+ }
复制代码

如今来进行测试。中止服务器并刷新页面。若是浏览器可以支持 Service Worker，你应该能够看到你的应用程序还在正常运行。然而，服务器已经中止了服务，此刻是 Service Worker 在提供服务。

TypeScript 打包配置

可参考https://www.webpackjs.com/guides/typescript/或https://webpack.js.org/guides/typescript/

  • 安装 ts 依赖npm install --save-dev typescript ts-loader
  • 增长 tsconfig.json 配置文件
{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}
复制代码
  • webpack.config.js 添加对 ts/tsx 语法支持(ts-loader)
const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  }
};
复制代码
  • 当从 npm 安装第三方库时，必定要牢记同时安装这个库的类型声明文件。能够从 TypeSearch 中找到并安装这些第三方库的类型声明文件。如npm install --save-dev @types/lodash

webpack 性能优化

  • 及时更新 node、yarn、webpack 等的版本
  • 在尽量少的模块上应用 loader
  • plugin 尽量精简并确保可靠(选用社区已验证的插件)
  • resolve 参数合理配置(具体参考https://www.webpackjs.com/configuration/resolve/)
  • 使用 DllPlugin 提升打包速度
  • 控制包文件大小(tree shaking / splitChunksPlugin)
  • thread-loader,parallel-webpack,happypack 多进程打包
  • 合理利用 sourceMap
  • 结合stats.json分析打包结果(bundle analyze)
  • 开发环境内存编译
  • 开发环境无用插件剔除

最后

你能够关注个人同名公众号【前端森林】，这里我会按期发一些大前端相关的前沿文章和平常开发过程当中的实战总结。固然，我也是开源社区的积极贡献者，github地址https://github.com/Jack-cool，欢迎star！！！

前端森林
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程