web-dev-qa-db-fra.com

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

J'essaie donc de créer une application cartographique avec webpack et leaflet. Je peux exiger leaflet.js de mon fichier map.js, mais je ne peux pas appeler leaflet.css sans erreur.

Mon webpack.config.js actuel 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 fichier main.js ressemble à:

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 pour regrouper les fichiers CSS de fournisseurs tiers via WebPack? 

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

Il s’agit vraiment d’un exercice d’apprentissage, les indicateurs sont donc grandement appréciés! :)

cssnode.jsnpmleafletwebpack
13
hloughrey

Donc, la réponse est une combinaison de resol.alias de webpack et du chargeur de fichiers. Mon nouveau fichier webpack 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 j'ai à faire, c'est d'avoir besoin des icônes du fichier .js

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

Charmant!!! :)

12
hloughrey

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

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