webpack - require（ 'node_modules/leaflet/leaflet.css'）

Question

私はwebpackとleafletを使用してマップアプリケーションを構築しようとしています。私はmap.jsファイルからleaflet.jsを要求することができますが、エラーを出さずにleaflet.cssを呼び出すことはできません。

私の現在のwebpack.config.jsは、次のようになります。

'use strict' 

var webpack = require('webpack'), 
    path = require('path'), 
    HtmlWebpackPlugin = require('html-webpack-plugin'), 
    srcPath = path.join(__dirname, 'src'); 

module.exports = { 
    target: "web", 
    cache: true, 
    entry: { 
     app: path.join(srcPath, "index.js") 
    }, 
    resolve: { 
     alais: { 
      leaflet_css: __dirname + "/node_modules/leaflet/dist/leaflet.css" 
     } 
    }, 
    module: { 
     loaders: [ 
      {test: /\.js?$/, exclude: /node_modules/, loader: "babel-loader"}, 
      {test: /\.scss?$/, exclude: /node_modules/, loader: "style!css!sass!"}, 
      {test: /\.css?$/, loader: "style!css!"} 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin("common", "common.js"), 
     new HtmlWebpackPlugin({ 
      inject: true, 
      template: "src/index.html" 
     }), 
     new webpack.NoErrorsPlugin() 
     ], 
    output: { 
     path: path.join(__dirname, "dist"), 
     publicPath: "/dist/", 
     filename: "[name].js", 
     pathInfo: true 
    } 
} 

そして、私のmain.jsファイルは次のようになります。

var $ = require('jquery'), 
    leaflet = require('leaflet'); 

require("./sass/main.scss"); 
require("leaflet_css"); 

var map = L.map('map').setView([51.505, -0.09], 13); 

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
}).addTo(map); 

L.marker([51.5, -0.09]).addTo(map) 
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.') 
    .openPopup(); 

console.log('I got called'); 

WebPACKを介して、サードパーティのサプライヤーからのcssファイルを束ねるの正しいアプローチは何ですか？

私はこの理由は、それがnpm経由node_modules direcoryにインストールされている場合、なぜlibsディレクトリに保存するものだ... this projectはleafletはlibsディレクトリに格納された見ましたか？

これは非常に学習の練習ですので、どんな指針も大変ありがとうございます！ :)

Answer 1

答えは、webpackのresolve.aliasとファイルローダーの組み合わせです。私の新しいWebPACKのファイルは、次のようになります。

'use strict' 

var webpack = require('webpack'), 
    path = require('path'), 
    HtmlWebpackPlugin = require('html-webpack-plugin'), 
    srcPath = path.join(__dirname, 'src'); 

module.exports = { 
    target: "web", 
    cache: true, 
    entry: { 
     app: path.join(srcPath, "index.js") 
    }, 
    resolve: { 
     extensions: ['', '.html', '.js', '.json', '.scss', '.css'], 
     alias: { 
      leaflet_css: __dirname + "/node_modules/leaflet/dist/leaflet.css", 
      leaflet_marker: __dirname + "/node_modules/leaflet/dist/images/marker-icon.png", 
      leaflet_marker_2x: __dirname + "/node_modules/leaflet/dist/images/marker-icon-2x.png", 
      leaflet_marker_shadow: __dirname + "/node_modules/leaflet/dist/images/marker-shadow.png" 
     } 
    }, 
    module: { 
     loaders: [ 
      {test: /\.js?$/, exclude: /node_modules/, loader: "babel-loader"}, 
      {test: /\.scss?$/, exclude: /node_modules/, loader: "style-loader!css-loader!sass-loader!"}, 
      {test: /\.css?$/, loader: "style-loader!css-loader!"}, 
      {test: /\.(png|jpg)$/, loader: "file-loader?name=images/[name].[ext]"} 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin("common", "common.js"), 
     new HtmlWebpackPlugin({ 
      inject: true, 
      template: "src/index.html" 
     }), 
     new webpack.NoErrorsPlugin() 
     ], 
    output: { 
     path: path.join(__dirname, "dist"), 
     publicPath: "/dist/", 
     filename: "[name].js", 
     pathInfo: true 
    } 
} 

そして、私がする必要があるすべては、.jsファイル内のアイコン

require("./sass/main"); 
require("leaflet_css"); 
require("leaflet_marker"); 
require("leaflet_marker_2x"); 
require("leaflet_marker_shadow"); 

ラブリーを必要としています！ :)

Answer 2

私はそれをより簡単に行うことができました。ただ、CSSのための

loaders: [ 
    { test: /\.css$/, loader: 'style-loader!css-loader' }, 
    { 
     test: /\.png$/, 
     loader: 'url-loader', 
     query: { mimetype: 'image/png' } 
    } 
]