Tag: webpack

在新的Laravel 5.4上使用“npm run dev”命令时出错

我一直在为此挣扎了5个小时。 这里是我尝试在新鲜的Laravel安装上运行“npm run dev”时得到的错误 > @ dev /var/www/html/capsule > cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js –progress –hide-modules –config=node_modules/laravel-mix/setup/webpack.config.js events.js:160 throw er; // Unhandled 'error' event ^ Error: spawn node_modules/webpack/bin/webpack.js ENOENT at exports._errnoException (util.js:1022:11) at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32) at onErrorNT (internal/child_process.js:359:16) at _combinedTickCallback (internal/process/next_tick.js:74:11) at process._tickCallback (internal/process/next_tick.js:98:9) at Module.runMain (module.js:606:11) at run (bootstrap_node.js:394:7) at startup (bootstrap_node.js:149:9) at bootstrap_node.js:509:3 npm ERR! […]

使用React-Router browserHistory，Wepback 2 historyApiFallback和Node

我尝试使用React，Node，Wepback 2在本地运行我的React应用程序。每当我遇到不是/我得到404的路由时，我的目标是能够运行我的节点服务器，让webpack-dev-服务器运行，使用browserHistory并返回我的webpack的historyApiFallback工作。 目前的工作： 如果我只运行webpack-dev-server而没有节点服务器，那么browserHistory工作正常，没有404s。 如果我用hashHistory运行节点，它工作正常，没有404s。 所以这就排除了我的路线不工作。 这里是一些代码： server.js const express = require('express'); const expressGraphQL = require('express-graphql'); const schema = require('./schema'); const app = express(); app.use('/graphql', expressGraphQL({ schema, graphiql: true })); const webpackMiddleware = require('webpack-dev-middleware'); const webpack = require('webpack'); const webpackConfig = require('../webpack.config.js'); app.use(webpackMiddleware(webpack(webpackConfig))); app.listen(process.env.PORT || 5000, () => console.log('Listening')); webpack.config.js const webpack = require('webpack'); const […]

types的stream量提示没有被巴贝尔剥夺

我有一个使用UI组件的自定义“主题”的React.JS项目。 这个主题还提供了构build脚本（webpackconfiguration，babelconfiguration等）。 我想在这个项目中开始使用Flow。 我安装了所需的npm包，并将flow添加到babel的预设中，然后将props = {mytestprop: string}到我的一个React类中。 Webpack成功地编译了我的代码，但是types提示没有被剥离！ 当然，浏览器不能执行这个代码 – 当我尝试运行它时，会引发ReferenceError: string is not defined 。 .babelrc的当前预设列表是： ["es2015", "react", "stage-2", "flow"] 。 我确定这是babel使用的实际列表，因为如果我删除前3个预设中的任何一个，编译将失败。 你有什么想法可能导致这种行为剥离streamtypes？

Webpack错误bundle.js：1未捕获的SyntaxError：意外的标记<

我运行服务器本地主机，并得到错误bundle.js：1未捕获SyntaxError：意外的标记<在输出bundle.js是index.html文件的html代码。 这是设置我的webpack.config文件。 你能告诉我设置有什么问题吗？ import path from 'path'; import webpack from 'webpack'; export default { devtool: 'eval-source-map', entry: [ 'webpack-hot-middleware/client', path.join(__dirname, '/client/index.js' ) ], output: { path: '/', publicPath: '/' }, plugins: [ new webpack.NoEmitOnErrorsPlugin(), new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin() ], module: { loaders: [ { test: /\.js$/, include: path.join(__dirname, 'client'), loaders: ['react-hot-loader', 'babel-loader' ] } ] […]

npm安装后出现Webpack错误

我正在做一个项目，一切都很顺利，直到我做了npm install 。 然后，webpack将引发以下错误： new ForkCheckerPlugin(), ^ TypeError: ForkCheckerPlugin is not a constructor at makeWebpackConfig (/home/nsanz/Documentos/git/tachology/webpack.make.js:252:9) at Object.exports.default (/home/nsanz/Documentos/git/tachology/server/config/express.js:86:27) at Object.<anonymous> (/home/nsanz/Documentos/git/tachology/server/app.js:28:1) at Module._compile (module.js:570:32) at loader (/home/nsanz/Documentos/git/tachology/node_modules/babel-register/lib/node.js:144:5) at Object.require.extensions.(anonymous function) [as .js] (/home/nsanz/Documentos/git/tachology/node_modules/babel-register/lib/node.js:154:7) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.<anonymous> (/home/nsanz/Documentos/git/tachology/server/index.js:12:28) at Module._compile (module.js:570:32) […]

如何使用webpack包含工作/进程文件

我有一个创buildsubprocess的文件，代码与此类似： var cp = require('child_process'); function process () { return cp.fork('./worker'); } module.exports(process); 但是./worker似乎没有包含在这个包中。 运行process函数时会导致以下错误： Error: Cannot find module 'C:\Users\USER\Documents\GitHub\PROJECT\worker' at Function.Module._resolveFilename (module.js:485:15) at Function.Module._load (module.js:437:25) at Function.Module.runMain (module.js:605:10) at startup (bootstrap_node.js:158:16) at bootstrap_node.js:575:3 module.js:487 throw err; ^ 我怎样才能确保工人文件被捆绑？ 我希望我的整个项目在一个文件中。

与代码智能感知不与webpack捆绑使用

我有一个简单的webpackconfiguration。 const path = require('path'); module.exports = { devtool: 'source-map', entry: './src/index.js', output: { libraryTarget: 'commonjs', filename: 'index.js', path: path.resolve(__dirname, 'dist'), }, }; 在构build并将模块上传到npm并在其他项目上使用它们之后， vs代码 IntelliSense不适用于这些模块。 jsdoclogging了模块function。 import { myFunc } from 'myModule'; 要么 const myModule = require('myModule'); Myfunc和myModule没有IntelliSense自动压缩支持或任何其他。 如何保持webpack构build后的jsdoc工作？

如何在package.json中添加NODE_PATH到webpack？

如何在package.json中添加NODE_PATH到webpack？ 我的packcage.json的一部分： "dependencies": { "axios": "^0.16.2", "cross-env": "^5.0.1", "koa": "^2.3.0", "koa-mount": "^3.0.0", "koa-static": "^4.0.1", "koa-trie-router": "^2.1.5", "mongodb": "^2.2.31", "nuxt": "^1.0.0-rc3", "socket.io": "^2.0.3" }, "devDependencies": { "babel-eslint": "^7.2.3", "backpack-core": "^0.4.1" }, "scripts": { "test": "mocha –harmony", "dev": "NODE_PATH=./app backpack dev", "build": "nuxt build && backpack build", "start": "cross-env NODE_ENV=production NODE_PATH=./app node build/main.js" }, backpack.config.js： module.exports = […]

浏览器如何获取“sourcemapped”javascript文件的源文件？

我正在开始使用angular JS构build的现有项目。 当我打开chrome开发工具的“源代码”视图时，浏览器告诉我： 检测到源地图… 我看到这个： 哪里 inline.bundle.js main.bundle.js 等等… 是编译的文件，其原始文件在Ive圈出的源目录中，例如 ng:// webpack:// 等等.. 浏览器不显示任何networking请求这些ng:// ， webpack://文件，所以我的问题是，这些文件从哪里来？ 浏览器如何获取这些数据？ 我猜服务器提供了一个“源代码”文件/ s到浏览器，其中包含所有的原始源代码及其相应的编译代码？ 然后浏览器parsingsourcemap，并为这些文件生成一个“虚拟”文件树 – 这就是为什么没有networking请求？ 这些“文件”从哪里来？

如何单独加载ES6模块（根据需要）又名。 树在摇晃吗？

现在我正在通过我的应用程序，改变这种模式的实例： import {Grid, Row, Col} from 'react-bootstrap' 成： import {Grid, Row, Col} from '../react-bootstrap' 其中react-bootstrap.js是一个简单的文件在我的项目的根目录，有select地导入我需要从NPM包的ES6模块： import Grid from 'react-bootstrap/es/Grid' import Col from 'react-bootstrap/es/Col' import Row from 'react-bootstrap/es/Row' export {Grid, Col, Row} 这样做的一些包，我可以减less我的包文件大小超过50％。 有没有一个WebPack模块或插件可以自动执行任何包？ 如果这个转换（也就是只在包中包含明确导入的内容，而不是整个库）recursion地应用于整个包树，我敢打赌，我们会看到显着的尺寸差异。 编辑：正如Swivel指出的那样，这被称为Tree Shaking ，并且应该由Webpack 3+自动执行，UglifyJSPlugin包含在我正在使用的react-scripts的生产configuration中 。 我不确定这是否是这两个项目中的一个bug，但是通过手动进行select性导入，我看到了很大的收益，如果正在执行Tree Shaking，情况就不是这样。