webpack-2 | 易学教程

Angular 2, @ngtools/webpack, AOT

阅读更多关于 Angular 2, @ngtools/webpack, AOT

I'm trying to use AOT in Angular 2 using webpack and @ngtools/webpack. I don't have any error with the compilation, but when I open the site on the browser I get a console error: No NgModule metadata found for 'AppModule' My AotPlugin on webpack configuration is this: new AotPlugin({ tsConfigPath: 'tsconfig.json', entryModule: helpers.root('src/app/app.module.ts#AppModule') }) My app.module.ts is: @NgModule({ bootstrap: [ App ], imports: [ // import Angular's modules BrowserModule, RouterModule.forRoot(ROUTES), SharedModule ], declarations: [ App, HomeComponent, ], providers: providers })

Optimize Angular vendor output

阅读更多关于 Optimize Angular vendor output

In trying to optimize the vendor bundle when building with webpack, I'm using the NgcWebpackPlugin . This is the vendor bundle visually presented: What surprises me is the presence of the angular compiler module even tho we are utilizing AOT. Do I need to somehow explicitly declare that I don't need the compiler in the bundle? Or am I missing something else? Here's the vendor.ts : import '@angular/platform-browser'; import '@angular/platform-browser-dynamic'; import '@angular/core'; import '@angular/common'; import '@angular/http'; import '@angular/router'; import '@angular/forms' import '

Is it possible to let webpacks System.import use ajax (for progress events)?

阅读更多关于 Is it possible to let webpacks System.import use ajax (for progress events)?

问题 So I've just updated to webpack 2 and have my first working setup where webpack automatically creates chunks by looking at System.import calls. Pretty sweet! However, I load the initial chunk with an ajax call so that I can show the progress while loading So my question is, can I overwrite or change the function of System.import somehow so that it will use an ajax request that I can listen to for events, instead of loading the chunk with a <script> tag? 回答1: No, unfortunately not. webpack 2

Webpack inject js/css file content directly to index.html

阅读更多关于 Webpack inject js/css file content directly to index.html

I have code like this <html> <head> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="path_to_css/some_css.css" rel="stylesheet" type="text/css"> </head> <body> ... <script src="bootstrap/js/bootstrap.min.js"></script> <script src="jquery/jquery.min.js"></script> </body> </html> and I need plugin/loader or other way to get my html file with replaced link and script tags to content of this files, is there any way to do it? Finnaly i wrote own plugin which fit my needs include-file-webpack-plugin It actually can be accomplish with: npm i --save-dev css

Webpack 2 issues with Semantic UI

阅读更多关于 Webpack 2 issues with Semantic UI

Been struggling to get semantic-ui setup using Webpack 2. I a few errors relating to the fonts in the default semantic-ui theme and another error regarding image-webpack-loader : ERROR in ./~/css-loader?{"lessPlugins":[{"options":{"paths":{"../../theme.config":"/Users/djthomps/Desktop/demo/theme.config"}}}]}!./~/less-loader!./semantic/src/semantic.less Module not found: Error: Can't resolve './themes/themes/default/assets/fonts/icons.eot' in '/Users/djthomps/Desktop/demo/semantic/src' @ ./~/css-loader?{"lessPlugins":[{"options":{"paths":{"../../theme.config":"/Users/djthomps/Desktop/demo/theme

Webpack: Generate multiple css files from the same sources

阅读更多关于 Webpack: Generate multiple css files from the same sources

问题 I'm trying to generate 2 different CSS files from the same SCSS sources with webpack 2, in order to have alternate stylesheets without duplicating code. I've successfully generated both sheets separately by commenting one out, but can't figure out how to generate them at the same time. My webpack config (shortened for relevance) is: const ExtractTextPlugin = require("extract-text-webpack-plugin"); const CopyWebpackPlugin = require('copy-webpack-plugin'); const webpack = require('webpack');

fs module fails when integrating Electron into Angular project

阅读更多关于 fs module fails when integrating Electron into Angular project

问题 I have some trouble integrating Electron. When I use it as described in this blog post, everything works. Problems start when I want to use import Electron (electron.remote) to use it in Angular2 service to let the app using the desktop features like system dialogs and file system access. I get the following error when loading the app, in electron/index.js which is included in webpack bundle: Uncaught TypeError: fs.existsSync is not a function (index.js:6) The file looks quite simple: var fs

Using Webpack 2 and extract-text-webpack-plugin

阅读更多关于 Using Webpack 2 and extract-text-webpack-plugin

问题 I'm using extract-text-webpack-plugin 2.0.0-rc.3 with Webpack 2.2.1 and am getting this error when running the build: /node_modules/extract-text-webpack-plugin/index.js:259 var shouldExtract = !!(options.allChunks || chunk.isInitial()); ^ TypeError: chunk.isInitial is not a function Here is my webpack.config.js: 'use strict'; const argv = require('yargs').argv; const ExtractTextPlugin = require("extract-text-webpack-plugin"); const webpack = require('webpack'); module.exports = (function () {

System.import fails at first attempt (modules[moduleId] is undefined)

阅读更多关于 System.import fails at first attempt (modules[moduleId] is undefined)

When I use System.import() more than once in separate modules one of them doesn't work on first try (Webpack's require function returns modules[moduleId] is undefined ), but at second and at subsequent attempts it loads normally. Folder structure [webpack-test] ----[modules] --------foo.js --------bar.js --------dateHelper.js ----[node_modules] ----0.app.dist.js ----0.charts.dist.js ----1.app.dist.js ----3.app.dist.js ----app.dist.js ----app.js ----charts.dist.js ----charts.js ----index.html ----package.json ----webpack.config.js index.html <!doctype html> <html lang="en"> <head> <meta charset

Webpack + React router dynamic routing - how to catch require loading exception with require.ensure

阅读更多关于 Webpack + React router dynamic routing - how to catch require loading exception with require.ensure

I'm using the react/react-router/webpack stack with dynamic routing between my different pages of the app which means every page loads asynchronously by demand. Everything works great but when I deploy a new version, my current active users who didn't fetch all of the Js file of all the pages will get stuck once the'll try to navigate to another page they haven't visited yet. EXAMPLE lets say I have a code split app with the following .js generated files and md5 (for cache busting): main.123.js profile.456.js User visits my main page and gets only main.123.js . In the meantime I deploy a new