webpack-2

Webpack 2+: How to apply different loaders for files with same extension?

由 大憨熊 提交于 2019-12-17 19:36:26
问题 Here's my use-case: Most svgs should be inlined. So I setup a rule like this: {test: /\.svg$/, use: "svg-inline-loader"}, In some instances I just want the url of an svg rather than inlining it. In webpack 1.x I required them like this: require('path/to/file.svg?external') . Here's the corresponding rule: {test: /\.svg\?external$/, use: "file-loader!image-webpack-loader"}, It seems like webpack 2 does not include the ? part anymore when test ing for a rule since only the first rule is being

google fonts + webpack

由 ￡可爱￡侵袭症＋ 提交于 2019-12-17 15:36:42
问题 I am new to webpack 2.2 ; I would like to know the best way to integrate a Google font within my project. I am using the Webpack HTML plugin to generate an index.html from a template. So for the moment I hard-coded the Google font CSS directly in a <script> tag but I do not really like this 'solution' since it does not really use webpack at all: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister" rel=

Webpack bundles my files in the wrong order (CommonsChunkPlugin)

由 蓝咒 提交于 2019-12-17 09:42:30
问题 What I want is to bundle my JavaScript vendor files in a specific order via CommonsChunkPlugin from Webpack. I'm using the CommonsChunkPlugin for Webpack. The usage from the official documentation is straight forward and easy. It works as intended but I believe the plugin is bundling my files in alphabetical order (could be wrong). There are no options for the plugin to specify the order they should be bundled. Note: For those who are not familiar with Bootstrap 4, it currently requires a

Split “vendor” chunk using webpack 2

由 好久不见. 提交于 2019-12-14 03:56:50
问题 I have code splitting config similar to official docs and everything works perfect - all my node modules are in "vendor" chunk (including "babel-polyfill"). But now I need to move babel-polyfill and all it's dependecies to separate chunk ("polyfills") to be able to load it before my vendor bundle. Any ideas how to do that? My config: ... entry: { main: './index.jsx' }, ... new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module) { return module.context && module

isDevMode / enableProdMode error :Cannot enable prod mode after platform setup

由 一笑奈何 提交于 2019-12-13 15:15:57
问题 I have just upgraded our project to Angular 4.1.0. This also included upgrading webpack to 2.2.1, and upgrading ngx-boostrap to 1.9.2 amongst other package upgrades. After upgrading all this, I tested everything with webpack dev server, in dev mode and all was fine. I then tried a production webpack build. The build worked fine, but upon running our site I immediately get the error 'Cannot enable prod mode after platform setup'. Having investigated using Chrome dev tools, I can see that ngx

Webpack - Best way to update HTML to include latest [hashed] bundles

由 梦想与她 提交于 2019-12-12 18:01:05
问题 I'm using webpack to generate hashed bundle filenames. Assuming I'm using static HTML, CSS & JS, what is the best way to automatically update index.html to point to the latest bundles? For example, update: <script src="e8e839c3a189c25de178.app.js"></script> <script src="c353591725524074032b.vendor.js"></script> to: <script src="d6cba2f2e2fb3f9d98aa.app.js"></script> <script src="c353591725524074032b.vendor.js"></script> // no change automatically everytime a new bundle version is available.

window is not defined using Angular4 + AoT + Webpack2

由 流过昼夜 提交于 2019-12-12 11:03:03
问题 I have an angular4 app that uses webpack and has been working great with JiT but now I'm trying to get it working with AoT and I'm having issues. Specifically I'm getting the following error: ERROR in window is not defined ERROR in ./src/app/main/main.ts Module not found: Error: Can't resolve './../../../aot-main/src/app/main/app.module.ngfactory' in 'W:\<Full Path to App>\src\app\main' resolve './../../../aot-main/src/app/main/app.module.ngfactory' in 'W:\<Full Path to App>\src\app\main'

How do I resolve type errors using angular2 and aspnet core?

由 三世轮回 提交于 2019-12-12 05:14:40
问题 I used dotnet cli tool to create a new angular application and everything looks and works fine. C:/..myprojectlocation> dotnet new angular This creates a new folder and file structure with the angular application. After this, I go to the home.component and import AfterViewInit event from angular. import { Component, AfterViewInit } from '@angular/core'; As well, I add the event handler: ngAfterViewInit(): void { const inputs: NodeListOf<HTMLInputElement> = document.getElementsByTagName("input

webpack 2 css loading through entry causing issue

由 久未见 提交于 2019-12-12 03:31:55
问题 I'm trying to load some css using the entry point in webpack.config.js. I'm using the ExtractTextPlugin but it seems that I get junk in the extracted css file var path = require('path'); var CopyWebpackPlugin = require('copy-webpack-plugin'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var paths = { // Source Directory Paths nodeModules: './node_modules/', scripts: 'Scripts/', styles: 'Styles/', tests: 'Tests/', // Destination Directory Paths wwwroot: './wwwroot/', css: '.

Including external scripts with global references using Webpack

由 蓝咒 提交于 2019-12-12 02:37:59
问题 I am working on using Webpack 2 to package some oldish javascript code. This code uses the Leaflet 1.0 library and also includes a Leaflet plugin (named Google.js) that simply references the global L variable that leaflet exposes. In the current html page, leaflet and then the plugin (Google.js) is loaded and then the map1.js code via script tags. Which all works fine. I have created the following webpack.config.js : var path = require('path'); module.exports = { devtool: 'cheap-eval-source
订阅 webpack-2