Zenn
Open2

webpackメモ

webpack
kentamakentama

CSS

以下を追加。

yarn add --dev style-loader css-loader

webpack.config.jsにルールを追加

  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ]
      }
    ]
  },
  ...

適当な名前でCSSファイルを作成する。今回はstyle.css。

.hello {
    color: blue;
}

JSファイルで作成したCSSファイルをimportする。

import './style.css';
kentamakentama

画像ファイルをバンドルせずに、distディレクトリに出力する。

以下を追加

yarn add --dev copy-webpack-plugin

webpack.config.jsにルールを追加

const CopyPlugin = require("copy-webpack-plugin");

...

module.exports = {
  ...
  plugins: [
    ...
    new CopyPlugin({
      patterns: [
        {
          from: "src/images/*",
          to: "images/[name][ext]",
        },
      ],
    }),
  ],
...