簡単なwebpack-bootstrapの導入
9172 ワード
Bootstrapは事実上のインタフェースの標準であり、現在のウェブサイトで多く使われています.Webpackが導入するbootstrapを使用できる場合.cssは、htmlに手動で追加することなく、
次に依存関係をインストールします.
実は思ったほど簡単ではありません.cssファイルには多くのタイプのフォントファイルとベクトルマップファイルが参照されているからです.これを導入するには、css以外のタイプの対応するloaderを同時に提供する必要があります.
htmlファイル内でほんの少しのbootstrapを使用しています.
翻訳の再実行:
ブラウザを開く:
bootstrapのよく知っているインタフェースが見えます.
jqueryの導入
bootstrapのjsプラグインを使用する必要がある場合は、まずjqueryを導入する必要があります.jqueryを参照する方法の1つは、webpackプラグインを使用することです.
まずjqueryをインストールします.
次に、プラグインを使用してjqueryを読み込みます.方法は、webpackのプロファイルを変更し、次のようにします.
エントリ・ファイルに検証用のコードを追加します.
成功した場合は、jqueryのロードに成功したことを示します.これにより、入口jsファイルにbootstrapをロードできます.js了:
エラーの除外
私は確かにbootstrapを導入したとき、不思議な間違いに遭遇しました.Webpackで転訳時報が間違っていて、css-loader、unknown wordの様子の間違いです.Webpackconfig.jsファイルにincludeプロパティを追加し、存在しないディレクトリに指定すればいいです.
元のissueはここにあります.https://github.com/webpack/cs... .私はこの答えを見て冗談だと思った.
他の3つの関連記事も記録します.
https://segmentfault.com/a/1190000006630500
https://segmentfault.com/a/1190000006633746
https://segmentfault.com/a/1190000006634136
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
<html>
<body>
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Homea>li>
<li role="presentation"><a href="#">Profilea>li>
<li role="presentation"><a href="#">Messagesa>li>
ul>
<script type="text/javascript" src="bundle.js">script>
body>
html>
翻訳の再実行:
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... .私はこの答えを見て冗談だと思った.
他の3つの関連記事も記録します.
https://segmentfault.com/a/1190000006630500
https://segmentfault.com/a/1190000006633746
https://segmentfault.com/a/1190000006634136