Tag: webpack

Webpack – extract-text-webpack-plugin无法find模块

webpack.config.js var ExtractTextPlugin = require("extract-text-webpack-plugin"); 我马上收到这个错误，如果我只是实现插件： module.js:339 throw err; ^ Error: Cannot find module 'webpack/lib/ConcatSource' at Function.Module._resolveFilename (module.js:337:15) at Function.Module._load (module.js:287:25) at Module.require (module.js:366:17) at require (module.js:385:17) at Object.<anonymous> (/Users/lucamormile/Documents/Lavori/Webapps/React/webpack_test/node_modules/extract-text-webpack-plugin/index.js:5:20) at Module._compile (module.js:425:26) at Object.Module._extensions..js (module.js:432:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:311:12) at Module.require (module.js:366:17) 我忘了什么

带有旁路代理的Webpack-dev-server

如何使用webpack-dev-server实现“代理”（类似于grunt-connect-proxy ）选项？ 我正在使用Grunt使用webpack和webpack-dev-server 。 Gruntfile.js中的一个任务（下面的代码）能够在端口8080上启动服务器。我想为所有后端数据请求（上下文URL / ajax / *）添加代理设置。 "webpack-dev-server": { options: { webpack: webpackConfig, publicPath: "/src/assets" }, start: { keepAlive: true, watch: true } }

将webpack与现有的PHP和JS项目一起使用

我有一个现有的PHP项目与jQuery和引导，不使用任何前端框架。 我正在尝试使用webpack模块打包器来为我的项目资源创build一个入口点，使用节点js包pipe理器来pipe理js依赖关系，运行任务以缩小js css，图像重新大小等等。 并提高加载单个页面所需的浏览器加载时间。 我遇到了webpack的教程，并得到安装它，并安装其开发服务器，但问题是，我不能够了解如何将我所有的当前js脚本和CSS链接在项目中（我有很多用于在项目中提供多个function的jquery和CSS库）使用webpack。 我是否必须以适合webpack的方式来重写所有的JS和CSS文件？ 我如何成功迁移？ 另外，我无法在webpack dev-server上运行我的当前php应用程序，它是否意味着首先在那里运行？ 同时只列出项目的目录。 我创build了一个testingindex.js文件，并使用下面的webpackconfiguration： var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ './public/js/index.js', 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080' ], plugins: [ new webpack.HotModuleReplacementPlugin() ], output: { path: path.join(__dirname, "public/dist/js"), publicPath : "http://localhost:8080/my_proj/public/dist/js", filename: "bundle.js" } }; 我添加bundle.js到我的脚本加载只是为了testing，如下所示，希望应用程序将在webpack开发服务器上运行： <script type="text/javascript" src="public/dist/js/bundle.js"></script> <script type="text/javascript" src="public/js/jquery.min.js"></script> <script type="text/javascript" src="public/js/jquery.migrate.js"></script> […]

构build生产webpack – 缩小依赖关系

说npm上有一个名为“awesomepackage”的模块。 我可以通过package.json注册为我的应用程序的依赖项，如下所示： npm i –save awesomepackage 检查我的node_modules文件夹我看到一个名为“awesomepackage”的文件夹，如下所示： – index.js – package.json – README.md – lib/ – awesomepackage.min.js 我可以在我自己的应用程序中使用这样的包： import {AwesomeThing} from 'awesomepackage'; 我的问题： 当我使用webpack构build我的应用程序时，我的最终bundle.js总是包含来自node_modules/awesomepackage/index.js的源代码 – 无论我设置了什么环境variables（例如NODE_ENV=production ）。 如果它们作为NPM包的一部分发货，是否有任何方法可以告诉webpack使用预先构build的文件（例如node_modules/awesomepackage/lib/awesomepackage.min.js ），而不是从源代码重新构build？ 我已经看到在webpackconfiguration中使用resolve.alias和noParse解决scheme， 使用硬编码path来缩小源文件，但是这并不能达到使用npm和webpack的目的？ 我不希望硬编码和维护path到每个依赖的缩小构build文件！ 我来到这里是因为我的bundle.js跳过了2.5MB，当我添加了moment.js – 这是167kb的缩小，包括所有的语言环境，但源代码包括2MB的testing。 编辑 显然还有更多的不仅仅是最后的最终bundle.js文件。 例如：为什么有人希望在最终生产代码中包含数百个不必要的依赖关系的unit testing？ 他们没有。 这就是为什么大多数图书馆都提供dist （或类似）文件夹作为其npm模块的一部分。

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

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

Webpack错误 – 无法parsing文件或目录

当npm启动我的webpack-dev-server时出现这个错误： ERROR in multi main Module not found: Error: Cannot resolve 'file' or 'directory' /var/www/html/151208-DressingAphrodite/app in /var/www/html/151208-DressingAphrodite @ multi main 这是我的webpack.config.js： var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require ('html-webpack-plugin'); const PATHS = { app: path.join (__dirname, 'app'), build : path.join (__dirname, 'build') }; module.exports = { entry : [ 'babel-polyfill', […]

webpack – require（'node_modules / leaflet / leaflet.css'）

所以我正在尝试使用webpack和leaflet构build一个地图应用程序。 我可以从我的map.js文件中需要leaflet.js ，但是我不能调用leaflet.css而不会收到错误。 我目前的webpack.config.js看起来像： 'use strict' var webpack = require('webpack'), path = require('path'), HtmlWebpackPlugin = require('html-webpack-plugin'), srcPath = path.join(__dirname, 'src'); module.exports = { target: "web", cache: true, entry: { app: path.join(srcPath, "index.js") }, resolve: { alais: { leaflet_css: __dirname + "/node_modules/leaflet/dist/leaflet.css" } }, module: { loaders: [ {test: /\.js?$/, exclude: /node_modules/, loader: "babel-loader"}, {test: /\.scss?$/, […]

webpack将代码捆绑到node.js

我使用webpack捆绑客户端，并希望将其用于构buildnode / npm库。 我看到我可以指定目标作为此node 。 从文档中 ， "node" Compile for usage in a node.js-like environment (use require to load chunks) 但是问题是react.js被捆绑在编译输出中。 我只想包含我的源文件和package.json列出的任何依赖项。 我已经指定了像peerDependency一样的反应 "peerDependencies": { "react": ">=0.13", "react-tap-event-plugin": ">=0.1.3" }, 我也尝试在externals期望定义反应，它可能只是创造符号而不包括图书馆本身，但它仍然包括react编译输出的react 。 target: "node", externals: [{ 'react' : 'React', }] 那么，有没有办法使用webpack捆绑服务器端/节点代码，而且还要指定不绑定一些依赖关系（可能被定义为peerDependencies或devDependencies ）？

如何在webpack中填充tinymce？

我试图让webpack认可tinymce 。 它在window上设置了一个名为tinymce的属性，所以显然有一个select是使用这样的语法来require()它（在webpack文档的EXPORTING 部分的底部描述）： require("imports?window=>{}!exports?window.XModule!./file.js 但在这个例子中，./ ./file.js是./file.js解决的？ 我通过npm安装了tinymce，我不知道如何指定tinymce.js文件的正确path。 无论如何，我宁愿在我的configuration中处理这个，只要可能就require('tinymce') ，所以我已经安装了exports-loader并在configuration中添加了以下内容（基于这个讨论 ）： module: { loaders: [ { test: /[\/]tinymce\.js$/, loader: 'exports?tinymce' } ] } 不幸的是，这是行不通的。 我的configuration有什么问题？

Symlinking与npm链接反应模块为本地开发提供了错误

在我的React npm模块的开发过程中，我将它与npm link 。 完成此操作后，程序包会正确链接，并显示在消费者应用程序node_modules 。 该模块公开一个接口来创build一个React组件。 因为我正在使用React ， jsx和es2015 ，所以我使用babel在预发布阶段使用npm prepublish hook来传输我的模块代码。 但是，当我尝试使用webpack构build我的消费者应用程序时（即，在链接它之后），在我的包中出现错误，指出： 模块构build失败：错误：无法find预设“es2015” 现在有趣的是，如果我在npm上发布软件包，那么npm install从我的消费者应用程序的registry中npm install ，构build它，一切工作正常。 我尝试在我的消费者应用程序中安装babel-preset-es2015 ，但是却开始抱怨没有findbabel ： 找不到模块：错误：无法parsing模块'babel' 再次，如果我从npmregistry安装它一切正常，在构build过程中不会引发错误。 我也尝试安装babel-core ， babel-cli和babel-polyfill ，都无济于事。 我在任何地方都使用babel v6.1.x ，并意识到所有最近的变化，但是我想我错过了一些明显的东西，如果有人能够帮助我，我会很感激它，因为不断发布模块来testing东西的作品只是不好的做法。 为了完整起见，这里是代码： 模 消费者应用 以下是链接模块的步骤： cd ~/Sites/me/react-leafbox npm link cd ~/Sites/me/mapp npm link react-leafbox npm start build筑后堆积痕迹： ERROR in ../react-leafbox/lib/index.js Module build failed: Error: Couldn't […]