質問編集履歴

3 コードの修正

tarotarosu

tarotarosu score 102

2017/03/02 14:04  投稿

WebpackでBootstrapを扱う方法
###前提・実現したいこと
最近Webpackに関して立て続けに質問させていただいております_(._.)_
Backbone.jsやBootstrapを使って開発を行っているのですが、BackboneやBootstrapは基本的にほとんどのページで使用するためvendor.jsなどとしてまとめたいと考えました。
そこで以下の記事を参考にコードを記述してみました。
###webpack.config.js
```javascript
var webpack = require('webpack');
module.exports = {
 entry: {
   vendor: ['jquery', 'underscore', 'backbone', 'bootstrap'],
   app: './src/script/app.js'
 },
 output: {
   path: __dirname + '/dist',
   filename: '[name].js'
 },
 module: {
   loaders: [
     { test: /\.html$/, loader: 'html-loader' },
     { test: /\.css$/, loader: 'style-loader!css-loader' },
     { test: /\.svg$/, loader: 'url-loader?mimetype=image/svg+xml' },
     { test: /\.woff$/, loader: 'url-loader?mimetype=application/font-woff' },
     { test: /\.woff2$/, loader: 'url-loader?mimetype=application/font-woff' },
     { test: /\.eot$/, loader: 'url-loader?mimetype=application/font-woff' },
     { test: /\.ttf$/, loader: 'url-loader?mimetype=application/font-woff' },
     { test: /\.png$/, loader: 'url-loader?mimetype=image/png' }
   ]
 },
 plugins: [
   new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor',
     filename: "vendor.js",
     minChunks: Infinity
   }),
   new webpack.ProvidePlugin({
     jQuery: "jquery",
     $: "jquery",
     _: "underscore",
     Backbone: "backbone"
   }),
   new webpack.optimize.UglifyJsPlugin({
     compress: {
       warnings: false
     }
   })
 ],
 devtool: 'source-map',
};
```
###head内での読み込み部分
```html
<script type="text/javascript" src="dist/vendor.js"></script>
<script type="text/javascript" src="dist/app.js"></script>
```
そしてブラウザで表示内容を確認してみたのですが、うまく表示されませんでした。
Bootstrapが効いていないという感じです。
###補足情報
ちなみに、以下のような方法をとり、Bootstrapの読み込みだけエントリポイントをわけたところ、もちろんうまく挙動しました。
###webpack.config.js
```javascript
var webpack = require('webpack');
module.exports = {
 entry: {
   vendor: ['jquery', 'underscore', 'backbone'],
   common: './src/script/common.js',
   app: './src/script/app.js'
 },
 //以下略
};
```
###common.js  
```javascript  
require('bootstrap/dist/css/bootstrap.min.css');  
require('bootstrap/dist/js/bootstrap.min.js');  
```  
 
###head内での読み込み部分
```html
<script type="text/javascript" src="dist/vendor.js"></script>
<script type="text/javascript" src="dist/common.js"></script>
<script type="text/javascript" src="dist/app.js"></script>
```
出来れば最初のような方式で、Backbone, Bootstrapは一つにまとめて共通化したいのですが、何が問題なのでしょうか?
Webpackに関して立て続けの質問になってしまっていますが、ご回答いただけると助かります_(._.)_
###追記
参考記事が抜けていました。すみません。
[webpackのCommonsChunkPluginの使い方、使い所](http://qiita.com/soarflat/items/f8212434c4c3cb8ee00d)
  • JavaScript

    20315 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Bootstrap

    1288 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • webpack

    322 questions

  • ECMAScript

    142 questions

    ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

2 コードの修正

tarotarosu

tarotarosu score 102

2017/03/02 14:02  投稿

WebpackでBootstrapを扱う方法
###前提・実現したいこと
最近Webpackに関して立て続けに質問させていただいております_(._.)_
Backbone.jsやBootstrapを使って開発を行っているのですが、BackboneやBootstrapは基本的にほとんどのページで使用するためvendor.jsなどとしてまとめたいと考えました。
そこで以下の記事を参考にコードを記述してみました。
###webpack.config.js
```javascript
var webpack = require('webpack');
module.exports = {
 entry: {
   vendor: ['jquery', 'underscore', 'backbone', 'bootstrap'],
   app: './src/script/app.js'
 },
 output: {
   path: __dirname + '/dist',
   filename: '[name].js'
 },
 module: {
   loaders: [
     { test: /\.html$/, loader: 'html-loader' },
     { test: /\.css$/, loader: 'style-loader!css-loader' },
     { test: /\.svg$/, loader: 'url-loader?mimetype=image/svg+xml' },
     { test: /\.woff$/, loader: 'url-loader?mimetype=application/font-woff' },
     { test: /\.woff2$/, loader: 'url-loader?mimetype=application/font-woff' },
     { test: /\.eot$/, loader: 'url-loader?mimetype=application/font-woff' },
     { test: /\.ttf$/, loader: 'url-loader?mimetype=application/font-woff' },
     { test: /\.png$/, loader: 'url-loader?mimetype=image/png' }
   ]
 },
 plugins: [
   new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor',
     filename: "vendor.js",
     minChunks: Infinity
   }),
   new webpack.ProvidePlugin({
     jQuery: "jquery",
     $: "jquery",
     _: "underscore",
     Backbone: "backbone"
   }),
   new webpack.optimize.UglifyJsPlugin({
     compress: {
       warnings: false
     }
   })
 ],
 devtool: 'source-map',
};
```
###head内での読み込み部分
```html
<script type="text/javascript" src="dist/vendor.js"></script>
<script type="text/javascript" src="dist/app.js"></script>
```
そしてブラウザで表示内容を確認してみたのですが、うまく表示されませんでした。
Bootstrapが効いていないという感じです。
###補足情報
ちなみに、以下のような方法をとり、Bootstrapの読み込みだけエントリポイントをわけたところ、もちろんうまく挙動しました。
###webpack.config.js
```javascript
var webpack = require('webpack');
module.exports = {
 entry: {
   vendor: ['jquery', 'underscore', 'backbone', 'bootstrap'],
   vendor: ['jquery', 'underscore', 'backbone'],
   common: './src/script/common.js',
   app: './src/script/app.js'
 },
 //以下略
};
```
###head内での読み込み部分
```html
<script type="text/javascript" src="dist/vendor.js"></script>
<script type="text/javascript" src="dist/common.js"></script>
<script type="text/javascript" src="dist/app.js"></script>
```
出来れば最初のような方式で、Backbone, Bootstrapは一つにまとめて共通化したいのですが、何が問題なのでしょうか?
Webpackに関して立て続けの質問になってしまっていますが、ご回答いただけると助かります_(._.)_
###追記
参考記事が抜けていました。すみません。
[webpackのCommonsChunkPluginの使い方、使い所](http://qiita.com/soarflat/items/f8212434c4c3cb8ee00d)
  • JavaScript

    20315 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Bootstrap

    1288 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • webpack

    322 questions

  • ECMAScript

    142 questions

    ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

1 参考記事もれ

tarotarosu

tarotarosu score 102

2017/03/02 14:01  投稿

WebpackでBootstrapを扱う方法
###前提・実現したいこと
最近Webpackに関して立て続けに質問させていただいております_(._.)_
Backbone.jsやBootstrapを使って開発を行っているのですが、BackboneやBootstrapは基本的にほとんどのページで使用するためvendor.jsなどとしてまとめたいと考えました。
そこで以下の記事を参考にコードを記述してみました。
###webpack.config.js
```javascript
var webpack = require('webpack');
module.exports = {
 entry: {
   vendor: ['jquery', 'underscore', 'backbone', 'bootstrap'],
   app: './src/script/app.js'
 },
 output: {
   path: __dirname + '/dist',
   filename: '[name].js'
 },
 module: {
   loaders: [
     { test: /\.html$/, loader: 'html-loader' },
     { test: /\.css$/, loader: 'style-loader!css-loader' },
     { test: /\.svg$/, loader: 'url-loader?mimetype=image/svg+xml' },
     { test: /\.woff$/, loader: 'url-loader?mimetype=application/font-woff' },
     { test: /\.woff2$/, loader: 'url-loader?mimetype=application/font-woff' },
     { test: /\.eot$/, loader: 'url-loader?mimetype=application/font-woff' },
     { test: /\.ttf$/, loader: 'url-loader?mimetype=application/font-woff' },
     { test: /\.png$/, loader: 'url-loader?mimetype=image/png' }
   ]
 },
 plugins: [
   new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor',
     filename: "vendor.js",
     minChunks: Infinity
   }),
   new webpack.ProvidePlugin({
     jQuery: "jquery",
     $: "jquery",
     _: "underscore",
     Backbone: "backbone"
   }),
   new webpack.optimize.UglifyJsPlugin({
     compress: {
       warnings: false
     }
   })
 ],
 devtool: 'source-map',
};
```
###head内での読み込み部分
```html
<script type="text/javascript" src="dist/vendor.js"></script>
<script type="text/javascript" src="dist/app.js"></script>
```
そしてブラウザで表示内容を確認してみたのですが、うまく表示されませんでした。
Bootstrapが効いていないという感じです。
###補足情報
ちなみに、以下のような方法をとり、Bootstrapの読み込みだけエントリポイントをわけたところ、もちろんうまく挙動しました。
###webpack.config.js
```javascript
var webpack = require('webpack');
module.exports = {
 entry: {
   vendor: ['jquery', 'underscore', 'backbone', 'bootstrap'],
   common: './src/script/common.js',
   app: './src/script/app.js'
 },
 //以下略
};
```
###head内での読み込み部分
```html
<script type="text/javascript" src="dist/vendor.js"></script>
<script type="text/javascript" src="dist/common.js"></script>
<script type="text/javascript" src="dist/app.js"></script>
```
出来れば最初のような方式で、Backbone, Bootstrapは一つにまとめて共通化したいのですが、何が問題なのでしょうか?
Webpackに関して立て続けの質問になってしまっていますが、ご回答いただけると助かります_(._.)_
Webpackに関して立て続けの質問になってしまっていますが、ご回答いただけると助かります_(._.)_
###追記
参考記事が抜けていました。すみません。
[webpackのCommonsChunkPluginの使い方、使い所](http://qiita.com/soarflat/items/f8212434c4c3cb8ee00d)
  • JavaScript

    20315 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Bootstrap

    1288 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • webpack

    322 questions

  • ECMAScript

    142 questions

    ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る