Tag: webpack

Webpack意外的令牌（React）可能需要加载器 – 已经有一个: 所以我得到这个错误： ./web/index.js中的错误模块parsing失败：C：\ git \ personal \ blog \ web \ index.js意外的标记（17：4）您可能需要一个适当的加载器来处理此文件types。在Parser.pp.unexpected上的语法错误：意外的标记（17：4）Parser.pp $ 4.raise（C：\ git \ personal \ blog \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：2221：15）（C：\ git \ personal \ blog \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：603：10）Parser.pp $ 3.parseExprAtom（C：\ git \ personal \ […]

Webpack定制插件来定义一个模块: 我正在尝试为Webpack编写一个小的自定义插件，它将构build一个自定义的Modernizr对象并将其公开。我发现这个插件和这个加载器，但加载器似乎hacky（它需要一个空文件.modernizrrc即使我直接传递选项），插件只能创build一个单独的文件。我从前面的插件中借用了一些代码，但是不知道最后一步（如何在构build的文件中公开Modernizr ）： const modernizr = require('modernizr'), ConcatSource = require('webpack-sources/lib/ConcatSource'), CachedSource = require('webpack-sources/lib/CachedSource'); class BuildModernizrPlugin { constructor(props = {}) { let plugin = this; plugin._props = props; } apply(compiler) { let plugin = this; compiler.plugin('after-compile', (compiler, callback) => { modernizr.build(plugin._props, result => { plugin._modernizr = result; callback(); }); }); compiler.plugin('emit', (compilation, callback) => […]

捆绑问题（angular2 + webpack捆绑）: 这是我的package.json。我添加了webpack的依赖关系。我的混乱是否我的denpendencies和脚本正确？因为，当我做npm开始时，它开始捆绑，并启动浏览器的angular2项目，我有一个问题，无法得到app.bundle.js ，我已经提供了index.html，下面的webpack.config.js .. { "name": "angular-quickstart", "version": "1.0.0", "description": "QuickStart package.json from the documentation, supplemented with testing support", "scripts": { "build": "rimraf dist && webpack –config webpack.config.js –progress", "build:watch": "tsc -p src/ -w", "build:e2e": "tsc -p e2e/", "serve": "lite-server -c=bs-config.json", "serve:e2e": "lite-server -c=bs-config.e2e.json", "prestart": "npm run build", "start": "concurrently \"npm run build:watch\" […]

如何使用Webpack注入全局variables？: 我需要一个在编译时生成的Map的特定实例，以便将其与webpack捆绑在一起的代码提供给我。我的用例，如果是一个Map的实例，但这个问题真的适用于任何variables。 webpack.DefinePlugin将无法正常工作，因为我的Map实例无法存活。我可以反序列化/序列化，但这似乎效率低下。 options.externals将无法工作，因为我require一个外部模块被捆绑器忽略。我已经能够通过在global设定价值来实现这一目标，但我不确定这是否是最好的方法。这是一个可怜的例子： webpack.config.js ： const myVar = new Map([ ['a test value', () => {}] ]); // is there a better way? global.myVar = myVar; module.exports = { entry: './entry.js', output: { filename: './output.js' }, target: 'node', } entry.js ： console.log(global.myVar) //=> Map { { "a test value", [Function] } […]

如何查看在Angular中声明的node_modules的非缩小的源文件: 下面是一个例子，给出一个依赖和它的types： npm i –save leaflet npm i –save-dev @types/leaflet 当build立angular（angular度cli 1.0，ng 4.0） ng build 在./~/leaflet/dist查看Chrome工具 leaflet.js是库的缩小版本。有没有办法使用非缩小版本来进入代码？我试图添加该参数，但没有任何差异。 ng build –sourcemap

在节点中服务gzip文件在浏览器中抛出net :: ERR_CONTENT_DECODING_FAILED: 我试图按照这个为了服务一些静态压缩文件。 https://medium.com/@rajaraodv/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a 我正在使用webpack压缩插件来生成gzip文件。 new CompressionPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: /\.(js|css)$/, deleteOriginalAssets: true }) 在我的服务器上，我有这个中间件。 app.get('*.js', function (req, res, next) { req.url = req.url + '.gz'; res.set('Content-Encoding', 'gzip'); next(); }); 当我运行的应用程序，在浏览器中，我得到GET http：// localhost：8080 / app.js net :: ERR_CONTENT_DECODING_FAILED 也许，我还需要做更多的事情，但不知道究竟是什么。谢谢，Ionut

Webpack渲染：“窗口没有定义”: 我使用MERN – https://github.com/Hashnode/mern-starter（react，redux，webpack，nodejs，express ）和组件react-sound – https://github.com/leoasis/react-sound 当我包含组件 import Sound from 'react-sound'; 并尝试启动服务器，我有"window is not defined"错误从webpack服务器渲染。但是，如果我评论这条线并启动服务器，一切都会好起来的。之后，我可以取消注释这一行，组件将工作，因为当服务器正在运行，更改不会触发服务器呈现（只有正面呈现）。如果我尝试 if (typeof window !== 'undefined') { const Sound = require('react-sound'); } 并在渲染 render() { return ( <div> <Sound playStatus={Sound.status.STOPPED} url="" /> </div> ); } 我有ReferenceError: Sound is not defined在前面渲染错误（在webpack之后）。更新：如果我尝试（ var ，不是const ） if (typeof window […]

如何将客户端webpack包部署到生产？: 我目前正在向我的数字海洋nodejs环境部署一个应用程序，这是一个客户端套件，与API交谈。到目前为止，我一直在使用devserver进行开发，但是我猜这不是用于生产的，因为我的包是很大的（1.8 MB）。这是我的devserver设置： var WebpackDevServer = require('webpack-dev-server'), webpack = require('webpack'), config = require('./webpack.config'); const compiler = webpack(config); const server = new WebpackDevServer(compiler, { historyApiFallback: true, compress: true, inline: true, hot: true }); server.listen(8000); 我的webpackconfiguration： var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './src/main.js', output: { filename: 'app.js', }, devServer: { […]

哪个babel插件声明这个var？: 我试图开始auth0-lock这个电子项目。在一个auth0的嵌套的依赖项（ node-formidable ）中，这个行在文件的顶部： if (global.GENTLY) require = GENTLY.hijack(require); 这是他们用来testing覆盖全局需求，但设置global.GENTLY为false应该绕过它的开发模式。然而，在这个项目中的webpack / babel configs（下面）中的东西正在改变这一行： var require;if (global.GENTLY) require = GENTLY.hijack(require); 这是覆盖全局require和打破其余的文件/构build与require is not a function 我正在通过插件一个接一个地find正在做的事情，但到目前为止没有做任何事情。任何人都知道什么设置会导致这种覆盖？ // .babelrc { "presets": [ ["env", { "targets": { "node": 6 }, "useBuiltIns": true }], "stage-0", "react" ], "plugins": ["add-module-exports", "dynamic-import-webpack"], "env": { "production": { "presets": ["react-optimize"], […]

使用NodeJS运行一个Angular 2应用程序，同时实时重新打包: 描述我曾经有NodeJS运行在:3000和我的ng serve'd Angular2应用程序运行:4200他们将沟通。我正在使用WebPack 我现在使用ng build -prod生成Angular2应用程序，并让Angular2应用程序读取staging（dist）文件夹并提供静态文件本身。问题当我分裂的职责，我曾经能够自动页面刷新ng serve将与angular-cli和魔术会发生。但是现在，我有NodeJS服务的静态文件，我不得不ng build -prod每一次我想刷新页面。任何人都知道我可以重新包装到暂存文件夹？