webpack - yêu cầu ('node_modules/leaflet/leaflet.css')

Question

Vì vậy, tôi đang cố gắng xây dựng một ứng dụng bản đồ bằng cách sử dụng webpack và leaflet. Tôi có thể yêu cầu leaflet.js từ tệp map.js của tôi, nhưng tôi không thể gọi leaflet.css mà không gặp lỗi.

My hiện webpack.config.js trông giống như:

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

Và tập tin main.js của tôi trông giống như:

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

cách tiếp cận đúng đắn về bundling file css từ nhà cung cấp bên thứ 3 thông qua webpack là gì?

tôi thấy this project được leaflet được lưu trữ trong thư mục libs ... lý do cho điều này là những gì, tại sao lưu nó trong thư mục libs nếu nó được cài đặt vào node_modules direcory qua npm?

Đây là bài tập học tập rất nhiều nên mọi con trỏ đều được đánh giá cao! :)

Answer 1

Vì vậy, nó quay ra, câu trả lời là sự kết hợp của solution.alias của webpack và trình tải tệp. tập tin webpack mới của tôi trông như thế này:

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

Và sau đó tất cả những gì cần làm là yêu cầu các biểu tượng trong .js nộp

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

đáng yêu !!! :)

Answer 2

Tôi đã cố gắng làm điều đó dễ dàng hơn. Chỉ cần thêm bộ tải cho css và cho png

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