Articles of webpack

使用webpack不在npm上的外部库

刚开始使用webpack并了解基础知识。 虽然,我正在尝试使用外部库,并希望遵循“webpack方式”。 目前我使用npm,然后需要使用commonjs语法。 包含http://johnpolacek.github.io/imagefill.js/这样的库的正确方法是什么

我如何得到这个Typescript Webpack项目编译没有错误?

我试图将我的工作webpack node.js项目中的两个.js文件转换为.ts文件并编译它(actions.ts和flux.ts)。 运行时 webpack –progress –colors 我得到这个错误: 错误在./src/app/tools/flux.ts (2,11):错误TS2304:找不到名称'require'。 错误在./src/app/tools/flux.ts (4,1):错误TS2304:找不到名称“模块”。 错误在./src/app/actions/actions.ts (2,12):错误TS2304:找不到名称'require'。 错误在./src/app/actions/actions.ts (11,1):错误TS2304:找不到名称“模块”。 我该如何解决这些问题? 在这个屏幕截图中,您可以看到我的文件夹结构以及我正在尝试编译的代码: 这是我的webpackconfiguration,如果有帮助: 'use strict'; var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var CopyWebpackPlugin = require('copy-webpack-plugin'); var path = require('path'); var rootPath = __dirname; //site var srcPath = path.join(rootPath, 'src'); //site/src module.exports = { bail: true, cache: true, context: […]

使用WebPack和Feathers进行节点debugging

我join了使用Node,Webpack,TypeScript和Express / Feathers构build产品的团队。 其他的开发者知道他们在做什么,但是我到目前为止只在客户端上使用过JavaScript,并且在我的带子上只有几个小时的节点。 试图找出如何去debugging。 具体来说,我的第一个任务是修复一些失败的APItesting。 testing执行: $npm run testserver 我的软件包有: "scripts": { …. "testserver": "webpack –config webpack.servertest.config.js && NODE_ENV=test mocha dist/serverTests.js", …. }, 例行程序是将打字稿编译成ES6,然后将文字编辑为与节点兼容的ES5。 我试过了: $node-debug dist/serverTests.js 运行此节点debugging调用时,结果与npm不一样。 请分享你的经验。 谢谢

如何在Express中实例化一个具有转码的ES6代码的对象?

我相信我错过了一些非常简单的事情,但是我不能使用我的节点代码创build对象。 我正在使用webpack&Babel 6来为我解密。 试图按照以下说明学习: http : //blog.jeffdouglas.com/2015/05/06/start-writing-es6-javascript-in-your-node-js-apps-today/ 这是我的ES6课程: export default class ProcessData { constructor() { let output = "Module: 'Process Data' created."; console.log(output); } } 这里是我尝试使用它的路线: var express = require('express'); var router = express.Router(); var ProcessData = require('../public/node/bundle.node.js').default; var processor = new ProcessData(); router.get('/', function (req, res, next) { res.render('index', {}); }); router.post('/results', function (req, […]

ajax用json,nodejs和webpack返回401

我正在用Adobe分析API构build一个Web应用程序,并且本地一切工作正常。 当我部署到服务器本地存储的JSON(即存储在与应用程序相同的服务器)的提取返回状态代码401.我已经加倍检查文件path,它是正确的。 我不想使用webpack的json-loader,因为它会在编译时parsingjson,并且根据用户在运行时所做的操作,所加载的json文件将会有所不同。 任何帮助/build议将不胜感激

如何使用node-js api的webpack中的-p标志?

我有一个我的部署脚本,在运行webpack编译器之前编译入口点的模块。 我想用-p标志运行编译器使用节点api( https://github.com/webpack/docs/wiki/node.js-api )我看不到在这个webpackconfiguration中的一个选项 – 有没有一个,或者我可以提供这个参数的webpack的另一种方式? 这是我的脚本: utils.runScript('node-scripts/generate-entries.jsx', ['–harmony'], (err) => { if (err) throw err; console.log('entries generated'); const webpack = require('webpack'); const webpackConfig = require('../webpack.config.js'); //want to add -p to this somehow webpack(webpackConfig, () => { console.log('deploy completed'); }); }); 谢谢

使用FS文件系统的节点,Webpack和React路由

我想使用NodeJS默认的fs模块来读写文件。 我已经差不多尝试了所有可以在互联网上find的东西。 ES6和CommonJS的例子,编辑Webpack.config文件,添加应该添加Promise等的软件包..但似乎没有什么工作。 目前这是我的webpack.config.js var webpack = require('webpack'); module.exports = { entry: './index.js', output: { path: 'public', filename: 'bundle.js', publicPath: '' }, node: { fs: "empty" }, "browser": { "fs": false }, resolve: { modulesDirectories: ['web_modules', 'bower_components', 'node_modules'] }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } ] } } 正如我所提到的, […]

如何导出分配给variables的需求?

我正在执行以下操作,以使其在<app></app>可见 index.html的: <script> var electron = require('electron') </script> <app></app> <script src="bundle.js"></script> App.vue: const ipc = electron.ipcRenderer console.log(ipc) 但是,我用ESLint得到un-used和un-defined var错误,所以我决定这样做: requires.js: var electron = require('electron') exports.electron = electron index.html的: <script src="requires.js"></script> </head> <body> <app></app> <script src="bundle.js"></script> 但是现在我得到这个错误: requires.js:3 Uncaught ReferenceError: exports is not defined 。 input和input电子的正确方法是什么? 注意:要求直接在App.vue中使用electron不起作用。 你只能在index.html要求electron 完整的例子: https : //github.com/alexcheninfo/vue-electron-simple

带有服务器渲染的HMR会导致无效的校验和

我有一个与webpack捆绑在一起的Express服务器应用程序。 客户端也与webpack捆绑在一起,服务器使用webpack-dev-middleware和webpack-hot-middleware为开发模式下的HMR服务。 当我改变一个React组件的时候,改变发生在客户端,当我开始使用HMR的时候,问题就出现了。 由于组件在客户端被热replace,所以它使用了文件的“新”版本,但是服务器仍然与旧的一样,因为它与webpack捆绑在一起,所以当使用服务器渲染时,两个结果是不同的。 更改组件时是否还有更改服务器的方法?

正确的webpackconfiguration为babel 6,反应热负载,webpack中间件

在webpackconfiguration阅读小说的SOpost的价值,我仍然无法通过module parse failed错误。 package.json(不是全部) "dependencies": { "babel-core": "^6.7.6", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.6.0", "babel-preset-es2015-webpack": "^6.4.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0", "react": "^0.14.6", "react-dom": "^0.14.6", "react-hot-loader": "^1.3.0", "webpack": "^1.12.14", "webpack-dev-middleware": "^1.6.1", "webpack-hot-middleware": "^2.10.0" } 结构体 package.json node_modules .babelrc client/ webpack.config.js .babelrc # duplicated just for shits and giggles… src/ index.jsx components/ server/ index.js //more stuff 客户机/ webpack.config.js var […]