Articles of webpack

使用Webpackcaching索引源代码中的值,使用React.js

我正在构build一个同构的应用程序。 它是完全用反应build立起来的 – 也就是说,html基础也在起作用。 我有我的根html作为一个应用程序组件。 它看起来像这样: … var AppTemplate = React.createClass({ displayName: 'AppTemplate', render: function() { return ( <html> <head lang="en"> <title>hello</title> <link rel="stylesheet" href='/css/style.css' /> </head> <body> <RouteHandler {…this.props}/> <script type='text/javascript' src='/js/bundle.js' /> </body> </html> ); } }); … module.exports = AppTemplate; 当我使用webpack构build项目时,我需要replacejs / bundle.js来包含哈希。 Webpack在完成后提供stats.json。 但是我需要在构build期间提供散列。 我正在考虑使用function标志来做这样的事情: … var AppTemplate = React.createClass({ displayName: […]

从节点传递或使用process.envvariables到reactjs

如何从节点传递或使用process.envvariables到reactjs? 例如,我有这个 const nodeEnv = process.env.NODE_ENV || 'development' 在我的发展和运作(我认为是因为它的发展,我有一个后备'development' 。 但是,当我们把它推到我们的登台服务器并设置NODE_ENVvariables时,它只在第一次加载时才起作用,但随后不起作用。 我想我得到这个,因为起初它是由节点服务的,它可以访问服务器variables,但事后它将反应服务页面(正确?),它将无法访问服务器的东西。 那么我怎样才能得到variables来反应,而不用硬编码呢(因为我们最终会有一个不同的生产集合)? 编辑。 如果有差异,我们也使用webpack。

使用react-router和webpack响应改变的URL给页面找不到错误

我有以下webpackconfiguration文件: var webpack = require('webpack'); var path = require('path'); var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); var APP_DIR = path.resolve(__dirname, 'src/client/app'); var config = { entry: [ APP_DIR + '/config/routes.jsx', 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080' ], output: { publicPath: 'http://localhost:8080/src/client/public/' }, module : { loaders : [ { test: /\.jsx?$/, loader: 'babel-loader', include: APP_DIR, exclude: /node_modules/, query: { presets: ['es2015'] […]

webpack-dev-server热重新加载不起作用

我的文件结构是: dist css style.css index.html js bundle.js src css style.css index.html js main.js node_modules webpack.config.js package.json 我的webpack.config.js看起来像: module.exports = { entry: './src/js/main.js', output: { path: __dirname, filename: './dist/js/bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /(node_modules)/, loader: 'babel', query: { presets: ['es2015'] } }, { test: /\.vue$/, loader: 'vue' } ] } }; […]

如何更改文件后重新编译webpack?

我使用两个入口点的webpack: entry: { js: './assets/index.js', css: './assets/sass/all.scss' }, 我想configuration它,所以当我更改js或scss文件时,它会自动再次运行webpack。 我尝试使用webpack-dev-server命令使用webpack-dev-server : webpack-dev-server –hot 它看起来像是再次build立,它输出的消息 webpack:bundle现在是有效的。 但是,如果我尝试刷新浏览器,我看不到我的更改。 (在开发工具上禁用高速caching并按下Ctrl + F5)。 重新启动节点也不起作用,就好像它已经构build在别的地方,而不是在configuration的输出文件上: output: { path: path.join(__dirname, '/public'), filename: 'bundle.js' },

Webpack不会在npm run上生成包文件

问候一个和所有, 在做了一个React应用之后,我决定深入研究Webpack。 在整个npm自动化环境中,我是一个新手,在遵循了一本烹饪书和各种教程之后,我不能让npm run dev捆绑我的应用程序。 当我运行webpack ,它会生成一个bundle.js,但是当我改变某些东西时,webpack会生成一个物理文件。 Gulp和Grunt可以为我做这个,但是我也想让它和webpack一起工作。 所以,没有更多的东西,一些代码。 我运行npm run dev ,像这样定义( package.json ,只是脚本部分*): "scripts": { "build": "webpack", "dev": "webpack-dev-server –devtool eval –progress –colors –hot –content-base build" } 通过以下Webpackconfiguration: var webpack = require('webpack'); var path = require('path'); module.exports = { entry: path.resolve(__dirname, 'src/js/main.js'), output: { path: path.resolve(__dirname, 'dist'), filename: '/js/bundle.js', publicPath: '/' }, devServer: […]

Webpack minification -p错误

我使用webpacktesting我的生产JavaScript与minifcation。 它工作正常unminified,但是当我添加-p标志: NODE_ENV=production ./node_modules/webpack/bin/webpack.js -p –progress –colors 我收到警告,并有JavaScript错误。 出现它正在删除它不应该的东西。 无法弄清楚为什么。 警告: WARNING in client.js from UglifyJs Side effects in initialization of unused variable React [./~/fluxible/lib/Fluxible.js:12,0] Dropping unused function $$$enumerator$$makeSettledResult [./~/fluxible/~/es6-promise/dist/es6-promise.js:361,0] Side effects in initialization of unused variable $$utils$$now [./~/fluxible/~/es6-promise/dist/es6-promise.js:35,0] Side effects in initialization of unused variable $$utils$$o_create [./~/fluxible/~/es6-promise/dist/es6-promise.js:38,0] Dropping unused variable internals [./~/react-router/~/qs/lib/utils.js:6,0] Dropping side-effect-free […]

login到节点控制台或在webpack构build期间进行debugging

在webpack构build过程中debugging的最佳做法是什么? 入口脚本中的任何console.log都不会输出到节点控制台。

如何自动testing我的webpack捆绑网站对付FUOC?

我已经构build了一个与webpack捆绑在一起的React + Redux Web。 由于绑定错误,我的网站开始显示FUOC行为(有些组件没有将其CSS注入到服务器响应中,因此在加载最终的CSS之前,应用程序的未被devise的部分会“闪现”)。 其他错误包括第三方组件的FUOC(这需要手动工作)。 我有自动testing的服务器和我的networking的不同部分。 但是,如何自动testingFOUC(使用我的node.js工具链)呢? 我想到selenium和幻影,但这似乎是一个矫枉过正,我仍然不知道如何能够发现它。

找不到“节点”的types定义文件

更新angular,webpack和typescript后,我得到奇怪的错误。 任何想法,我可能会错过? 当我用npm开始运行应用程序时,我得到以下错误: [at-loader] Cannot find type definition file for 'hammerjs'. [at-loader] Cannot find type definition file for 'node'. [at-loader] src\app\app.component.ts:26:14 Cannot find name 'require'. [at-loader] src\app\app.component.ts:30:15 Cannot find name 'require'. 这里是依赖关系: "dependencies": { "@angular/common": "2.4.4", "@angular/compiler": "2.4.4", "@angular/core": "2.4.4", "@angular/forms": "2.4.4", "@angular/http": "2.4.4", "@angular/material": "2.0.0-beta.1", "@angular/platform-browser": "2.4.4", "@angular/platform-browser-dynamic": "2.4.4", "@angular/platform-server": "2.4.4", "@angular/router": "3.4.4", "@angularclass/conventions-loader": […]