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

前端 未结 2 490
别跟我提以往
别跟我提以往 2021-02-02 15:51

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

相关标签:
2条回答
  • 2021-02-02 16:03

    I managed to do it easier. Just needed to add loaders for css and for png

    loaders: [
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        {
            test: /\.png$/,
            loader: 'url-loader',
            query: { mimetype: 'image/png' }
        }
    ]
    
    0 讨论(0)
  • 2021-02-02 16:11

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

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

    Lovely!!! :)

    0 讨论(0)
提交回复
热议问题