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

所以我正在尝试使用webpack和leaflet构build一个地图应用程序。 我可以从我的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捆绑来自第三方供应商的css文件的正确方法？

我看到这个项目是leaflet存储在libs目录…这是什么原因，为什么把它存储在libs目录，如果它通过npm安装到node_modules direcory？

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

Answer 1

所以事实certificate，答案是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"); 

可爱！！！ 🙂

Answer 2

我设法做到了这一点。 只需要添加装载机的CSS和PNG

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