Ubuntu 19.04 でwebpackをつかってbootstrapをインストールするまで

Ubuntu 19.04 にNodeをインストール

https://github.com/nodesource/distributions/blob/master/README.md

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

webpack（とwebpack-bundle-tracker）のインストール

npm install --save-dev webpack webpack-cli webpack-bundle-tracker

設定ファイルを作成します

touch webpack.config.js

webpack.config.js

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
  mode: 'development',
  context: __dirname,
  entry: {
      // 後ほどエントリポイントを作成します
  },

  output: {
      path: path.resolve('./assets/webpack_bundles/'),
      filename: "[name]-[hash].js",
  },

  plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
  ],
}

Bootstrapのインストール

https://getbootstrap.com/docs/4.0/getting-started/webpack/

sassのインストール

npm install --save-dev sass

sassを扱うのに必要なローダー等をインストール

npm install --save-dev style-loader css-loader postcss-loader precss autoprefixer sass-loader

bootstrapと、必要なjqueryとpopperをインストールします

npm install --save-dev jquery popper.js bootstrap

設定ファイルを編集します

webpack.config.js

var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
  mode: 'development',
  context: __dirname,
  entry: {
    // エントリポイントを追記
    main_js: './assets/js/main.js',
    main_sass: './assets/scss/main.scss',
  },

  output: {
      path: path.resolve('./assets/webpack_bundles/'),
      filename: "[name]-[hash].js"
  },

  plugins: [
    new BundleTracker({
        path: __dirname,
        filename: './webpack-stats.json'
    }),
  ],

  // sass用のルールを追記
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [{
          loader: 'style-loader',
        }, {
          loader: 'css-loader',
        }, {
          loader: 'postcss-loader',
          options: {
            plugins: function () {
              return [
                require('precss'),
                require('autoprefixer')
              ];
            }
          }
        }, {
          loader: 'sass-loader'
        }]
      }
    ]
  }
}

assets/js/main.js

import 'bootstrap';

assets/scss/main.scss

@import "~bootstrap/scss/bootstrap";

django-webpack-loader

djangoに導入したい方はぜひこちらをご高覧ください