标签: webpack

我有大量的javascript文件分成我的应用程序中的4个子目录.在grunt中,我抓住所有这些并将它们编译成一个文件.这些文件没有module.exports函数.

我想使用webpack并将其拆分为4个部分.我不想手动进入并要求我的所有文件.

我想创建一个插件,在编译时遍历目录树,然后抓取所有.js文件名和路径,然后需要子目录中的所有文件并将其添加到输出中.

我希望每个目录中的所有文件都编译成一个模块,然后我可以从我的入口点文件中获取,或者包含在http://webpack.github.io/docs/plugins.html提到的资产中.

添加新文件时,我只想将其放在正确的目录中,并知道它将被包含在内.

有没有办法用webpack或插件执行此操作？

webpack中的加载器和插件有什么区别？

插件的文档只是说:

使用插件添加通常与webpack中的bundle相关的功能.

我知道babel使用加载器进行jsx/es2015转换,但看起来像其他常见任务(例如copy-webpack-plugin)使用插件.

正如我写这样的webpack.config.js

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
};

在index.jsx我导入一个react模块App

import React from 'react';
import { render } from 'react-dom';

import App from './containers/App';

let rootElement = document.getElementById('box')
render(
  <App />,
  rootElement
)

我发现如果我将模块app命名为App.jsx,那么webpack会说index.jsx无法找到模块App,但是如果我命名为命名模块app App.js,它会找到这个模块并且运行良好.

所以,我对此感到困惑.在我webpack.config.js,我已经写test: /\.jsx?$/了检查文件,但为什么命名*.jsx无法找到？

有一些webpack开发服务器配置(它是整个配置的一部分):

config.devServer = {
  contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'),
  stats: {
    modules: false,
    cached: false,
    colors: true,
    chunk: false
  },
  proxy: [{
    path: /^\/api\/(.*)/,
    target: options.proxyApiTarget,
    rewrite: rewriteUrl('/$1'),
    changeOrigin: true
  }]
};

function rewriteUrl(replacePath) {
  return function (req, opt) {  // gets called with request and proxy object
    var queryIndex = req.url.indexOf('?');
    var query = queryIndex >= 0 ? req.url.substr(queryIndex) : "";
    req.url = req.path.replace(opt.path, replacePath) + query;
    console.log("rewriting ", req.originalUrl, req.url);
  };
}

我使用以下命令执行webpack:

node node_modules/webpack-dev-server/bin/webpack-dev-server.js …

我是webpack的新手,我发现在生产版本中我们可以减少整体代码的大小.目前webpack构建大约8MB文件,main.js大约5MB.如何减少生产构建中的代码大小？我从互联网上找到了一个示例webpack配置文件,我为我的应用程序配置,然后运行npm run build并开始构建,并在./dist/目录中生成一些文件.

1. 这些文件仍然很重(与开发版相同)
2. 如何使用这些文件？目前我正在使用webpack-dev-server来运行该应用程序.

package.json文件

{
  "name": "MyAPP",
  "version": "0.1.0",
  "description": "",
  "main": "src/server/server.js",
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
  ],
  "author": "Iam",
  "license": "MIT",
  "homepage": "http://example.com",
  "scripts": {
    "test": "",
    "start": "babel-node src/server/bin/server",
    "build": "rimraf dist && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors"
  },
  "dependencies": {
    "scripts" : "", ...
  },
  "devDependencies": {
    "scripts" : "", ...
  }
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin …

我正在使用webpack处理React webapp,与本教程一起使用.

无意中,我将node_modules文件夹添加到我的git中.然后我再次使用它删除它git rm -f node_modules/*.

现在,当我尝试启动webpack服务器时,出现以下错误:

> webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors

sh: webpack-dev-server: command not found

npm ERR! Darwin 14.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "devserve"
npm ERR! node v0.12.4
npm ERR! npm  v2.10.1
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! Blabber@0.0.1 devserve: `webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors`
npm ERR! spawn ENOENT

起初我以为这只是我的项目,但后来我检查了教程的代码检查点:同样的错误!所以有些东西似乎在全球搞砸了.

这是我到目前为止所尝试的:

• rm node_modules …

我正在实现https://github.com/moroshko/react-autosuggest的示例

重要的代码是这样的:

import React, { Component } from 'react';
import suburbs from 'json!../suburbs.json';

function getSuggestions(input, callback) {
  const suggestions = suburbs
    .filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb))
    .sort((suburbObj1, suburbObj2) =>
      suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) -
      suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput)
    )
    .slice(0, 7)
    .map(suburbObj => suburbObj.suburb);

  // 'suggestions' will be an array of strings, e.g.:
  //   ['Mentone', 'Mill Park', 'Mordialloc']

  setTimeout(() => callback(null, suggestions), 300);
}

这个示例中的复制粘贴代码(有效)在我的项目中有错误:

Error: Cannot resolve module 'json' in /home/juanda/redux-pruebas/components

如果我拿出前缀json!:

import suburbs from '../suburbs.json';

这样我在编译时就没有错误(导入完成).但是当我执行它时出错:

Uncaught TypeError: _jsonfilesSuburbsJson2.default.filter is not a function

如果我调试它,我可以看到郊区是一个objectc,而不是一个数组,所以没有定义过滤器功能. …

我用了创建了一个vue webpack项目vue-cli.

vue init webpack myproject

然后在dev模式下运行项目:

npm run dev

我收到了这个错误:

无法加载资源:服务器响应状态为404(未找到)http:// localhost:8080/favicon.ico

所以在webpack里面,如何favicon.ico正确导入？

我尝试运行webpack --watch并在编辑我的JS文件后,它不会触发自动重新编译.

我已经尝试重新安装webpack使用npm uninstall但它仍然无法正常工作.

有任何想法吗？

我开始使用开发服务器端渲染应用程序webpack的node/express环境.我对devpack和prod(运行时)环境中每个webpack包的作用感到非常困惑.ReactJSreact-router

以下是我的理解摘要:

webpack:是一个包,一个将Web应用程序的不同部分连接在一起的工具,然后捆绑在一个.js文件中(通常bundle.js).然后,结果文件在prod环境中提供,由应用程序加载,并包含运行代码所需的所有组件.功能包括缩小代码,缩小等.

webpack-dev-server:是一个提供服务器来处理网站文件的包.它还bundle.js从客户端组件构建单个.js文件(),但在内存中提供.它还具有option(-hot)来监视所有构建文件,并在代码更改的情况下在内存中构建新的bundle.服务器直接在浏览器中提供(例如:)http:/localhost:8080/webpack-dev-server/whatever.内存加载,热处理和浏览器服务的结合使用户可以在代码更改时在浏览器上更新应用程序,非常适合开发环境.

如果我对上述文字有疑问,我真的不确定下面的内容,所以如有必要请告诉我

当使用一个常见的问题webpack-dev-server有node/express是webpack-dev-server一个服务器,是node/express.这使得运行客户端和某些节点/快速代码(API等)的环境变得棘手.注意:这是我所面对的,但很高兴理解为什么会在更多细节中发生这种情况......

webpack-dev-middleware:这是一个具有相同功能webpack-dev-server(内存捆绑,热重新加载)的中间件,但其格式可以注入server/express应用程序.通过这种方式,您可以webpack-dev-server在节点服务器中使用某种服务器(内部). 哎呀:这是一个疯狂的梦吗??? 这件作品如何解决开发和生产方程,使生活更简单

webpack-hot-middleware:这......被困在这里...找到这件作品时webpack-dev-middleware......不知道如何使用它.

ENDNOTE:对不起,有任何错误的想法.我真的需要帮助才能在复杂的环境中找到这些变体.如果方便的话,请添加更多将构建整个场景的软件包/数据.