webpack-2

I am just dabbling with Angular 4 with Webpack 2 on a project. I am attempting to load some scripts during ngOnInit and am running into some problems. Problem 1.) I have the following code within my ngOnInit: System.import(`../../node_modules/jquery/dist/jquery.js`); System.import(`../../node_modules/jquery-validation/dist/jquery.validate.js`); System.import(`../../node_modules/jquery-validation/dist/additional-methods.js`); System.import(`assets/js/regular-expressions.js`); When i do this, all the assets appear to load but I get an error of: Uncaught (in promise): ReferenceError: $ is not

I am using webpack to create a *.js bundle var path = require('path'); var webpack = require('webpack'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: { site: [ './wwwroot/js/site.js', './node_modules/jquery/dist/jquery.js', './Scripts/jquery.global.js', './node_modules/jquery-validation/dist/jquery.validate.js', './node_modules/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js', './node_modules/popper.js/dist/popper.js', './node_modules/bootstrap/dist/js/bootstrap.js', ] }, output: { filename: 'bundle.js', path: path.resolve(__dirname,

I have a solution built with Angular + Typescript + Webpack2 and I want to load dynamically some external modules that are known only at runtime. Since I can't use webpack to accomplish this task I'm exploring SystemJs. I was trying to require SystemJS but this causes the application to fail, as the execution flow hit let System = require('systemjs'); I get this error Cannot find module "." at webpackMissingModule (system.src.js:3893) [angular] at new SystemJSLoader$1 (system.src.js:3893) [angular] at index.js:23199:14 [angular] at Object.<anonymous> (system.src.js:4022) [angular] at Object

After spending most of the day googling and trying - i did not get it to work and at this point i'm not sure what's missing. I already have jQuery working (and verified it works) in webpack.common.js: new ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' }) For example i have a "MetisMenu" plugin, where should i configure it? I tried various combinations of require/include in my app.module.ts. Like (including assigning them to a constant/var but import/require always give this error): import 'metismenu'; jQuery(...).metisMenu is not a function import { metisMenu } from 'metismenu

My webpack.config.js looks as below : var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); var path = require('path'); var node_dir = __dirname + '/node_modules'; const autoprefixer = require('autoprefixer'); const ProvidePlugin = require('webpack/lib/ProvidePlugin'); module.exports = { context: path.join(__dirname, "src"), devtool: debug ? "inline-sourcemap" : null, entry: ['tether', 'font-awesome-loader',"bootstrap-loader","./js/client.js"], resolve: { extensions: ['.js', '.styl'], alias: { 'jquery': node_dir + '/jquery/src/jquery.js', } }, module: { rules: [

This question is probably more about Webpack and ES6 import than about Vue. I'm writing a Vuex mutation that adds a new mykey: [] to an object in state . This needs to use Vue.set(state.myobj, 'mykey', []) , so that the new array gains reactiveness. However, when I import Vue from 'vue' to my mutations.js and use Vue.set(...) it doesn't fix the problem (it just does nothing). The problem seems to be that Vue is not the same Vue that I use in my main js file when creating the Vue object in my main.js file. I've verified that the problem is related to the way Vue is imported to mutations.js. If

I want to tree shake lodash as well as my unused multiply function from the generated bundle from webpack I have 2 main files app.js & math.js It contains the following code - app.js import map from "lodash/map"; import { sum } from "./math"; console.log("💩"); console.log(`2 + 3 = ${sum(2, 3)}`); map([1, 2, 3], x => { console.log(x); }); math.js export const sum = (a, b) => a + b; export const multiply = (m, n) => m * n; webpack.config.js const path = require("path"); const webpack = require("webpack"); const UglifyJSPlugin = require("uglifyjs-webpack-plugin"); const Jarvis = require("webpack

I have an electron app that I'm building with webpack 2. I have a config file that I'm including like a normal webpack resource: config.js: export default { config1: 1, config2: 2 } main.js: import config from '../some/path/config'; console.log(config.config1); The config file code ends up in my bundle.js file as you would expect. The problem is that the point of config files is that you can change them after deployment. This set up requires me to re-webpackify everything if I want config file changes to take effect. Update 1: I thought file-loader might be the answer but the problem is that

I am using webpack 2, and it will tell me if there are compile issues with my typescript code. However, I have not figured out a way to run tslint through it and have it run with every change detected by webpack when its running in dev-server mode. I have tried getting tslint-loader working, but for each file in my project it simply tells me: /src/main.tsNo valid rules have been specified I am using it as such: rules: [ { test: /\.ts$/, enforce: 'pre', loader: 'tslint-loader', options: { configuration: { configFile: true // I have also tried setting this to "tslint.json" } } }, ... more

I'm building angular 2 app using Typescript 2 and Webpack 2. As a loader I use awesome-typescript-loader. I set noImplicitAny = true in tsconfig.json. But some of npm packages I used implicitly has an 'any' type. (e.g. angular2-platform-node). So I want to skip that rule only on npm packages but not on my app source. How can I configure for that? You can skip type checking for all declaration files with skipLibCheck compiler option (added in typescript 2.0) { "compilerOptions": { "noImplicitAny": true, "skipLibCheck": true, ... } 来源： https://stackoverflow.com/questions/40836657/how-to-skip