Tag: webpack

用html-webpack-plugin在开发模式下在webpack中构buildHTML

我正尝试使用html-webpack-plugin使用index.ejs构build单独的HTML文件。 我的index.ejs有以下代码块。 <% if (process.env.NODE_ENV === 'production') { %> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script> <% } %> 我只想在生产中加载这些脚本。 在我的webpack文件中，我正在加载HtmlWebpackPlugin来指定ejs模板的位置。 plugins: [ new HtmlWebpackPlugin({ template: 'index.ejs' }), … 当我在生产模式下使用–env.prod运行webpack时，它将把文件正确地构build到我的public目录中。 但是，当我运行–env.dev ，这个插件不运行。 我如何在开发模式下运行HtmlWebpackPlugin来构build特定于我的开发环境的HTML文件？

尝试创buildReact应用程序时，请使用networking包问题

我试图运行React应用程序，下面一个教程， https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm ，但我有一些问题运行反应的应用程序。 更准确地说，当我inputnpm start时，请find下面的错误 npm ERR! Linux 4.4.0-62-generic npm ERR! argv "/usr/local/bin/node" "/usr/bin/npm" "start" npm ERR! node v7.4.0 npm ERR! npm v4.2.0 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! reactapp@1.0.0 start: `webpack-dev-server –port 7000 –hot` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the reactapp@1.0.0 start script 'webpack-dev-server […]

Webpack @ font-face相对path问题

我有一个在angular2应用程序中使用相对path加载字体的问题。 在app.ts我有这两个import import '../../../public/css/fonts.less'; import '../../../public/css/main.less'; 在字体里面我有@ font-face声明： @font-face { font-family: 'Montserrat'; src: url('/public/fonts/Montserrat/Montserrat-Regular.eot'); /* IE9 Compat Modes */ src: url('/public/fonts/Montserrat/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/public/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/public/fonts/Montserrat/Montserrat-Regular.svg#Montserrat-Regular') format('svg'); /* Legacy iOS */ font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } 这工作正常。 但是，如果我试图改变相对的path，例如 url('../../fonts/Montserrat/Montserrat-Regular.eot'); 我得到这个错误： 错误：./~/css-loader!./~/less-loader!./public/css/fonts.less模块​​未find：错误：无法parsing“文件”或“目录”../fonts/Montserrat/Montserrat -Regular.eot in [./~/css-loader!./~/less-loader!./public/css/fonts.less 6：85-138 ERROR […]

debugging与WebPack捆绑在一起的Visual Studio中的JavaScript代码

我是JS开发新手，在Visual Studio 2013中debuggingJS代码遇到问题。我们的Web应用程序的JS部分被WebPack捆绑到一个app.bundle.js文件中，每当任何js文件发生更改时，都会自动更新这个文件（我们使用特殊的手表脚本，使用npm）。 我能够使用Chrome和debugger;来debuggingJS代码debugger; derecitve。 它显示正确的映射文件在这种types的path“webpack：///./Scripts/”。 这意味着WebPack会正确地创build映射。 但是我想直接从VS调用使用调用堆栈，断点等。 有任何想法吗？ 提前致谢！

Webpack“解决”function是否可以解决AMD样式的path定义？

我想在这里得到一个非常简单的概念validation…我有一个使用AMD的js库，但是我需要依赖来parsingnode_modules。 所以我有以下几点： webpack.config.js module.exports = { entry: "./resources/content/scripts/twitter_module", output: { path: path.join(__dirname, "build"), filename: "out.js", }, resolve: { root: __dirname, modulesDirectories: [ path.join(__dirname, "node_modules") ] } }; 这是我从webpack得到的输出： Hash: bab530b56faec6755978 Version: webpack 1.8.2 Time: 49ms Asset Size Chunks Chunk Names out.js 8.6 kB 0 [emitted] main [0] ./resources/content/scripts/twitter_module.js 6.44 kB {0} [built] [3 errors] ERROR […]

当运行webpack时，在我的webpack.config.js中，process.env的所有值都被设置为undefined

我试图设置一个webpack.config.js检测webpack.config.js的值，然后根据该值缩小输出（或不）。 它总是输出缩小的版本，所以我运行node-debug webpack看看发生了什么事情。 在webpack.config.js ， process.env被定义为具有一堆值的Object ，但是所有列出的属性都是undefined ，并且NODE_ENV甚至不是process.env的值之一。 想法？ 一点上下文 我创build了一个批处理脚本来运行两个webpack实例来同时创build.js和.min.js文件： set NODE_ENV=development start webpack -c –progress -w set NODE_ENV=production start webpack -c –progress -w 但是，要debugging它，我只需要运行单独的命令： set NODE_ENV=development node-debug webpack -c –progress 谢谢！

request-promise不能被webpacked

所以我试图在客户端使用request-promise，并尝试使用webpack打包，但由于某些文件模块fs ，它不能打包到客户端。 有没有人偶然发现同样的问题并解决？ 这是编译输出 ERROR in ./~/request-promise/~/request/lib/har.js Module not found: Error: Cannot resolve module 'fs' in /node_modules/request-promise/node_modules/request/lib @ ./~/request-promise/~/request/lib/har.js 3:9-22 ERROR in ./~/request-promise/~/request/~/forever-agent/index.js Module not found: Error: Cannot resolve module 'net' in /node_modules/request-promise/node_modules/request/node_modules/forever-agent @ ./~/request-promise/~/request/~/forever-agent/index.js 6:10-24 ERROR in ./~/request-promise/~/request/~/forever-agent/index.js Module not found: Error: Cannot resolve module 'tls' in /node_modules/request-promise/node_modules/request/node_modules/forever-agent @ ./~/request-promise/~/request/~/forever-agent/index.js 7:10-24 ERROR in ./~/request-promise/~/request/~/tough-cookie/lib/cookie.js […]

Webpack + Sails多页面应用程序

关于使用webpack分割代码的问题我有3个不同页面的multipage sails 网站 第一页包含jquery，bootstrap，modernizr和时刻 第二页包含jquery和bootstrap 第三页包含jquery，bootstrap和时刻 如果我使用CommonsChunkPlugin它获取jquery和bootstrap在单独的模块，所以我期望在第一页我需要加载相关的第一页（普通+第一页），第二页只有普通脚本和第三页脚本有关第三页（共同+第三） 第一页和第三页工作正常，但在第二页上，我无法打开模式窗口来改变语言（如果你运行应用程序，右上angular窗口） 问题： 1）如何在第二页上运行引导程序js，以允许打开模式窗口 2）如何在每个页面上实现延迟加载，显然我不需要在页面加载时引导，它可以等待一段时间，而用户不会按更改语言链接 3）为什么我不能使用最新modernizr，如果我从bower.json中删除它，并运行bower i modernizr –save它将更新modernizr 3.0，但webpack无法find它 运行应用程序，克隆它，全局设置grunt并运行npm i命令，它将在localhost上启动应用程序：1337

Webpack捆绑的文件没有定义“要求”

我正在使用networking包捆绑一些js＆jsx文件加载到浏览器。 所有运行良好，但浏览器打开它的那一刻它logging一个错误ReferenceError: Can't find variable: require 。 我目前的configuration如下： var path = require('path'); var fs = require('fs'); var nodeModules = {}; fs.readdirSync('node_modules') .filter(function (x) { return ['.bin'].indexOf(x) === -1; }) .forEach(function (mod) { nodeModules[mod] = 'commonjs ' + mod; }); module.exports = [ { name: 'server', target: 'node', context: path.join(__dirname, 'src', 'cloud'), entry: ['babel-polyfill', './app.js'], output: […]

在使用babel cli从命令行进行编译时，您可以使用.babelrc文件吗？

我有一个反应组件，我希望发布到NPM。 我使用以下命令将es2015 src编译为es5 lib babel src –out-dir lib 我在我的模块中有以下.babelrc文件，但我想知道是否在cli上运行上面的脚本将拿起巴贝尔预设？ { "presets": ["es2015", "stage-0", "react"] }