webpack@5の主な変更点まとめ

1
module.exports = {
2
  cache: {
3
    type: "filesystem",
4
    buildDependencies: {
5
      config: [__filename],
6
    },
7
  },
8
};

1
asset main.js 36.3 KiB [emitted] [minimized] (name: main)
2
orphan modules 584 KiB [orphan] 554 modules
3
cacheable modules 117 KiB
4
  ./src/index.js + 103 modules 117 KiB [built] [code generated]
5
  ./src/foo.js 21 bytes [built] [code generated]
6
webpack 5.0.0-rc.2 compiled successfully in 1836 ms

1
asset main.js 36.3 KiB [compared for emit] [minimized] (name: main)
2
cached modules 700 KiB [cached] 556 modules
3
webpack 5.0.0-rc.2 compiled successfully in 429 ms

1
module.exports = {
2
  output: {
3
    assetModuleFilename: "images/[hash][ext]",
4
  },
5
  module: {
6
    rules: [
7
      {
8
        test: /\.(png|jpg|gif)$/,
9
        type: "asset/resource",
10
      },
11
    ],
12
  },
13
};

1
(async () => {
2
  await import(/* webpackChunkName: "foo" */ "./foo");
3
})();

1
asset main.js 2.79 KiB [emitted] [minimized] (name: main)
2
asset foo.js 114 bytes [emitted] [minimized] (name: foo)
3
runtime modules 7.23 KiB 10 modules
4
cacheable modules 217 bytes
5
  ./src/index.js 190 bytes [built] [code generated]
6
  ./src/foo.js 27 bytes [built] [code generated]
7
webpack 5.0.0-rc.4 compiled successfully in 274 ms

1
asset main.js 2.79 KiB [emitted] [minimized] (name: main)
2
asset 717.js 114 bytes [emitted] [minimized]
3
runtime modules 7.23 KiB 10 modules
4
cacheable modules 186 bytes
5
  ./src/index.js 159 bytes [built] [code generated]
6
  ./src/foo.js 27 bytes [built] [code generated]
7
webpack 5.0.0-rc.4 compiled successfully in 283 ms

1
module.exports = {
2
  optimization: {
3
    chunkIds: "named",
4
  },
5
};

1
123 bytes [emitted] [minimized] runtime modules 7.23 KiB 10 modules cacheable
2
modules 186 bytes ./src/index.js 159 bytes [built] [code generated] ./src/foo.js
3
27 bytes [built] [code generated] webpack 5.0.0-rc.4 compiled successfully in
4
256 ms ```
5

6
`optimization.chunkIds` に `named` を追加すればファイル名が確定しますが本番環境では表示されていいものなのかを検討してください。また、`optimization.splitChunks.name`はなくなったのでこちらに移行してください。
7

8
### import.meta のサポート
9

10
```javascript
11
// ./src/index.js
12
console.log(import.meta.url);
13
console.log(import.meta.webpack);

1
生成されたファイルは固定値として入り、import.meta.url, webpackは存在しなくなる
2
console.log("file:///Users/hiroppy/webpack/src/index.js"); console.log(5); ```
3

4
また、HMR 時に今までは以下のように書いていましたが、これからは`import.meta.webpackHot`を使うことが可能です。これを使うことにより、Node.js の module への依存を減らし、ESM に沿うような書き方に変わります。
5

6
```javascript
7
// <= 4
8
if (module.hot) {
9
  module.hot.accept();
10
}
11

12
// >= 5
13
if (import.meta.webpackHot) {
14
  import.meta.webpackHot.accept();
15
}
16

17
// or
18
import.meta.webpackHot?.accept();

1
import x from "data:text/javascript,export default 42";
2
console.log(x); // 42
3

4
import y from "file:///Users/hiroppy/webpack/src/index.js";

1
const eIndexOf = require("es5-ext/array/\0#/e-index-of#fragment");

1
const webpack = require("webpack");
2

3
module.exports = {
4
  plugins: [
5
    new webpack.experiments.schemes.HttpUriPlugin(),
6
    new webpack.experiments.schemes.HttpsUriPlugin(),
7
  ],
8
};
9

10
// index.js
11
import codeOfConduct from "https://raw.githubusercontent.com/webpack/webpack/master/CODE_OF_CONDUCT.md";
12
console.log(codeOfConduct);

1
const fooWorker = new SharedWorker(
2
  new URL("./foo-worker.js", import.meta.url),
3
  {
4
    name: "foo",
5
  },
6
);

1
module.exports = {
2
  output: {
3
    publicPath: "auto",
4
  },
5
};

1
import { something } from "./something";
2

3
function usingSomething() {
4
  return something;
5
}
6

7
export function test() {
8
  return usingSomething();
9
}

1
module.exports = {
2
  output: {
3
    filename: ({ chunk }) => {
4
      if (chunk.name === "main") return "main.bundle.[contenthash].js";
5
      return "foo.bundle.[contenthash].js";
6
    },
7
  },
8
};

1
module.exports = {
2
  externalsType: "promise",
3
};

1
import { WebpackOptionsNormalized } from "webpack";
2

3
const config: WebpackOptionsNormalized = {
4
  entry: "index.js",
5
  output: {
6
    filename: "bundle.js",
7
  },
8
};

1
module.exports = {
2
  optimization: {
3
    splitChunks: {
4
      cacheGroups: {
5
        test: {
6
          name: "test",
7
          minSize: {
8
            javascript: 100,
9
            webassembly: 100,
10
            style: 100,
11
          },
12
        },
13
      },
14
    },
15
  },
16
};

1
import("file:///Users/hiroppy/Desktop/webpack-5/src/foo.js");
2

3
console.log(x);

1
module.exports = {
2
  experiments: {
3
    outputModule: true,
4
  },
5
};

1
module.exports = {
2
  node: {
3
    // Buffer: false, これは廃止
4
    global: false,
5
    __filename: false,
6
    __dirname: false,
7
  },
8
};

1
// 😵
2
import { version } from "./package.json";
3

4
// 🙂
5
import package from "./package.json";
6
const { version } = package;

1
module.exports = {
2
  target: ["web", "es5"],
3
};

1
# browserslist
2
last 1 version