Tag: webpack

Webpack，开发中间件和静态文件

我有一个Web服务/ React / Redux项目与快递服务，我有一些麻烦理解他们如何融合在一起。 我的快车应用程序运行Webpack并提供我的根index.html文件，如下所示： const app = express(); const server = require("http").createServer(app); app.use(bodyParser.json()); app.use("/some/path", express.static(path.join(__dirname, "/public"))); // webpack middleware const compiler = webpack(webpackConfig); const webpackDevMid = require("webpack-dev-middleware"); const webpackHotMid = require("webpack-hot-middleware"); app.use(webpackDevMid(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath // '/static/' })); app.use(webpackHotMid(compiler)); app.get("/", (req, res) => { if (!req.cookies.access_token) return res.redirect("/login"); return res.sendFile(path.join(__dirname, "index.html")); }); […]

在Webpackconfiguration中parsing由插件加载的模块

下面的例子只有在some-module模块是Node模块的情况下才起作用，而对于Webpack插件所加载的模块则不起作用。 Webpack自己的逻辑（ enhanced-resolve ）如何被用来在config中parsing模块path？ 在我的情况下，这是bower-webpack-plugin ，但我想这应该以同样的方式与任何ResolverPlugin var BowerWebpackPlugin = require("bower-webpack-plugin"); module.exports = { … module: { plugins: [new BowerWebpackPlugin()], loaders: [ { // this won't work test: require.resolve("some-bower-module") loader: "imports?this=>window" } ] };

在webpack上，我应该怎么做“module.exports ='html_template_content'”

所以我想用webpack做一个非常简单的任务。 我有几个像例如静态的HTML模板 的test.html <div><span>template content</span></div> 我想要做的就是返回模板内的string，例如 require("raw!./test.html") 与应该返回一个string，如： "<div><span>template content</span></div>" 但相反，它返回以下string "modules.exports = <div><span>template content</span></div>" 我已经尝试了几个模块，比如raw-loader和html-loader。 而且它们的行为方式都是一样的。所以我查看了源代码，只是为了发现它的SUPPOSED行为是这样的。 那么，如果我只是想要原始的HTML，我到底想要做什么呢？ 删除前面的“module.exports =”string是不是一个坏习惯？ 从捆绑编辑：删除'modules.export ='部分结果束没有返回：/ 我的configuration module.exports = { module: { loaders: [ { test: /\.html$/, loader: "raw-loader" } ] } };

Webpack DefinePlugin不会将环境variables传递给节点服务器

Webpack的DefinePlugin不通过环境variables。 我正在使用Webpack v2.2.1 我的Webpack plugins块如下： plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify("development"), 'process.env.API_URL': JSON.stringify("test") }), new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin() ] server.js： console.log('env', process.env.NODE_ENV) // undefined console.log('url', process.env.API_URL); // undefined .babelrcconfiguration： {"presets": ["es2015", "stage-0", "react"]} 我已经调整了babel预设，将Webpack恢复为2.0.0，并且确实没有看到可能导致这些variables不被复制的原因。 如果我需要提供任何额外的信息或代码，lmk。 🙂

设置为生产模式时，Webpack Globalize生成失败：未提供格式化程序或parsing器

我正在研究一个React / Webpack / Globalize应用程序。 在开发模式中，事情是好的（尽pipeGlobalize坚持编译所有语言环境，而不是我select的语言环境，但这是另一个问题）。 但是，当我设置production: true在我的webpackconfiguration，运行npm run build时，我得到以下错误 > webpack –config webpack.prod.config.js /opt/app/ui/node_modules/globalize-webpack-plugin/GlobalizeCompilerHelper.js:72 throw e; ^ Error: No formatters or parsers has been provided 我的印象是全球化的webpack插件是为了处理预编译。 任何想法，为什么我看到这个错误？ 当我设定production: false东西编译好。 我的插件设置是： new GlobalizePlugin({ production: true, developmentLocale: "en", supportedLocales: [ "en"], output: "i18n/[locale].[hash].js" }), 当一个文件改变和webpack开发服务器重build，我收到很多这些消息，指出我不使用的区域设置的重新编译： [461] ./~/cldr-data/main/es-PY/dateFields.json 15 kB {0} [optional] [462] ./~/cldr-data/main/es-SV/dateFields.json 15 kB {0} […]

Webpack HMR抛出响应由于jsPDF造成的syntheticEvent错误

系统信息： OSX 10.12.4 Sierra Node v7.10.0 npm v4.2.0 浏览器已testing： Chrome 58.0.3029.110 Safari 10.1 Firefox 53.0 问题： 我有一个应用程序在我已经克隆的生产中有效地运行，并且正在尝试更新以准备构build续作。 但是，我已经遇到了一个奇怪的Webpack问题，通过更新它/ React / HMR到更新的版本。 HMR将连接，并且Webpack似乎编译得很好。 但是，与页面交互（如单击）会生成以下错误： 显然，该应用程序在这一点上不再起作用，因为点击事件不会引发任何事情。 有趣的是，我们在Node控制台和浏览器中也得到了以下404错误： （注：这似乎是一个巨大的查询string，包括函数，特别是引用syntheticEvent。如果你愿意，我可以打印整个东西） NODE v6.3.1 相关的NPMs： "react": "^15.5.4", "react-dom": "^15.5.4", "react-transform-catch-errors": "^1.0.0", "react-transform-hmr": "^1.0.4", "webpack": "^2.5.1", "webpack-dev-middleware": "^1.10.2", "webpack-hot-middleware": "^2.18.0" "babel-cli": "^6.11.4", "babel-core": "^6.24.1", "babel-eslint": "^7.2.1", "babel-loader": "^7.0.0", "babel-plugin-array-includes": "^2.0.0", "babel-plugin-transform-decorators-legacy": "^1.0.0", […]

Webpack2 node-libs-browser排除？

我已经升级到webpack 2，并在树摇动我的包大小增加之前。 当调查为什么我似乎有像bn.js和eliptic （node-libs-browser的一些依赖关系 – 它本身现在是webpack2的依赖项）的大文件。 有什么方法可以删除或排除它们吗？ 在webpack1中，他们没有被添加到我的包中。

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

错误：无法find相对于目录的预设“es2015”

当我尝试使用babel时出现以下错误。 错误：无法find相对于目录的预设“es2015” webpack.config.js module.exports = { entry: './main.js', ourput: { path:'./', filename:'index.js' }, devServer:{ inline:true, port:3333 }, module:{ loaders:[ { test:/\.js$/, exclude:/node_modules/, loader:'babel', query:{ presets:['es2015','react'] } } ] } } 的package.json { "name": "es6-react-setup", "version": "1.0.0", "main": "main.js", "dependencies": { "babel-core": "^6.11.4", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.11.1", "babel-loader": "^6.2.4", "react": "^15.2.1", "react-dom": "^15.2.1", "webpack": "^1.13.1" }, […]

找不到模块：错误：无法parsing模块'react-addons-test-utils'

我有一个ES6项目，我使用webpack将客户端代码转换为ES5。 该项目在客户端使用ReactJS，所以unit testing自然使用React TestUtils。 在最新的更新（0.14）中，React 改变了几个模块的导入方式 （包括TestUtils）。 我想更新，但我不知道如何使更改导入后unit testing工作。 当我尝试运行testing时，我收到以下消息： 04 12 2015 12:40:48.038:ERROR [karma]: { [Error: no such file or directory] code: 'ENOENT', errno: 34, message: 'no such file or directory', path: '/_karma_webpack_/public/test/main.js' } Error: no such file or directory at MemoryFileSystem.readFileSync (<project>/node_modules/karma-webpack/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:107:10) at MemoryFileSystem.readFile (<project>/node_modules/karma-webpack/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:297:21) at doRead (<project>/node_modules/karma-webpack/index.js:156:26) at Plugin.readFile (<project>/node_modules/karma-webpack/index.js:160:3) at doNTCallback0 […]