Articles of webpack

Webpack CSS加载程序 – 模块未find:错误:无法parsing模块“文件”

尝试使用CSS-Loader时遇到此错误… Module not found: Error: Cannot resolve module 'file' 这是怎么回事?

有没有办法可以改变这里显示的任何文件与webpack部署?

什么来了? (1)短背景。 (2)问题。 (3)细节(简短;文件清单足够长,以显示相关信息)。 (4)再次提问。 简短的背景 :我想用webpack部署我的网站。 webpack正在寻找style-loader和css-loader在错误的目录中,所以我的构build没有完成。 题 有没有办法可以改变这里显示的任何文件与webpack部署? 详情 环境 Windows 10 Home-64,最新版本/东芝Satellite A6 节点v6.2.0 / webpack v1.13.2 相关的文件和目录结构 C:\Dev\example\example.js C:\Dev\example\bluebird.js C:\Dev\example\jquery.js C:\Dev\example\img\image1.jpg C:\Dev\example\img\image2.jpg C:\Dev\example\img\svg1.svg C:\Dev\example\built\package.json C:\Dev\example\built\webpack.config.js C:\Dev\example\built\index1.html C:\Dev\example\built\index2.html C:\Dev\example\built\example.bundle.js C:\Dev\example\built\[hash1].jpg C:\Dev\example\built\[hash2].jpg C:\Dev\example\built\[hash3].svg C:\Dev\node-modules\webpack C:\Dev\node-modules\css-loader C:\Dev\node-modules\file-loader C:\Dev\node-modules\html-loader C:\Dev\node-modules\style-loader C:\Dev\node-modules\uglify-js C:\Dev\node-modules\url-loader C:\开发\例子\build立\的package.json { "name": "example", "version": "0.0.1", "description": "example", "main": "example.bundle.js", "author": "Bald Eagle" […]

使用webpack-manifest-plugin得到错误'Uncaught SyntaxError:Unexpected token <'

我昨天发现了webpack-manifest-plugin,并在本教程开始使用它。 当我在浏览器上打开我的应用程序时,它显示Uncaught SyntaxError: Unexpected token < 。 该应用程序正在加载正确的散列。 错误指向<!DOCTYPE html> 。 以下是我的webpackconfiguration: 'use strict' var webpack = require('webpack'); var path = require('path'); var extractTextWebpackPlugin = require('extract-text-webpack-plugin'); var webpackManifestPlugin = require('webpack-manifest-plugin'); var autoprefixer = require('autoprefixer'); module.exports = { devtool: 'cheap-module-eval-source-map', entry: [ './modules/index.js' ], output: { path: path.join(__dirname, 'public/build'), filename: 'bundle.[hash].js' }, module: { noParse: [ […]

我怎样才能解决`错误:无法find绑定文件.`使用`node-ffi`时?

一些细节: Mac OSX 10.11.6 节点v6.5.0 npm v3.10.3 nvm v0.29.0 我最近build立了一个使用ffi与共享C库交互的npm包。 这个软件包完全可以自己完成(使用babel构build)。 我试图将其整合到一个概念validation应用程序中,并遇到了很多 bindings问题。 我正在使用webpack捆绑我的POC应用程序,这就是我遇到这个问题的地方。 这是我的webpack.config.js : /* eslint-disable */ var webpack = require('webpack'); var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var buildPath = path.resolve(__dirname, 'wp-build/'); module.exports = [ { name: 'frontend', entry: './src/frontend/index.js', output: { path: buildPath, filename: 'frontend.bundle.js', }, module: { loaders: [{ […]

反应内联样式错误

内联风格的大爱好者,并决定试一试。 我慢慢地掌握了它,但我现在卡住了,因为我不断收到“<img>标签上的未知道具styles ”错误。 我的代码如下所示: render(){ let imgUrl = 'http://img.nodejscore.com/javascript/0006.jpg'; let divStyles = { backgroundImage:'url(" + imgUrl + ")', backgroundSize: 'cover' }; return( <main class="cf w-100"> <div class="fl w-50 w-third-m w-25-ns"> <div class="aspect-ratio aspect-ratio–1×1"> <img styles="{{divStyles}}" class="db bg-center cover aspect-ratio–object" /> </div> </div> </main> ) } 简单的东西总是给我最多的问题。 任何帮助,将不胜感激。

如何多次使用webpack包含babel-polyfill?

目前我有两个不同的NPM组件将被webpacked,他们都在他们的webpack入口点babel-polyfill polyfill。 现在捆绑后,我有两个不同的捆绑文件,但要求他们在同一个文件中会发生“babel-polyfill应该只需要一次”的错误。 我错过了什么,或者有没有办法解决这个问题?

在VSTS / TFS中运行webpack,找不到webpack

在VSTS的构build过程中,我运行npm install -g webpack然后将npm install webpack与工作目录设置为网站项目目录(project.json和其他主文件所在的目录,而不是解决scheme目录)。 然后我在命令行任务中运行where webpack 或Get-Command -CommandType Application -ErrorAction SilentlyContinue -Name webpack | Select-Object -ExpandProperty Definition | echo Get-Command -CommandType Application -ErrorAction SilentlyContinue -Name webpack | Select-Object -ExpandProperty Definition | echo 在PowerShell任务Get-Command -CommandType Application -ErrorAction SilentlyContinue -Name webpack | Select-Object -ExpandProperty Definition | echo 他们都只返回空string。 所以显然webpack -p作为下一个命令只返回“not found”types的响应。 The term 'webpack' is […]

使用HtmlPlugin从一个子目录为webpack构build资源

我目前使用WebpackHtmlPlugin来简化我的index.html入口点,但是我的主要问题是index.html与所有其他资源(即publicPath所指向的任何地方)处于同一级别。 我想有一个文件夹中提供的index.html和webpack在子文件夹中生成的所有资产。 像这样的东西 index.html build/ bundle.js 1.bundle.js 2.bundle.js 有没有什么办法可以达到这个目的,而不会违背webpack手动映射每个资产,并将publicPath设置为root?

从webpack中剥离dynamic需求

我有一个类似这样的代码: export default { something: true, mockData: process.env.USE_MOCK && require('./mocks/something.js').default }; process.env.USE_MOCK用webpack.DefinePlugin设置为true或false 。 我用这个来启动我的应用程序,使用USE_MOCK=true npm run dev或npm run dev来运行模拟数据。 我希望Webpack在UglifyJS的死代码删除的构build过程中删除这些dynamic需求,但我注意到他们仍然在那里,所以something.js将在构build的捆绑。 在我的情况下,输出类似于: module.exports = { something: true, mockData: (false) && __webpack_require__(181).default }; 有没有办法如何从包中完全删除导入? 顺便说一句。 我认为这样的工作: let mockData; if (process.env.USE_MOCK) { mockData = require('./mocks/something.js').default; } export default { something: true, mockData }; 我宁愿内联要求,因为我已经有了这种模式不less。

在React文件中包含NPM模块:Webpack无法parsing

根据我在这里和这里阅读的内容,将反应模块发布到NPM,然后在另一个项目中使用它,而组件本身位于node_modules导向器中的方式应该如下所示 写一个模块,然后导出它 package.json本名填写package.json的main属性,在我的例子中是dist/index.js npm install从你想要包含它的项目npm install它 从服务器静态地提供脚本。 我有看起来像这样的服务于js文件的东西: app.use('public/componentA', express.static(path.join('node_modules', 'componentA')); 这不是完全真实的代码,但它的工作原理,如果我加载它,我可以在浏览器中看到JS。 需要组件 index.js var React = require('react'); var Component = require('../public/componentA/'); var hook = document.getElementById('hook'); React.render(Component, hook); 但是,当我尝试webpack这个我得到的错误 ./lib/index.js中的错误找不到模块:错误:无法parsing/ Users / me / Documents / tests / reactcomponenttest / lib目录中的“./public/componentA” 这是什么阻止我使用我的模块? 我认为public目录除了特定的端口以外不可用。 如果是这种情况,我们如何使用第二个链接中的节点usebuild议?