webpack - 需要（'node_modules/leaflet/leaflet.css'）

Posted 2023-03-08

【中文标题】webpack - 需要（\'node_modules/leaflet/leaflet.css\'）

【英文标题】：webpack - require('node_modules/leaflet/leaflet.css')webpack - 需要（'node_modules/leaflet/leaflet.css'）

【发布时间】：2016-02-17 08:32:24

【问题描述】：

所以我正在尝试使用webpack 和leaflet 构建地图应用程序。我可以从我的map.js 文件中要求leaflet.js，但我无法调用leaflet.css 而不会出错。

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

'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 文件看起来像：

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 文件的正确方法是什么？

我看到this project是leaflet存储在libs目录中...这是什么原因，如果它通过npm安装到node_modules目录中，为什么要将它存储在libs目录中?

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

【问题讨论】：

Example of how to load static CSS files from node_modules using webpack?的可能重复

@Drew - 这个问题之前发布过 - 你的例子是重复的。不幸的是，我没有足够的权限来做到这一点。

【参考方案1】：

事实证明，答案是 webpack 的 resolve.alias 和文件加载器的组合。我的新 webpack 文件如下所示：

'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 文件中的图标

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

可爱！！！ :)

【讨论】：

这个威胁也可能有帮助github.com/PaulLeCam/react-leaflet/issues/255

没有别名也可以require("leaflet/dist/images/marker-shadow.png")等

【参考方案2】：

我设法做到了更轻松。只需要为 css 和 png 添加加载器

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