webpack - gerektirir ('node_modules/leaflet/leaflet.css')

Question

webpack ve leaflet kullanarak bir harita uygulaması oluşturmaya çalışıyorum. leaflet.js gereksinimi map.js dosyamdan alabilir, ancak bir hata almadan leaflet.css öğesini arayamıyorum.

Benim webpack.config.js benziyor akım:

'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 
    } 
} 

Ve main.js dosya gibi görünür:

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 aracılığı 3. parti tedarikçilerden css dosyaları donatılacak doğru yaklaşımı nedir?

Bunun nedeni, npm aracılığıyla node_modules direcory içine yüklüyse, neden libs dizinde saklayın ne ... this projectleaflet libs dizininde saklanır edildi gördü?

Bu bir öğrenme alıştırmasıdır, bu nedenle herhangi bir işaretçi büyük beğeni toplar!

Answer 1

Sonuç olarak, yanıt, webpack'in resol.alias ve dosya yükleyicisinin birleşimidir.

'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 
    } 
} 

Sonra tüm yapmanız gereken

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

Lovely dosyasını Js simgeleri gerektiren olduğunu !!!: Benim yeni webpack dosyası şuna benzer

Answer 2

Bunu daha kolay yapmayı başardım. Sadece css için ve

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