webpack - require('node_modules/dépliant/brochure.css')

Donc je suis en train de construire une application de cartographie à l'aide de webpack et leaflet. Je peux exiger leaflet.js de mon map.js fichier, mais je ne peux pas appeler dépliant.css sans avoir une erreur.

Mon webpack.config.js ressemble:

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

Et mon main.js fichier ressemble à ceci:

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

Quelle est la bonne approche de regroupement des fichiers css à partir de la 3ème partie de ses fournisseurs par l'intermédiaire webpack?

J'ai vu ce projet ont été leaflet est stocké dans le répertoire libs... quelle est la raison, pourquoi le stocker dans le libs répertoire s'il est installé dans le node_modules direcory via npm?

C'est très bien d'un exercice d'apprentissage de sorte que toute les pointeurs sont grandement appréciés! 🙂

Double Possible de Exemple de procédure à la charge statique des fichiers CSS de node_modules à l'aide de webpack?
Cette question a été posté plus tôt - votre exemple est un doublon. Malheureusement je n'ai pas un accès suffisant à faire en tant que tels.

OriginalL'auteur hloughrey | 2015-11-16

  1. 12

    Il s'avère donc, la réponse est une combinaison de webpack de la résoudre.alias et le fichier loader. Mon nouveau webpack fichier ressemble à ceci:

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

    Et puis tout ce que je dois faire, c'est d'exiger les icônes de la .fichier js

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

    Belle!!! 🙂

    Cette menace pourrait être d'une aide trop github.com/PaulLeCam/react-leaflet/issues/255
    Sans les alias vous pouvez également require("leaflet/dist/images/marker-shadow.png") etc.

    OriginalL'auteur hloughrey

  2. 1

    J'ai réussi à le faire plus facile. Juste besoin d'ajouter des chargeurs pour les css et le png pour

    loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{
test: /\.png$/,
loader: 'url-loader',
query: { mimetype: 'image/png' }
}
]
    l'OP n'a déjà

    OriginalL'auteur fofipl