天道酬勤,学无止境

webpack

Ignore Typescript errors in Webpack-dev-server

I have inherited an angular+Typescript project. The dev environment used gulp's webserver and I am trying to switch over to webpack-dev-server so that we can enable hot-module-replacement. When I run webpack-dev-server from our build/ directory, the command fails, listing about 700 TypeScript errors. We would rather not fix them. Is there any way to use webpack-dev-server even with TypeScript errors? My understanding was that webpack should still correctly create the build file and start the dev-server even if typescript errors occur, unless you enable the webpack-fail-plugin, which I do not

2022-01-18 23:42:22    分类:问答    typescript   webpack   webpack-dev-server

Path to static assets in vue.js application

I am developing a single page application based on the vue-cli webpack template. Since we have to use static assets as well, we need to reference them in our stylesheet. The official documentation recommends to use an absolute path like the following one: background-image: url('/assets/images/lo/example2.svg'); The problem is, that static assets won't be processed by the vue-loader and webpack itself, so the urls won't be set correctly in the final output stylesheet. All assets that will be processed by the webpack url-loader will get the correct relative url depending on your publicPath

2022-01-18 22:19:16    分类:问答    webpack   vue.js   vuejs2   vue-loader   vue-cli

Webpack breaking in IE11

It's difficult to track this down, so thanks for bearing with me. Some users were complaining that our site was broken in IE11. The app is using nextjs 3.0.1 and webpack 2.7.0. Debugging in development mode I think I have an issue similar to Angular RxJs timer pausing on IE11. I'm getting an error from a reference called webpack///webpack bootstrapxxxxxxxxxx (where the x's are some numbers in hex) in IE11. Here's the function that's causing the issue: // The require function function __webpack_require__(moduleId) { // Check if module is in cache if(installedModules[moduleId]) { return

2022-01-18 22:16:33    分类:问答    javascript   webpack   ecmascript-6   babeljs   nextjs

how to inject css bundle in head and js bundle in body using webpack html plugin

I am absolutely new to Webpack and I work with scss and vue on a little project. What I try is to compile all my .scss files to css and bundle them up in a bundle.css that is automatically injected into the head (I already set up the sass and css loaders to archieve the bundling to css). But I also want my vue app.js bundle at the end of the body, also injected by the htmlWebpackPlugin (already done). Using a single HtmlWebpackPlugin to put everything in my index.html would leave me with either the style in the body or the javascript in the head. My first guess would be, that I have to define

2022-01-18 13:20:42    分类:问答    javascript   css   webpack   bundle   webpack-html-loader

Running "webpack" instead of "node_modules/.bin/webpack"

I'm using to run "node_modules/.bin/webpack", but I know it's possible to configure the path so that you only have to type "webpack". I can't find how, though. :/

2022-01-18 08:55:42    分类:问答    webpack   command-line-interface   node-modules

Webpack import * messes tree shaking?

I read this here - https://www.thedevelobear.com/post/5-things-to-improve-performance/ - that doing importing all things from a library will not allow tree shaking to remove it, even if it is not used. I don't believe this, is it really true? I would think that tree shaking would identify that none of the functions except a couple were used, and then remove those. There is a really easy way to reduce bundle size by just checking your imports. When performing methods or components from 3rd party libraries, make sure you import only the things you need, not the whole library itself. For instance

2022-01-18 03:28:24    分类:问答    webpack   tree-shaking

What aspect of Hot Module Replacement is this article for?

I am learning Webpack and come across this article. I have general idea of what is hot module replacement(HMR). I can configure webpack HMR plugin by following example code: var plugins = [ new webpack.HotModuleReplacementPlugin(), // using HMR plugin new HtmlWebpackPlugin({template: './index.html'}) ]; module.exports = { // webpack config object context: entryBasePath, entry:{ app: ['webpack/hot/dev-server', './bootstrap.js'] }, output: { path: outputBasePath, filename: './bundle.js', sourceMapFilename: '[file].map' // set source map output name rule }, devtool: 'source-map', // enable source

2022-01-18 02:57:28    分类:问答    webpack   webpack-dev-server

Add flow to compilation step on create-react-app project

I'm working on a project with create-react-app and would like to add Flow to my process. The official documentation explains how to do this and it's relatively straightforward, but following their instructions it adds it alongside the built in linting/building/compilation that the app does on its own. Based on my understanding, any time I save or make a change to my application code, ESLint is running a style check on my code, Babel is transpiling my ES6 to ES5 JavaScript, and my JSX is being transpiled into JS. I would simply like to add Flow typechecking to that process. How can I configure

2022-01-18 02:44:47    分类:问答    webpack   eslint   babeljs   flowtype   create-react-app

Angular 2 rc4 can not go to page by typing the url to the address bar

I 've just update my project to version rc 4 and got the problem. When I use the systemjs to config my project, everything is ok. When I run the project with webpack (I am using the angular2-webpack-starter ) the project was run successfully, no bugs. I can go to every link which was config by [routerLink]. But with the same link if I type the url to the browser's address bar. There was nothing happened. My app did not load anything. Here is some screen shot from my project: Screen shot Can anyone help me? I am thank you so much.

2022-01-18 01:20:49    分类:问答    angular   webpack   angular2-routing

Webpack - How to bundle/require all files of a folder (subfolder)

I am trying to see if there is a shorter way of running webpack bundles, and also why my loaders do not work. Here is my code: module.exports = { context: path.join(__dirname, 'dist'), entry: ['./ES6bundle.js', './jQuery.js'], output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') } }; // module: { // loaders: [{ // test: /\.js?$/, // exclude: /node_modules/, // loader: 'babel-loader', // query: { // presets: ['env'] // } // }] // }; The module.exports works but when I run the loaders I get errors. My other question is about consolidating multiple entries into one file. The

2022-01-18 01:06:42    分类:问答    javascript   webpack   bundle   atom-editor