問題描述
所以我正在嘗試使用 webpack 和 leaflet 構建地圖應用程序.我可以從我的 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: '© <a >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')的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！