webpack2とbootstrap4

webpack2boostrap4.md

webpack2にBootstrap4を入れる

Bootstrap4を試しに使ってみていた。CDNからWebpackに移行しようと思ったら、やはりひとしきり迷った。

日付

2017/06/22

環境　

・windows10
・Node v6.10.2
・bootstrap@4.0.0-alpha.6

参考になるリンク

Bootstrap公式？の、webpack用サンプルプロジェクト。
IdanCo/webpack-modular

ここのBootstrap4ブランチ。
IdanCo/webpack-modular at bootstrap4

上記リンクが一番わかりやすいので、それを参考にすればいいと思う。

以下からは自分の履歴。

インストール

webpackで必要になりそうなもの。

npm install --save-dev css-loader node-sass exports-loader sass-loader style-loader url-loader extract-text-webpack-plugin postcss-flexbugs-fixes postcss-loader

bootstrap4本体

npm install bootstrap@4.0.0-alpha.6 --save

bootstrap4が依存しているらしいもの

npm install jquery tether --save

webpack config を変更する

scssファイルをコンパイルできるように、scss拡張子の設定。ExtractTextPluginを使っている。

const ExtractTextPlugin = require('extract-text-webpack-plugin')
...
{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [{
      loader: 'css-loader',
      options: {
        sourceMap: true
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        sourceMap: true,
        plugins: function () {
                return [
                  require('postcss-flexbugs-fixes'),
                  require('autoprefixer')
                ];
              }
      }
    },
    {
      loader: 'sass-loader', 
      options: {
        sourceMap: true
      }
    }]
  })
}
...

さらにプラグインの項目にProvidePluginの設定と、ExtractTextPluginの設定を足します。

const ProvidePlugin = require('webpack/lib/ProvidePlugin');

...

new ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  Tether: 'tether'
})
...

new ExtractTextPlugin({disable: true}) //開発時
//new ExtractTextPlugin('[name].[contenthash:8].css') //ビルド時

あと自分の環境では以下の設定があったので、scssを付け足した。

       {
        exclude: [
          /\.html$/,
          /\.js$/,
          /\.elm$/,
          /\.css$/,
          /\.json$/,
          /\.svg$/,
          /\.scss$/
        ],
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/media/[name].[hash:8].[ext]'
        }
      },

index.jsファイルと、scssファイルに追記する。

webpackコンフィグの設定はできたのでソースコード上で、bootstrapのjsとscssを読み込みます。

index.js

require('bootstrap')   //bootstrapのjsを読み込む
require('./main.scss')

mainになるscssファイルで、bootstrapのscssファイルをimportします。

main.scss

@import "~bootstrap/scss/bootstrap";

といった感じで使えるようになったと思います。