webpack
https://gyazo.com/903a46bdeb7eafc92bae89df561a69b3
webpack.config.js を ESM (ECMAScriptECMAScript.icon module) で書くには Node.jsNode.js.iconを module mode で動かす code:package.json
{
// …,
"type": "module",
// …
}
__filename と __dirname が使へず不便なので
code:webpack.config.js
import path from "path";
import { fileURLToPath } from "url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
export default {
// …
};
$ npx webpack --config webpack.config.js
deploy 環境每に webpack.config.js を分けるには
loader の指定の仕方
loader 列 (.module.rules[])
一つ
code:webpack.config.js
{
test: /\.js$/,
loader: "example-loader",
},
code:webpack.config.js
{
test: /\.js$/,
use: "example-loader",
},
複數。後から順に實行される
code:webpack.config.js
{
test: /\.js$/,
use: [
"example-loader",
"example-loader",
],
},
code:webpack.config.js
{
test: /\.js$/,
loader: "example-loader",
},
{
test: /\.js$/,
loader: "example-loader",
},
code:webpack.config.js
{
test: /\.js$/,
loader: "example-loader | example-loader",
},
loader 自體 (.module.rules | .use[] 又は .modules.rules | .loader)
loader 名
example-loader
options 附き loader 名
example-loader?example=example
object
code:webpack.config.js
{
loader: "example-loader",
options: {
example: "example",
},
},
extract-loader の既知の問題
類似