簡単なwebpack(4)-bootstrapの導入

Bootstrapは事実上のインタフェースの標準であり、現在のウェブサイトで多く使われています.Webpackが導入するbootstrapを使用できる場合.cssは、htmlに手動で追加することなく、npm installでプロジェクトの依存を完了することができます.入り口ファイルに1行追加すればいいと思っていたのに:

import 'bootstrap/dist/css/bootstrap.css'

次に依存関係をインストールします.

npm i bootstrap url url-loader style-loader css-loader --save
    

実は思ったほど簡単ではありません.cssファイルには多くのタイプのフォントファイルとベクトルマップファイルが参照されているからです.これを導入するには、css以外のタイプの対応するloaderを同時に提供する必要があります.

//webpack.config.js: 
module.exports = {
    entry: {
       '1.js'
    },
    output: {    
        filename: 'bundle.js'
    },
    module: {
      loaders: [
          
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
            { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
      ]
    }
};

htmlファイル内でほんの少しのbootstrapを使用しています.

// c.html

  
    

      
Home
      
Profile
      
Messages
    
    
  

の :

webpack

ブラウザを く:

open c.html

bootstrapのよく っているインタフェースが えます.
jqueryの
bootstrapのjsプラグインを する がある は、まずjqueryを する があります.jqueryを する の1つは、webpackプラグインを することです.
まずjqueryをインストールします.

npm i jquery 

に、プラグインを してjqueryを み みます. は、webpackのプロファイルを し、 のようにします.

    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]

エントリ・ファイルに のコードを します.

$("body").append("
hello world
")

した は、jqueryのロードに したことを します.これにより、 jsファイルにbootstrapをロードできます.js :

import 'bootstrap/dist/js/bootstrap.js'

エラーの
は かにbootstrapを したとき、 な いに しました.Webpackで が っていて、css-loader、unknown wordの の いです.Webpackconfig.jsファイルにincludeプロパティを し、 しないディレクトリに すればいいです.

{
    test: /\.css$/,
    include: [
        path.resolve(__dirname, "not_exist_path")
    ],
    loader: "style!css"
}

のissueはここにあります.https://github.com/webpack/cs... . はこの えを て だと った.
について
: は を ったことがあり、 したことがある. きにくい、 .1000 copy#gmailを することができる.com して

http http://www.ituring.com.cn/boo...Git http://www.ituring.com.cn/boo...

Writing client-side ES 6 with webpackWebpack ガイドwebpack の https://github.com/ruanyf/web...How to Use Bootstrap (CSS only) and Webpack