webpack-2

Building a ReactJS application with Webpack. Recently interested in using code splitting to reduce app size. I've tried implementing a custom HOC that wrapped System.import(): /* async/index.tsx */ ... at a very high level looked like... class Async extends React ... { componentWillMount() { this.props.load.then(c => { this.component = c; this.setState({loaded:true}); } } render() { return this.component ? <this.component.default {...this.props} /> : <span />; } } /* async/foo/index.tsx */ import Async from 'async'; const Foo = (props) => ( <Async {...props} load={System.import('async/foo/body

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? No, unfortunately not. webpack 2 translates System.import() to ordinary require.ensure() calls which just uses the <script> tag. Even the

I have a docker app with the following containers node - source code of the project. it serves up the html page situated in the public folder. webpack - watches files in the node container and updates the public folder (from the node container) on the event of change in the code. database this is the webpack/node container setup web: container_name: web build: . env_file: .env volumes: - .:/usr/src/app - node_modules:/usr/src/app/node_modules command: npm start environment: - NODE_ENV=development ports: - "8000:8000" webpack: container_name: webpack build: ./webpack/ depends_on: - web volumes

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'); const path = require('path'); const ExtractLightCss = new ExtractTextPlugin("app-light.css") const

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 = require('fs') var path = require('path') var pathFile = path.join(__dirname, 'path.txt') if (fs

I have a project like this: root/ webpack-config.js app/ app.js js/ dep.js core/ module.js Here is the webpack config file: module.exports = { entry: './app/app.js', output: { path: __dirname, filename: "[name]-bundle.js" }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] }, resolve: { modulesDirectories: ['core'] } ... in app.js, I have: import local_dep from './js/dep'; import myModule from 'module'; This works as expected with webpack 1.x, but the myModule module isn't resolved with webpack 2, I'm getting "Module not found: can't resolve 'module' in

From my understanding of Content Security Policy , the nonce has to change on every request. That means (I think) it must be generated at run-time on the client, not at build-time in the Webpack config. I've tested the webpack_nonce functionality in my app and it works great. Unfortunately, I'm not sure how to get that value, generated at run-time on the client, to the actual CSP policy, which is either set as a meta-tag in the index.html file (or some equivalent) or on the server itself. I suppose you could set the CSP meta-tag dynamically on the client, but that seems like a security risk. I

I have an angular2 Project that I compress/compile with webpack. I use tslink loader with webpack so I have tslint related configuration in webpack.config.js . module.exports = { ... tslint: { configuration: { rules: { quotemark: [true, "double"] } }, // tslint errors are displayed by default as warnings // set emitErrors to true to display them as errors emitErrors: false, // tslint does not interrupt the compilation by default // if you want any file with tslint errors to fail // set failOnHint to true failOnHint: true, // name of your formatter (optional) formatter: "", // path to directory