webpack – require(‘node_modules / leaflet / leaflet.css’)

所以我试图使用webpack和传单来构建地图应用程序.我可以要求我的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?$/,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是传单存储在libs目录…这是什么原因,为什么要存储在libs目录中,如果它通过npm安装到node_modules目录中？

这是一个非常学习的练习,所以任何指针都非常感谢！

webpack – require(‘node_modules / leaflet / leaflet.css’)

相关文章