Articles of webpack

不同的babel预设为后端和前端,但为相同的env

我有nodejs项目与反应前端部分,我想使用巴贝尔后端服务器(有导入/导出,和一些额外的function,如“装饰”,对象rest传播等) 此外,我想使用巴贝尔反应前端项目,但与不同的预置/插件集。 在后台我有最新的(8.2)nodejs,所以它已经知道类,asynchronous/等待等不应该被转移。 但在前端,我针对IE11,所以我必须启用大量的插件。 所以,如果我有单一的.babelrcconfiguration前端和后端我越来越transpiled后端代码。 我知道有一个'env'选项为babelconfiguration,但在描述的情况下,我有相同的'env'。 现在我结束了两个configuration:一个在package.json和一个在webpack.config(babel-loader选项)里面。 不过,我不喜欢结果,因为它可能会混淆新的开发者。 他可以在package.json里面findbabelconfiguration,并认为这是唯一的configuration,试图添加/修改某些东西,并努力为什么它不影响前端部分。 这样的设置也有一些问题: Jest无法从webpack.config中读取babel设置,所以我必须在.babelrc中定义额外的“env”:“test”,只是为了开玩笑。 这在testing过程中导致不必要的后端传输。

Webpack-dev-server找不到要提交的文件

我只是从webpack文档复制粘贴webpack-dev-server + express设置,但是它不起作用,因为服务器找不到要提供的文件。 这个设置有什么问题? server.js const express = require('express'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const app = express(); const config = require('../webpack.config.js'); const compiler = webpack(config); app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath })); /*app.use('/',express.static('public')) it works when used insted of webpack dev middleware */ // Serve the files on port 3000. app.listen(3000, function () […]

找不到package.json:/

我用下面的webpack.config.js有一个Node Express打包的应用程序: module.exports = { target: 'node', entry: './server.js', output: { filename: 'node-server.min.js' } } 当我运行节点node-server.min.js应用程序工作正常,但是,当我从电子加载文件我收到以下错误信息: 未捕获的错误:在模块的Function.pkginfo.read(node-server.min.js:6390)处,找不到package.json,位于:Function.pkginfo.find(node-server.min.js:6373)。导出(node-server.min.js:6341)在Object。 (node-server.min.js:6403)在Object.styles(node-server.min.js:6408)上的webpack_require(node-server.min.js:20)。 (node-server.min.js:14624)在对象。 (node-server.min.js:14699)在对象。 (node-server.min.js:14701)在webpack_require(node-server.min.js:20) 我正在用脚本标记加载node-server.min.js文件。 有任何想法吗 ?

Webpack不能在Linux上安装

最近我改变我的环境从Windows 10到backbox Linux 4.5.1,但我已经尝试安装使用npm多次的webpack。 它永远不会安装它给出这些错误。 任何帮助? verbose tar unpack /home/dove/.npm/webpack/1.12.13/package.tgz 34 silly lockFile 27155615-tar-usr-lib-node-modules-webpack tar:///usr/lib/node_modules/webpack 35 verbose lock tar:///usr/lib/node_modules/webpack /home/dove/.npm/27155615-tar-usr-lib-node-modules-webpack.lock 36 silly lockFile 5c48f9fd–npm-webpack-1-12-13-package-tgz tar:///home/dove/.npm/webpack/1.12.13/package.tgz 37 verbose lock tar:///home/dove/.npm/webpack/1.12.13/package.tgz /home/dove/.npm/5c48f9fd–npm-webpack-1-12-13-package-tgz.lock 38 silly gunzTarPerm modes [ '775', '664' ] 39 error Error: EACCES, mkdir '/usr/lib/node_modules/webpack' 39 error { [Error: EACCES, mkdir '/usr/lib/node_modules/webpack'] 39 error errno: 3, […]

npm与巴贝尔和webpack创build反应应用程序不起作用

我是新兴的UI技术。 我正在尝试我的手在reactjs随着webpack和babel我创build了一个应用程序后使用npm安装它使用create-react-app插件。 我进入src文件夹并执行npm start,启动浏览器并显示演示页面。 我试图添加babel和webpack到这个演示,但不幸的是它不工作。 我打开浏览器中的index.html页面,它不显示我所遵循的jsx文件内容https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-的WebPack-du107r9zr 我不知道为什么这不起作用,可以请一些帮助吗? index.jsx import React from 'react'; import {render} from 'react-dom'; class App extends React.Component { render () { return <p> Hello React!</p>; } } render(<App/>, document.getElementById('app')); 的index.html <html> <head> <meta charset="utf-8"> <title>React.js using NPM, Babel6 and Webpack</title> </head> <body> <div id="app" /> <script src="public/bundle.js" type="text/javascript"></script> </body> </html> .babelrc文件 { […]

在Webpack中使用节点通告器

我编写了一个用create-react-app(我使用Webpack和Babel)创build的Electron项目。 我想使用节点通知符,但是我在configurationWebpack时遇到了问题(我认为)。 通知调用的代码是从repo的自述文件复制粘贴。 我目前的Webpackconfiguration(我设法取消所以没有错误)是: node: { fs: 'empty', net: 'empty', tls: 'empty', child_process: 'mock', __filename: true, __dirname: true }, externals: [ 'ws' ], target: 'electron' 有没有人有一个如何configuration的想法? 我做错了什么,没有通知显示?

不是来自webpack的内容是从/ dist提供的

webpack.config.js var HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = { entry:'./src/app.js', output:{ path:path.join(__dirname, 'dist'), filename:'app.bundle.js', publicPath:'/dist/' }, , devServer: { contentBase: path.join(__dirname, "dist"), compress: true, stats: "errors-only", openPage: '', port:9000, open:true }, plugins: [new HtmlWebpackPlugin({ title:'Forum', filename:'index.html' //template:'./src/app.html' })] } 我的项目结构: ├── forum │ └── dist └── app.bundle.js ├── src │ ├── app.html […]

在Google Cloud App Engine中安装开发依赖关系

我正在尝试将我的React应用部署到Google Cloud App引擎。 我也添加了一个app.yaml文件。 它看起来像这样: // app.yaml runtime: nodejs env: flex 现在,我想在部署之前使用webpack构build我的项目。 所以下面的文档 ,我已经添加了prestart脚本到package.json 。 现在我的脚本部分package.json看起来像这样: "scripts": { "build": "npm-run-all –parallel webpack-client-build webpack-server-build", "webpack-server-build": "NODE_ENV='development' webpack –config ./webpack/webpack.server.config.js –progress –colors –watch", "webpack-client-build": "NODE_ENV='development' webpack –config ./webpack/webpack.browser.config.js –progress –colors –watch", "build-prod": "npm-run-all webpack-client-build-prod webpack-server-build-prod", "webpack-server-build-prod": "webpack –config ./webpack/webpack.server.config.js -p", "webpack-client-build-prod": "webpack –config ./webpack/webpack.browser.config.js -p", "prestart": "npm […]

无法在AWS EC2的公共IP上使用webpackdevserver托pipe反应应用程序

我正在运行AWS EC2上的react应用程序,它通过localhost:3000访问时在本地工作 我想让它公共访问,所以我通过公共ip到以下命令 var webpackDevServer = new WebpackDevServer(bundler, { publicPath: '/', hot: false, quiet: false, noInfo: true, stats: { colors: true } }); webpackDevServer.listen(3000, '18.230.124.435', function () { console.log('Bundling project, please wait…'); }); 我正在使用gulp来运行任务。 我geting一个错误错误:听EADDRNOTAVAIL 18.230.124.435:3000 我在这里做错了什么?

Npm包提供一个Material-UI HOC到一个Nextjs应用程序

问题描述 我正在尝试通过npm包提供Material-UI到Nextjs应用程序。 npm包使用Webpack。 这一切正常,但我得到一个错误消息。 这个东西稍微超出了我对npm packages&webpack的理解,我可能不会这样做,如果是这样的话,请提供build议。 错误消息 警告:上下文types失败: 64a55d578f856d258dc345b094a2a2b3types的上下文64a55d578f856d258dc345b094a2a2b3提供给withStyles(ButtonBase) , Jss预期实例。 警告:上下文types失败:提供给withStyles(TouchRipple)types的SheetsRegistrytypes的无效上下文d4bd0baacbc52bbd48bbb9eb24344ecd ,为withStyles(TouchRipple)预期实例。 重现步骤 这只会让你检查错误。 git clone https://github.com/astenmies/next-library-starter.git && cd next-library-starter && yarn && yarn run dev 调整npm包的步骤 这将让你检查错误,并调整本地运行的npm包。 首先得到npm包并运行它 git clone https://github.com/astenmies/next.js-library.git && cd next.js-library && yarn && yarn run dev 然后在你的terminal的另一个选项卡上,在上述相同的根目录下…获取nextjs应用程序,删除npm包,获取linklocal并运行应用程序。 git clone https://github.com/astenmies/next-library-starter.git && cd next-library-starter && yarn remove next-library && yarn […]