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

Question

Quindi sto provando a creare un'app per mappe utilizzando webpack e leaflet. Posso richiedere leaflet.js dal mio file map.js, ma non posso chiamare leaflet.css senza ricevere un errore.

Il mio attuale webpack.config.js assomiglia:

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

E il mio file main.js assomiglia a:

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'); 

Qual è l'approccio corretto di raggruppamento file CSS da fornitori 3rd party via webpack?

vidi this project stati leaflet viene memorizzato nella directory libs ... qual è la ragione di questo, il motivo per memorizzarlo nella directory libs se è installato nella node_modules direcory via npm?

Questo è davvero un esercizio di apprendimento, quindi qualsiasi suggerimento è molto apprezzato! :)

Answer 1

Quindi risulta che la risposta è una combinazione di resolve.alias del webpack e del caricatore di file. Il mio nuovo file webpack assomiglia a questo:

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

E poi tutto quello che dovete fare è richiedere le icone nei file .js

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

Lovely !!! :)

Answer 2

Sono riuscito a farlo più facile. Solo bisogno di aggiungere caricatori per i CSS e per png

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