webpack - 需要('node_modules/leaflet/leaflet.css')

webpack - require(#39;node_modules/leaflet/leaflet.css#39;)(webpack - 需要(node_modules/leaflet/leaflet.css))
本文介绍了webpack - 需要('node_modules/leaflet/leaflet.css')的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

所以我正在尝试使用 webpackleaflet 构建地图应用程序.我可以从我的 map.js 文件中要求 leaflet.js,但我无法在不出错的情况下调用 leaflet.css.

So I'm trying to build a map app using webpack and leaflet. I can require leaflet.js from my map.js file, but I can't call leaflet.css without getting an error.

我当前的 webpack.config.js 看起来像:

My current webpack.config.js looks like:

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

我的 main.js 文件看起来像:

And my main.js file looks like:

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

通过 webpack 捆绑来自 3rd 方供应商的 css 文件的正确方法是什么?

What is the correct approach of bundling css files from 3rd party suppliers via webpack?

我看到 这个项目 是 leaflet 存放在 libs 目录中...这是什么原因,如果通过 npm 安装到 node_modules 目录中,为什么要存放在 libs 目录中?

I saw this project were leaflet is stored in the libs directory... what's the reason for this, why store it in the libs directory if it is installed into the node_modules direcory via npm?

这是一个非常重要的学习练习,因此非常感谢任何指针!:)

This is very much a learning exercise so any pointers are greatly appreciated! :)

推荐答案

原来如此,答案是webpack的resolve.alias和文件加载器的组合.我的新 webpack 文件如下所示:

So it turns out, the answer is a combination of webpack's resolve.alias and the file loader. My new webpack file looks like this:

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

然后我需要做的就是需要 .js 文件中的图标

And then all I need to do is require the icons in the .js file

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

可爱!!!:)

这篇关于webpack - 需要('node_modules/leaflet/leaflet.css')的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

node_modules is not recognized as an internal or external command(node_modules 未被识别为内部或外部命令)
How to test @media print with protractor or selenium?(如何用量角器或硒测试@media print?)
Finding shadow DOM text with Selenium and CSS(使用 Selenium 和 CSS 查找阴影 DOM 文本)
Formatting a number as currency using CSS(使用 CSS 将数字格式化为货币)
Querying DynamoDB with Lambda does nothing(使用 Lambda 查询 DynamoDB 没有任何作用)
AWS DynamoDb DocumentClient - Creating a batchWrite from an array of Items - node.js(AWS DynamoDb DocumentClient - 从项目数组创建 batchWrite - node.js)