Tag: Webpack

使用extract-text-webpack-plugin React时,窗口未定义错误

我正在使用webpack来构build我的反应组件,我试图使用extract-text-webpack-plugin来从我生成的js文件中分离出我的css。 但是,当我尝试构build组件时出现以下错误: Module build failed: ReferenceError: window is not defined 。 我的webpack.config.js文件如下所示: var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: { MainComponent: './src/main.js' }, output: { libraryTarget: 'var', library: 'MainComponent', path: './build', filename: '[name].js' }, module: { loaders: [{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader!css-loader') }] }, plugins: [ new ExtractTextPlugin('styles.css') ] }

如何使用prefetchPlugin&分析工具来优化webpack的构build时间?

以前的研究: 正如webpack的wiki所说,可以使用分析工具来优化构build性能: 来自: https : //github.com/webpack/docs/wiki/build-performance#hints-from-build-stats 来自构build统计的提示 有一个可视化你的构build的分析工具 ,也提供了一些提示如何优化构build大小和构build性能 。 您可以通过运行webpack –profile –json> stats.json来生成所需的JSON文件 我生成的统计文件( 在这里可用 )上传到webpack的分析工具 并在提示标签下,我告诉使用prefetchPlugin: 来自: http : //webpack.github.io/analyse/#hints 长模块构build链 使用预取增加构build性能。 从链的中间预取一个模块。 我在里面挖了一个网页,find在prefechPlugin上可用的唯一文档是这样的: 来自: https : //webpack.github.io/docs/list-of-plugins.html#prefetchplugin PrefetchPlugin new webpack.PrefetchPlugin([context], request) 对正常模块的请求,即使在需要之前也会parsing和构build。 这可以提高性能。 尝试首先分析构build,以确定聪明的预取点 。 我的问题: 如何正确使用prefetchPlugin? 分析工具中使用的正确工作stream程是什么? 我如何知道prefetchPlugin是否工作? 我怎么测量它? 从链的中间预取模块意味着什么? 我会很欣赏一些例子 请帮助我使这个问题成为下一个想要使用prefechPlugin和Analyze工具的开发人员的宝贵资源。 谢谢。

如何使webpack dev服务器在端口80和0.0.0.0上运行以使其可公开访问?

我是新来的整个nodejs / reactjs世界,所以如果我的qs听起来很愚蠢,我很抱歉。 所以我在这里玩这个reactjs应用程序: https : //github.com/bebraw/reactabular 每当我做一个“npm开始”它总是运行在本地主机:8080 如何将其更改为在0.0.0.0:8080上运行以使其可公开访问? 我一直在尝试阅读上述回购的源代码,但没有find这个设置的文件。 还要补充一点 – 如果可以的话,如何让它在80端口上运行? 谢谢。

如何允许webpack-dev-server允许来自react-router的入口点

我正在创build一个应用程序,在开发中使用webpack-dev-server和react-router。 webpack-dev-server似乎是build立在假设你将在一个地方(即“/”)拥有一个公共入口点,而react-router允许无限量的入口点的。 我想要webpack-dev-server的好处,特别是热重载function,这对于提高生产效率非常有用,但我仍然希望能够加载在react-router中设置的路由。 一个人怎么能够一起工作呢? 你可以在webpack-dev-server的前面运行一个express服务器吗?

Chrome中的源代码仅包含一行,包括Ruby on Rails,Webpack和React JS

当我使用Chrome devtoolsdebugging器时,我遇到了使用inline-source-mapconfiguration设置由Webpack生成inline-source-mapclosures一行的问题。 Webpack是在Ruby on Rails应用程序中设置的,以生成由几十个模块组成的串联的,无约束的JavaScript文件。 大多数这些模块是ReactJS组件,并由jsx加载器进行分析。 Webpack的输出包含在application.js文件中,以及一些由gems生成的JavaScript库。 当我使用eval-source-map ,没有问题。 关于使用inline-source-map事情会导致行号被一个抛出。 检查不是React组件的JavaScript仍然有这个问题,所以我不认为这与使用jsx有关。

如何为Angular 2 + CLI项目添加font-awesome

我正在使用Angular 2+和Angular CLI。 如何添加字体真棒到我的项目?

什么“代码生成器优化了的样式,因为它超过了”100KB“的最大值”是什么意思?

我添加了一个新的npm包到我的项目,并需要在我的模块之一。 现在我从webpack得到这个消息, build modulesNote: The code generator has deoptimised the styling of "D:/path/to/project/node_modules/ramda/dist/ramda.js" as it exceeds the max of "100KB". 这是什么意思? 我需要采取一些行动吗?

Gulp + Webpack还是JUST Webpack?

我看到人们用webpack使用gulp。 但后来我读webpack可以取代吞咽? 我在这里完全困惑…可以解释一下吗? UPDATE 最后我开始大口喝水。 我是现代前端的新手,只是想快点起床跑步。 现在我已经有一年多的时间了,我已经准备好转移到webpack了。 我build议同样的路线开始在同一个鞋子的人。 不是说你不能尝试webpack,但只是说,如果看起来复杂,从一开始就大口喝…没有什么错。 如果你不想吞下去,是的,但是你也可以在你的package.json中指定一些命令,并从命令行中调用它们,而不需要任务运行器来启动和运行。 例如: "scripts": { "babel": "babel src -d build", "browserify": "browserify build/client/app.js -o dist/client/scripts/app.bundle.js", "build": "npm run clean && npm run babel && npm run prepare && npm run browserify", "clean": "rm -rf build && rm -rf dist", "copy:server": "cp build/server.js dist/server.js", "copy:index": "cp src/client/index.html dist/client/index.html", […]

Webpack.config如何将index.html复制到dist文件夹

我正试图自动进入/ dist的资产。 我有以下config.js: module.exports = { context: __dirname + "/lib", entry: { main: [ "./baa.ts" ] }, output: { path: __dirname + "/dist", filename: "foo.js" }, devtool: "source-map", module: { loaders: [ { test: /\.ts$/, loader: 'awesome-typescript-loader' }, { test: /\.css$/, loader: "style-loader!css-loader" } ] }, resolve: { // you can now require('file') instead of […]

Webpack的样式加载器与CSS的加载器

我有两个问题。 1) CSS装载机和样式装载机是两个webpack装载机。 我无法把握两者的区别。 为什么当他们都做同样的工作时,我必须使用两个装载机? 2)上面的Readme.md文件中提到的.useable.less和.useable.css是什么?