Questions tagged «webpack»

我一直在尝试找出如何通过React和Webpack动态添加图像。我在src / images下有一个图像文件夹， 在src / components / index下有一个组件。我正在将url-loader与以下配置用于webpack { test: /\.(png|jpg|)$/, loader: 'url-loader?limit=200000' } 在组件内，我知道可以在创建组件之前在文件顶部为特定图像添加require（image_path），但我想使该组件通用，并使其具有一个属性，该属性具有从中传递的图像的路径父组件。 我试过的是： <img src={require(this.props.img)} /> 对于实际属性，我尝试了几乎所有可以想到的从项目根目录，反应应用程序根目录以及组件本身到图像的路径。 文件系统 |-- src | ` app.js | `--images | ` image.jpg | ` image.jpg | `-- components | `parent_component.js | `child_component.js 父组件基本上只是一个容器，用于容纳子组件的倍数。 <ChildComponent img=data.img1 /> <ChildComponent img=data.img2 /> etc.... 有什么方法可以使用带有URL-loader的react和webpack来执行此操作，还是我走了一条错误的道路来实现这一目标？

76 reactjs  webpack  image-loading  urlloader 

尝试做一些我想会很简单的事情。我想导入一个现有的JavaScript库，然后调用它的函数。因此，例如，我想导入blah.js，然后调用blah（）。 import React from 'react'; import {blah} from 'blah/js/blah.js'; class MyClass extends React.Component { constructor() { super(); } componentDidMount() { window.addEventListener('resize', this.handleResize); } componentWillUnmount() { window.removeEventListener('resize', this.handleResize); } handleResize() { blah.blah(); } render() { .... } } export default MyClass; 只是想知道要完成这项工作我需要做什么神奇的组合。也许我只是错过了重点。该示例给出错误“ TypeError：_blah.blah未定义”。

76 reactjs  ecmascript-6  webpack 

在一些Webpack示例中，您会看到对“规则”数组的引用： module.exports = { module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', //resolve-url-loader may be chained before sass-loader if necessary use: ['css-loader', 'sass-loader'] }) } ] }, plugins: [ new ExtractTextPlugin('style.css') //if you want to pass in options, you can do so: //new ExtractTextPlugin({ // filename: 'style.css' …

76 webpack 

如何使用webpack在项目中设置多个文件的输入/输出？ 如果在一个条目/输出中只有一个文件，我将遵循http://webpack.github.io/docs/tutorials/getting-started/成功进行编译... 目录 app webpack.config.js ./assets ././javascripts/Administrator/Article/Create/Base.js ././javascripts/Administrator/Article/Edit/Base.js ././javascripts/Account/Index/Base.js ././javascripts/Contact/Index/Base.js ... 怎么这样输出？ ././javascripts/Administrator/Article/Create/bundle.js ././javascripts/Administrator/Article/Edit/bundle.js ././javascripts/Account/Index/bundle.js ././javascripts/Contact/Index/bundle.js webpack.config.js module.exports = { entry: { 'AdministratorArticleCreate':['./assets/javascripts/Administrator/Article/Create/Base.js'] }, output: { path: } // if only one file // entry: "./assets/javascripts/Administrator/Article/Create/Base.js", // output: { // // path: __dirname, // path: "./assets/javascripts/Administrator/Article/Create/", // filename: "bundle.js" // …

76 javascript  node.js  webpack 

我正在尝试在我的react组件之一中导入图像文件。我有Web Pack的项目设置 这是我的组件代码 import Diamond from '../../assets/linux_logo.jpg'; export class ItemCols extends Component { render(){ return ( <div> <section className="one-fourth" id="html"> <img src={Diamond} /> </section> </div> ) } } 这是我的项目结构。 我已经通过以下方式设置了webpack.config.js文件 { test: /\.(jpg|png|svg)$/, loader: 'url-loader', options: { limit: 25000, }, }, { test: /\.(jpg|png|svg)$/, loader: 'file-loader', options: { name: '[path][name].[hash].[ext]', …

76 javascript  reactjs  webpack 

我如何禁用ESlint在生成的项目vue-cli？ preLoaders: [ { test: /\.vue$/, loader: 'eslint', include: projectRoot, exclude: /node_modules/ }, { test: /\.js$/, loader: 'eslint', include: projectRoot, exclude: /node_modules/ } ] 如果删除该loader: 'eslint'行，它将无法编译，与将其设置为空字符串相同。我知道我可以ESLint在初始化阶段选择退出，但是在创建项目后如何禁用它呢？

76 javascript  webpack  vue.js  vue-cli 

我试图将图标添加到使用webpack创建的基于React的网站上。添加favicon完全是一场噩梦，而我尝试了许多解决方案都无济于事。向我推荐的最新解决方案称为“ favicons-webpack-plugin”，可在以下位置找到：https : //github.com/jantimon/favicons-webpack-plugin。 如果有人能告诉我我做错了什么，将非常感谢您的协助。 当我运行'npm run start'时出现以下错误 这是我的目录结构： 这是我的webpack.config.js文件： const path = require('path'); const merge = require('webpack-merge'); const webpack = require('webpack'); const NpmInstallPlugin = require('npm-install-webpack-plugin'); const TARGET = process.env.npm_lifecycle_event; const FaviconsWebpackPlugin = require('favicons-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanPlugin = require('clean-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); var favicons = require('favicons'), …

75 javascript  node.js  reactjs  webpack  favicon 

Webpack文件 您可以使用require.context（）函数创建自己的上下文。 大。什么是“上下文”？这实际上是做什么的？ 它允许您传递要搜索的目录，指示是否也应搜索子目录的标志以及用于匹配文件的正则表达式。 允许我“搜索”吗？搜索我假设的文件，然后呢？此功能最终会做什么？这有什么用途？

74 webpack 

我是Mocha的新手，我正在尝试使用它来测试一个简单的React组件。如果react组件没有任何CSS样式，则测试将通过，但是如果React组件内的标签包含任何className，则会引发语法错误： Testing.react.js import React from 'react'; export default class Testing extends React.Component { render() { return ( <section> <form> <input type="text" /> </form> </section> ); } } testing.jsx import { React, sinon, assert, expect, TestUtils } from '../../test_helper'; import TestingSample from '../../../app/components/Testing.react.js'; describe('TestingSample component', function(){ before('render and locate element', function(){ …

73 unit-testing  reactjs  mocha  webpack  webpack-dev-server 

我在create-react-app中使用以下环境变量： console.log(process.env.REACT_APP_API_URL) // http://localhost:5555 当我npm start通过读取.env文件运行时它起作用： REACT_APP_API_URL=http://localhost:5555 我如何像http://localhost:1234执行a一样设置其他值npm run build？ 这是我的package.json文件： { "name": "webapp", "version": "0.1.0", "private": true, "devDependencies": { "react-scripts": "0.9.0" }, "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

73 reactjs  webpack  frontend  create-react-app  react-scripts 

好的，简单解释一下： 我有3页。 第1页（首页） 第2页（菜单） 第3页（关于） 第1页有- <router-link to="/menu"> 单击该按钮将转到“ /菜单”。 目前，第2页（菜单）有一个 <router-link to="/"> 按钮，然后单击此按钮，它将返回到先前的位置“ /”第1页（主页）。 但是我不想为路由器的每个页面创建一个组件以“返回”上一页（好像我有100个页面，这可能会路由很多工作）。有没有办法用vue-router做到这一点？类似于window.history.back（） 好奇是否有办法做到这一点，因为我在文档中找不到它。 提前致谢！约翰

72 javascript  webpack  vue.js  vuejs2  vue-router 

知道如何处理吗？我的意思是jquery-ui似乎不是amd，而且我不知道该如何管理，知道吗？

72 jquery-ui  webpack 

我正在使用使用多个入口点的webpack配置： var fs = require('fs'); var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.[hash].js'); module.exports = { cache: true, entry: { main: './resources/assets/js/main.js', services: './resources/assets/js/services.js' }, output: { path: './public/assets/web/js', filename: '[name].[hash].js', publicPath: '/assets/web/js/', chunkFilename: '[id].[chunkhash].js' }, resolve: { modulesDirectories: ['node_modules', 'web_modules', 'modules'] }, module: { loaders: [{ test: /\.js$/, …

71 webpack  babeljs 

最近，我一直在研究汇总，并发现它与Webpack和其他捆绑软件有何不同。我遇到的一件事是，由于“扁平捆绑”，对图书馆来说更好。这是基于一条推文和最近的React的PR来利用Rollup的PR。 以我的经验，由于对平面捆绑（例如吊装）进行了更好的优化，因此Rollup在构建库方面更好。1/2 如果您将应用程序与代码拆分等捆绑在一起，Webpack 2可能对您更好。2/2 我不完全确定我理解那是什么意思。平面捆绑指的是什么？我知道Rollup的文档中提到了树状摇晃以帮助减小捆绑包的大小，但是Webpack也有这样做的方法。也许我只是不完全理解这个概念。 请注意，这不是关于汇总与Webpack的比较问题。对于对此感兴趣的人，Webpack提供了一个比较表。这主要是在问什么是平面捆绑？汇总可能会在内部做些什么来实现这一目标？

70 reactjs  webpack  bundler  rollupjs 

我有以下webpack.config.js var path = require("path"); var webpack = require('webpack'); module.exports = { entry: { 'ng2-auto-complete': path.join(__dirname, 'src', 'index.ts') }, resolve: { extensions: ['', '.ts', '.js', '.json', '.css', '.html'] }, output: { path: path.join(__dirname, 'dist'), filename: "[name].umd.js", library: ["[name]"], libraryTarget: "umd" }, externals: [ /^rxjs\//, //.... any other way? rx.umd.min.js does …

70 typescript  webpack