Question

所以我正在尝试使用webpack和leaflet构建地图应用。我可以从leaflet.js文件中请求map.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捆绑来自第三方供应商的css文件的正确方法是什么？

我看到this project leaflet存储在libs目录中...原因是什么，为什么将它存储在libs目录中，如果它安装在node_modules目录中1}} direcory via npm？

这是一个学习练习，所以任何指针都非常感谢！：）

Answer 1

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

def arma(df, colname):
    """
    Compute the ARMA result for dataframe provided, than plot

    Parameters
    ----------
    df : dataframe
    colname : column name in the dataframe df
    """
    values_realtime = df[colname]
    arma11 = sm.tsa.ARMA(values_realtime, (1, 1)).fit()
    arma12 = sm.tsa.ARMA(values_realtime, (1, 2)).fit()
    arma13 = sm.tsa.ARMA(values_realtime, (1, 3)).fit()
    arma31 = sm.tsa.ARMA(values_realtime, (3, 1)).fit()
    arma41 = sm.tsa.ARMA(values_realtime, (4, 1)).fit()
    values_predict_arma11 = arma11.predict()
    values_predict_arma12 = arma12.predict()
    values_predict_arma13 = arma13.predict()
    values_predict_arma31 = arma31.predict()
    values_predict_arma41 = arma41.predict()
    # get errors I
    values_error_arma11 = values_predict_arma11 - values_realtime
    values_error_arma12 = values_predict_arma12 - values_realtime
    values_error_arma13 = values_predict_arma13 - values_realtime
    values_error_arma31 = values_predict_arma31 - values_realtime
    values_error_arma41 = values_predict_arma41 - values_realtime
    # get errors II
    print arma11.resid()
    # ...

然后我需要做的就是需要.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: {
        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
    }
}

可爱!!! ：）

Answer 2

我设法做得更容易。只需要为css和png添加加载器

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

webpack - require（'node_modules / leaflet / leaflet.css'）

2 个答案: