标签: webpack

更新:2018年12月(参见'Aniket'回答)

使用Angular CLI 6,您需要使用构建器,因为不推荐使用ng eject,很快就会在8.0中删除它

更新:2018年6月:Angular 6不支持ng弹出**

更新:2017年2月:使用ng弹出

更新:2016年11月:angular-cli现在只使用webpack.您只需要使用npm install -g angular-cli正常安装."我们改变了beta.10和beta.14之间的构建系统,从SystemJS到Webpack."但实际上我只使用angular-cli来结构和文件夹,然后再使用webpack配置

我用这个安装了角度cli:

npm install -g angular-cli@webpack

当我使用angular1和web pack时,我曾经修改过"webpack.config.js"文件来执行所有的任务和插件,但我没有看到使用angular-cli创建的这个项目是谁工作的.这是魔法？

当我这样做时,我看到Webpack正在工作:

ng serve 

"Version: webpack 2.1.0-beta.18"

但我不明白angular-cli配置的工作方式......

我正在玩React和ES6使用babel和webpack.我想在不同的文件中构建几个组件,导入一个文件并将它们捆绑在一起webpack

假设我有几个这样的组件:

我-navbar.jsx

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';

export class MyNavbar extends React.Component {
    render(){
      return (
        <Navbar className="navbar-dark" fluid>
        ...
        </Navbar>
      );
    }
}

主page.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import MyNavbar from './comp/my-navbar.jsx';

export class MyPage extends React.Component{
  render(){
    return(
        <MyNavbar />
        ...
    );
  }
}

ReactDOM.render(
  <MyPage />,
  document.getElementById('container')
);

使用webpack并按照他们的教程,我有main.js:

import MyPage from './main-page.jsx';

构建项目并运行它后,我在浏览器控制台中收到以下错误:

Error: Invariant Violation: Element …

我正在使用webpack来管理reactjs项目.我想通过webpack在javascript中加载图像file-loader.下面是webpack.config.js:

const webpack = require('webpack');
const path = require('path');
const NpmInstallPlugin = require('npm-install-webpack-plugin');

const PATHS = {
    react: path.join(__dirname, 'node_modules/react/dist/react.min.js'),
    app: path.join(__dirname, 'src'),
    build: path.join(__dirname, './dist')
};

module.exports = {
    entry: {
        jsx: './app/index.jsx',
    },
    output: {
        path: PATHS.build,
        filename: 'app.bundle.js',
    },
    watch: true,
    devtool: 'eval-source-map',
    relativeUrls: true,
    resolve: {
        extensions: ['', '.js', '.jsx', '.css', '.less'],
        modulesDirectories: ['node_modules'],
        alias: {
            normalize_css: __dirname + '/node_modules/normalize.css/normalize.css',
        }
    },
    module: {
        preLoaders: [

            {
                test: …

React路由器允许反应应用程序处理/arbitrary/route.为了实现这一点,我需要我的服务器在任何匹配的路由上发送React应用程序.

但是webpack dev服务器不处理任意端点.

这里有一个使用附加快速服务器的解决方案. 如何允许webpack-dev-server允许来自react-router的入口点

但我不想启动另一个快速服务器以允许路由匹配.我只是想告诉webpack dev服务器匹配任何网址并发送给我我的反应应用程序.请.

我有一个简单的应用程序,初始化angular-cli.

它显示相对于3条路线的一些页面.我有3个组件.在这个页面的一个上,我使用lodash和Angular2 Http模块来获取一些数据(使用Rxjs Observables,map和subscribe).我使用简单的ngFor显示这些元素.

但是,尽管我的应用程序非常简单,但我得到了一个巨大的(在我看来)捆绑包和地图.我没有谈论gzip版本,但在gzipping之前的大小.这个问题只是一般性的建议问题.

一些测试结果:

建立

哈希:8efac7d6208adb8641c1时间:10129ms chunk {0} main.bundle.js,main.bundle.map(main)18.7 kB {3} [initial] [rendered]

chunk {1} styles.bundle.css,styles.bundle.map,styles.bundle.map(styles)155 kB {4} [initial] [rendered]

chunk {2} scripts.bundle.js,scripts.bundle.map(scripts)128 kB {4} [initial] [rendered]

chunk {3} vendor.bundle.js,vendor.bundle.map(vendor)3.96 MB [initial] [rendered]

chunk {4} inline.bundle.js,inline.bundle.map(inline)0 bytes [entry] [rendered]

等待:10Mb供应商捆绑包用于这样一个简单的应用程序？

ng build --prod

哈希:09a5f095e33b2980e7cc时间:23455ms chunk {0} main.6273b0f04a07a1c2ad6c.bundle.js,main.6273b0f04a07a1c2ad6c.bundle.map(main)18.3 kB {3} [initial] [rendered]

chunk {1} styles.bfdaa4d8a4eb2d0cb019.bundle.css,styles.bfdaa4d8a4eb2d0cb019.bundle.map,styles.bfdaa4d8a4eb2d0cb019.bundle.map(styles)154 kB {4} [initial] [rendered]

chunk {2} scripts.c5b720a078e5464ec211.bundle.js,scripts.c5b720a078e5464ec211.bundle.map(scripts)128 kB {4} [initial] [rendered]

chunk {3} vendor.07af2467307e17d85438.bundle.js,vendor.07af2467307e17d85438.bundle.map(vendor)3.96 MB [initial] [rendered]

chunk {4} inline.a345391d459797f81820.bundle.js,inline.a345391d459797f81820.bundle.map(inline)0 bytes …

我是webpack的新手,我正在转换现有的Web应用程序来使用它.

我正在使用webpack捆绑和缩小我的JS,这在部署时非常好,但这使得在开发过程中进行调试非常具有挑战性.

通常我使用chrome的内置调试器来调试JS问题.(或firefox上的Firebug).然而,对于webpack,所有内容都填充在一个文件中,使用该机制进行调试变得具有挑战性.

有没有办法快速打开和关闭bundeling？或者打开和关闭缩小？

我已经查看是否有一些脚本加载器配置或其他设置,但它看起来不是很明显.

我还没有时间将所有内容转换为模块和使用要求.所以我只需要使用require("script!./ file.js")模式进行加载.

是否可以使用webpack定义一个全局变量,结果如下:

var myvar = {};

我看到的所有示例都使用外部文件 require("imports?$=jquery!./file.js")

我输出的错误:

配置对象无效.Webpack已使用与API架构不匹配的配置对象进行初始化. - configuration.module有一个未知的属性'loaders'.这些属性是有效的:object {exprContextCritical？,exprContextRecursive？,exprContextRegExp？,exprContextRequest？,noParse ?, rules？,defaultRules？,unknownContextCritical？,unknownContextRecursive？,unknownContextRegExp？,unknownContextRequest？,unsafeCache？,wrappedContextCritical？,wrappedContextRecursive？,wrappedContextRegExp ？,strictExportPresence？,strictThisContextOnImports？} - >影响正常模块的选项(NormalModuleFactory).

我的webpack.config.js:

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

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  },
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  }

};


module.exports = config;

我的webpack版本:

webpack@4.1.1

我正在使用create-react-app而不喜欢eject.

目前尚不清楚从@ font-face导入并在本地加载的字体应该去哪里.

也就是说,我正在装货

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}

有什么建议？

- 编辑

包括丹在他的回答中提到的要点

?  Client git:(feature/trivia-game-ui-2) ? ls -l public/static/fonts
total 1168
-rwxr-xr-x@ 1 maximveksler  staff  62676 Mar 17  2014 MYRIADPRO-BOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  61500 Mar 17  2014 MYRIADPRO-BOLDCOND.woff
-rwxr-xr-x@ 1 maximveksler  staff  66024 Mar 17  2014 MYRIADPRO-BOLDCONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  66108 Mar 17  2014 MYRIADPRO-BOLDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  60044 Mar …

我用create-react-app包创建了一个ReactJS项目并且运行良好,但我找不到webpack文件和配置.

react-create-app如何与webpack一起使用？webpack配置文件位于默认安装位置中的哪个位置create-react-app？我无法在项目的文件夹中找到配置文件.

我还没有创建覆盖配置文件.我可以使用其他文章管理配置设置,但我想找到传统的配置文件.