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是什么？