Articles of webpack

使用webpack和node.js运行Heroku

首先是上下文,这是我的文件结构: bundle.js package.json package-lock.json .gitignore /.git /node_modules /src form.js form.css index.html json.js 这是我的package.json : { "name": "transcriber-form-helper", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node node_modules/webpack/bin/webpack.js ./src/form.js bundle.js" }, "author": "", "license": "ISC", "dependencies": { "jquery": "^3.2.1" }, "devDependencies": { "css-loader": "^0.28.7", "style-loader": "^0.19.0", […]

Webpack不会重新加载页面

npm run dev工作正常,但它不会重新加载页面进行更改时。 我也尝试使用localhost:8080/webpack-dev-server/index.html并且页面不再刷新。 我完全是NodeJS的新手,完全不知道如何解决这个问题。 我花了几个小时尝试不同的事情,因为这很困难,我差点stream泪。 文件夹结构: Project – node_modules – src – js – components – pages – client.min.js – index.html – package.json – package-lock.json – webpack.config.js 的package.json: { "name": "react-tutorials", "version": "0.0.0", "description": "", "main": "webpack.config.js", "dependencies": { "babel-core": "^6.17.0", "babel-loader": "^6.2.0", "babel-plugin-add-module-exports": "^0.1.2", "babel-plugin-react-html-attrs": "^2.0.0", "babel-plugin-transform-class-properties": "^6.3.13", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preset-es2015": "^6.3.13", "babel-preset-react": […]

React没有导出的成员LinkHTMLAttributes

我正在使用vs2017,npm和webpack构build一个反应的应用程序。 由于在我的标题中描述的错误,我无法获得vs构build我的解决scheme: 错误TS2694 Build:Namespace'React'没有导出的成员'LinkHTMLAttributes'。 SpyStore.React C:\ Work \ Development \ React \ Spystore \ SpyStore.React \ SpyStore.React \ node_modules \ @types \ react-router \ lib \ Link.d.ts 10 Js文件:\ node_modules \ @types \ react-router \ lib \ Link.d.ts import * as React from 'react'; import Router from './Router'; declare const Link: Link; type Link = […]

Webpack中包含多个供应商包的多个入口点

我有几个“单页应用程序”,需要在一个总体应用程序中并行运行。 为此,我使用webpack来触发jsx和scss的转换,捆绑生成的css和js,拆分由我们编写的应用程序代码和来自第三方来源的应用程序代码。 不幸的是,似乎webpack对于如何捆绑供应商文件非常有见地 – 它想要为我所有的入口点创build一个大的供应商捆绑包,而不是像这样更合理的拆分: – app1 – app1.bundle.js – app1.vendor.bundle.js – app1.bundle.css – app2 – app2.bundle.js – app2.vendor.bundle.js – app2.bundle.css 我特别不希望遇到这样的情况:我将一些大的(如JQuery)库导入到应用程序2中,并将其包含在不需要它的其他应用程序的供应商捆绑包中。 我们的许多页面使用完全不同的前端堆栈,如果我使用整个Web应用程序的单个vendor.js文件,我可以很快看到这种膨胀失控。 我还希望自动完成 – webpack应该能够扫描我的入口点,检测哪些第三方库(可能通过引用节点模块?)正在导入,只包括供应商文件中的该应用程序。 我不想在我的webpackconfiguration中添加第三方依赖到一个数组中,并在我的入口点require()它们。 这似乎很多余。 我没关系的app1.vendor.bundle.js和app2.vendor.bundle.js有重叠(即,如果他们都导入React,他们都可以包括在他们单独的捆绑代码)。 我认为这比pipe理在我网站上运行的部分应用程序共享的通用文件要容易得多。 有没有什么办法可以自己在webpack中实现,或者我将不得不写一些自定义的解决scheme来包装它呢? 我见过的所有例子都有人为整个应用程序编译一个全面的供应商包。

Webpack错误:无法find模块“。”

我正在使用musixmatch-sdk中的api,并通过使用webpack构build项目时webpack 。 我正在使用webpack 2 , react , node 。 musixmatch网站上的默认import是: var MusixmatchApi = require('../../build/javascript-client/src/index'); 但是,这并没有工作,并得到这个错误: ERROR in ./build/javascript-client/src/index.js<br/> Module not found: Error: Can't resolve 'ApiClient' in '/Users/myname/lyrix/build/javascript-client/src'<br/> @ ./build/javascript-client/src/index.js 28:4-2099<br/> @ ./src/server.js 所以我写了一个绝对path如下: const MusixmatchApi = require(path.join(__dirname,'../build/javascript-client/src/index')); 这工作在webpack开发模式,但我得到这个警告: WARNING in ./src/server.js 33:20-102 Critical dependency: the request of a dependency is an expression @ ./src/server.js 所以,如果我想build立生产项目,我得到的错误: […]

为什么我不能使用请求,如果我用webpack打包

我尝试使用Webpack来打包我的React代码。 然后我尝试使用请求从网站获取一些信息。 这是我的JS代码的一部分 rp({url:'http://int.dpool.sina.com.cn/iplookup',encoding:null}) .then((html) => { this.setState({data:"sucess"}) }) .catch((err) =>{ this.setState({data:err.toString()}) }) 我使用rp,这是request-promise(request with promise),我试图通过this.state.data显示结果。 代码运行在节点(没有反应和webpack),我成功地访问数据。 如果我使用Webpack来打包它,它显示错误:RequestError:TypeError:无法获取。 我想在使用webpack之后,互联网有一些问题。 这是我的webpack.config.js let path = require('path'); module.exports = { entry: './App/app.js', output: { path: path.join(__dirname, '/dest'), filename: 'app.js' }, resolve: { extensions: ['.js', '.jsx', '.css'] }, module: { loaders: [ { test: /\.js|jsx$/, loaders: ['babel-loader'], exclude: /node_modules/ […]

由webpack生成的Vendor.js不工作(Gulp手表调用webpack)/ Bootstrap

我正在一个网站上的Gulp和Webpack生成所有的js文件。 问题是,在index.html中导入的时候,由webpack生成的文件Vendor.js(捆绑来自node_modules文件夹的JQuery和Bootstrap )不能正常工作,因此我必须包含jquery.js和bootstrap.js手动的文件,我不想。 当我打开生成的Vendor.js文件,它看起来像它有bootstrap.js和jquery.js,但它不工作:( 在这里你可以看到文件夹结构: webpack.config.js var path = require('path'); module.exports = { entry: { App: "./app/js/App.js", Vendor: "./app/js/Vendor.js" }, output: { path: path.resolve(__dirname, "./app/temp/scripts"), filename: "[name].js" }, module: { loaders: [ { loader: 'babel-loader', query: { presets: ['es2015'] }, test: /\.js$/, exclude: /node_modules/ } ] }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', […]

在单个包文件中join文件,但是避免在包中发布Commonjs文件

我有一些*.ts文件,我想join一个bundle.js文件。 要做到这一点,我正在使用webpack version 3.* 。 问题是我想避免导入其他库或Commonjs在捆绑文件中发射。 例如,我有import * as firebase from 'firebase将发射捆绑文件,我想要避免它。 只有我写的文件应该join,比如file1.ts,file2.ts,…。

带有react-router的webpack中的多个入口点

我正面临着巨大的问题,试图与反应路由器一起实现多个入口点。 目的是实现使用webpack做一些build议由https://github.com/petehunt/webpack-howto 。 到目前为止,我已经把它设置为这样: webpack.config.js entry: { entry1: __dirname + './entry1.jsx', entry2: __dirname + './entry2.jsx' } routes.jsx export default ( <Route path='/' name='app' handler={App}> <DefaultRoute handler={entry1} /> <Route name='entry2' handler={entry2}/> </Route> ); 无论何时运行此代码以在客户端上实例化Router的实例 Router.run(routes, Router.HistoryLocation, (Handler, state) => { React.render(<Handler />, document.getElementById('app')); }); Node.js会尝试在服务器上运行这个代码,因为DOM不可用,所以显然会失败。 它会产生一个错误。 是否有任何适当的方法来实现多入口点与react-router?

如何使用OpenLayers和react-starter-kit?

我在基于react-starter-kit的项目中运行OpenLayers3 Map时遇到了问题。 我试图添加简单的地图来反应组件。 我所做的是: 运行npm install openlayers 将import ol from 'openlayers'添加到ContactPage.js 创build简单的地图 componentDidMount(){ var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) }) ], view: new ol.View({ center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'), zoom: 4 }) }); } 将渲染函数<div id="map" className="map"></div> jsx部分添加<div id="map" className="map"></div> 运行npm start。 我得到一个错误: …\node_modules\openlayers\dist\ol.js:7 module.exports = […]