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

So, ich bin versucht, eine Karte zu erstellen-app mit webpack und leaflet. Kann ich verlangen leaflet.js aus meiner map.js Datei, aber ich kann Sie nicht anrufen-Prospekt.css ohne Fehler abrufen.

Meine aktuelle webpack.config.js aussieht:

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

Und meine main.js - Datei sieht wie folgt aus:

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

Was ist der richtige Ansatz, die Bündelung der css-Dateien von 3rd-party-Anbieter via webpack?

Sah ich dieses Projekt wurden leaflet gespeichert ist, in das libs-Verzeichnis... was ist der Grund dafür, warum lagern Sie es in den libs - Verzeichnis, wenn es installiert ist, in der node_modules direcory über npm?

Dies ist sehr viel ein lernen üben, damit jegliche Hinweise sind wir sehr dankbar! 🙂

Möglich, Duplikat der Beispiel für das laden von statischen CSS-files aus node_modules mit webpack?
Diese Frage wurde weiter oben geschrieben - Ihr Beispiel ist ein Duplikat. Leider habe ich nicht genügend Zugang, um es als solche.

InformationsquelleAutor hloughrey | 2015-11-16

  1. 12

    So stellt es sich heraus, die Antwort ist eine Kombination von webpack zu lösen.alias und die Datei loader. Meine neue webpack-Datei sieht wie folgt aus:

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

    Und dann alles, was ich zu tun ist, erfordern die Symbole in der .js-Datei

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

    Schön!!! 🙂

    Diese Bedrohung könnte von der Hilfe zu github.com/PaulLeCam/react-leaflet/issues/255
    Ohne die Aliase können Sie auch require("leaflet/dist/images/marker-shadow.png") etc.

    InformationsquelleAutor hloughrey

  2. 1

    Habe ich es geschafft leichter. Brauchte nur hinzufügen Lader für css und png

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

    InformationsquelleAutor fofipl

Schreibe einen Kommentar