Articles of webpack dev server

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: […]

在Angular2 + Webpack中使用templateUrl的相对path

import {Component} from 'angular2/core'; @Component({ selector: 'app', styleUrls: ['./app.component.less'], templateUrl: './app.component.html' }) export class AppComponent { name:string = 'Demo' } 当使用templateUrl和styleUrls的相对path时,我得到:错误404,找不到文件: zone.js:101 GET http://localhost/app.component.html 404(Not Found) 代码: https : //github.com/Dreampie/angular2-demo 我觉得这是不好的devise,因为在不同的情况下可能会build立目录不一样,我可以把它改成相对的当前path吗? raw-loader可以解决这个问题,但是html-loader , less-loader不能用于template , styles ,它只能在string工作,所以为什么不把它们支撑起来呢? import {Component} from 'angular2/core'; @Component({ selector: 'app', styles: [require('./app.component.less')], template: require('./app.component.html') }) export class AppComponent { name:string = […]

webpack-dev-server无法find模块'webpack'

我试图使用webpack-dev-server来运行一个简单的程序,但我得到这个错误: module.js:471 throw err; ^ Error: Cannot find module 'webpack' at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load (module.js:417:25) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.<anonymous> at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) 我用下面的npm命令安装了webpack npm install –save-dev webpack 我有以下configuration: (webpack.config.js) var webpack = require('webpack'); var path = require('path'); var […]

让webpack热点更新在我的同构web应用程序中正常工作

我正在创build一个节点/expression后端和反应前端的Web应用程序。 我(我想)大部分已经启动并运行了,但让浏览器执行热点刷新的最后一步并不像预期的那样工作。 我会尽力在这里发布所有相关的设置。 请让我知道,如果你需要别的什么来找出我犯了什么错误: 我用node ./server/index.js启动我的应用程序 webpack.config.js var path = require('path'); var webpack = require('webpack'); let webpackConfig = { name: 'server', output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/dist/', }, resolve: { extensions: [ '', '.js', '.jsx', '.json' ] }, module: { loaders: [ { test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/, query:{ presets: ['es2015', […]

Webpack重新编译未更改的文件,从而减慢构build时间

相关的webpack / webpack的问题。 根据我的经验,在实际项目中使用webpack会减慢一定数量的组件和/或依赖项。 我有一个testing存储库 ,试图用下面的应用程序来演示这个: 入口点是A.js ,它需要B.js和C.js B.js很小,没有太多的依赖关系。 C.js是单一的,有成千上万的需求。 我的期望是,当在testing项目中使用webpack-dev-server时,每当我保存B.js ,webpack应该认识到C.js并没有触及它的依赖关系。 它应该快速地(<10ms)编译B.js ,replace它在caching中,并从初始编译中使用A.js的caching版本输出编译后的A.js 但是,每次保存B.js时,webpack都会编译3002隐藏模块,导致编译时间为960ms 。 这本身并不坏,但如果你添加一些像react-hot和babel这样的装载机, react-hot失去控制。 我有一个解决scheme:在同一个testing项目有一个dll分支。 在那个分支上,你可以运行webpack –config webpack.dll.config.js来生成B.js和C.js两个DLL, B.js DLL在编译A.js时候会被A.js 。 之后,当使用webpack-dev-server ,每当你保存B.js ,它的DLL就会被重新编译, A.js会注意到它的一个DLL已经更新了,它只会把C.js的旧DLL和B.js新DLL,并将它们合并成一个快乐的快乐包。 我可以进一步在这个分支上做目录读取或依赖图走,为每个组件生成一个DLL,这个方法可能被应用到每个webpack项目。 这在理论上应该尽可能快地编译。 但在这一点上,在我看来,我将重新实现(糟糕的)webpack中的caching层应该做什么,所以这里发生了什么?

在webpack包中运行Webpack Dev Server

我有一个用Express运行的节点服务器的webpackconfiguration。 如果在生产环境中的条目文件运行Express服务器,如果在开发中也运行Express服务器和Webpack Dev服务器。 问题出在webpack dev服务器初始化的时候; 它抱怨Unhandled rejection Error: invalid argument或找不到path。 webpack dev服务器中使用的客户端configuration在通过CLI自行使用时运行良好,当webpackdevserver在常规(非捆绑)文件中初始化时,它也可以使用。 与每种方法的不同之处在于,从configuration中打印的path在工作的情况和不工作的情况之间是不同的。 这些path是从不同的__dirnameparsing的。 为什么可以这样做,是否有可能获得正常的__dirnamepath? 提前致谢。 服务器configuration: { target: 'node', entry: rootDirectory, externals: nodeModules,//readDirSync('node_modules').filter(x => x !== '.bin'), output: { path: join(rootDirectory, 'build'), filename: 'index.js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel' } ] }, plugins: [ new DefinePlugin({ 'process.env': […]

Typescript + webpack(带有热重载)+ NodeJS

面对问题 – build立基于TypeScript的项目原型。 它包含客户端脚本和服务器部分(带有ExpressJ的NodeJs)。 我想有一个打包机的webpack,并使用热重新加载function,以查看飞行中的变化。 最初,我使用了react-transform-b​​oilerplate-ts ,但那里的问题 – 开发服务器的入口点是js文件。 我想这应该是ts,因为我想包括我的快速configuration等。 那么,有没有人有好的样板(遵循项目结构的最佳实践)来创build包含以下内容的项目: 客户端(React)和服务器(打字稿) 后端使用NodeJs和ExpressJs(打字稿) 客户端和服务器支持热重新加载(因为我明白最好的select – 是重新加载的webpack选项,而不是吞咽任务,运行观看)。 或者,也许你可以给我很好的build议,如何以适当的方式configuration这种东西。 非常感谢

WebPack源地图混淆(重复的文件)

我决定尝试一下我今天轮到的一个新项目WebPack,我从源代码中得到了非常奇怪的行为。 在文档中找不到任何关于它的内容,在浏览StackOverflow时也不能find其他人。 我目前正在查看由Vue-CLI的WebPack模板生成的HelloWorld应用程序 – 没有对代码,构build环境或其他任何内容进行更改。 我安装了一切,像这样运行: vue init webpack test && cd test && npm install && npm run dev 看看我的源代码,我看到以下内容: 这是一个混乱。 为什么有三个版本的HelloWorld.vue和App.vue ? 更糟糕的是,每个版本都有一个稍微不同的代码版本,没有一个匹配原始源代码。 坐在根目录下的HellowWorld.vue与原始的源代码相匹配,但它在那里做什么,而不是在./src/components文件夹中? 最后,为什么没有第四个App.vue有它的原始来源? 据我所知,这可能与WebPack装载机有关。 不过,我从来没有得到任何其他打包机的这类问题。 以下是使用Browserify Vue-CLI模板完全相同步骤的示例: 没有webpack:// schema,每个文件只有一个副本,这些文件实际上包含了原始的源代码 (对于源地图很重要),没有意外的(webpack)/buildin或者(webpack)-hot-middleware ,没有. 子目录,….只是源代码。

使用Webpack dev服务器和PHP应用程序

有没有人在Laravel 5+上安装webpack开发服务器 (在我的情况下是5.1)? 我将使用我的laravel PHP后端与ReactJS前端,我想在我的开发环境有webpack开发服务器。 但我很困惑与NodeJS中的很多configuration(我专门在PHP后端)。 是否可以将webpack dev服务器与PHP应用程序结合起来? 我想我的env工作两种方式:在我的apache服务器(用于后端debugging/开发)和NodeJS服务器(用于前端debugging/开发)。 我需要有一些中间件,解决webpack的特定端口? 一般NodeJS服务器如何加载我的PHP脚本? …或Apache Web服务器将加载页面比NodeJS将推送通知到前端?

我可以添加cookie到webpack dev服务器代理吗?

我正在尝试在我的webpack dev服务器中设置一个代理。 问题是我不控制我连接的服务器,我需要validation请求。 有没有办法,我可以添加cookie到我发送到代理服务器的请求? 我已经浏览了webpack dev服务器代理服务器页面 ,以及它链接到的node-http-proxy页面,而且我没有看到任何提及的cookie。 我也不确定是否有办法让我看到这些转发的请求,所以我不知道我正在尝试什么是做任何事情。 有任何想法吗?