CODEWITHSUNDEEP
npmwebpack
Jesse Reza Khorasanee
Jesse Reza Khorasanee

Reputation: 3491

How to speed up webpack development

The Question:

Is there any way to also set up webpack to work in a fast developement mode?

If only it could be like editing files without a bundler. Make a change - view in browser immediately.

A bit of context:

As far as I know, the goal of using webpack is to pack what you need into as few files as possible and be able to cleanly require() across .js files, but it has the large downside of taking anywhere form a few seconds to mutliple minutes in order to build it, completely destroying a developers headspace when trying to view quick changes.

Specific details of a slow webpack set up:

I have been using a weback.config made by a colleague which combines and uglifys files and packages with the goal of having modulare js and a fast production website:

Webpack.config:

var path = require('path');
var webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  mode: "none",
  entry: {
    "physiomeportal": "./src/index.js",
    "physiomeportal.min": "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: "[name].js",
    library: 'physiomeportal',
    libraryTarget: 'umd',
    globalObject: 'this'
  },
  module: {
    rules: [
      { test: /\.(html)$/, use: [{ loader: 'html-loader' }]},
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
      { test: /\.(jpe?g|gif)$/i,
        loader:"file-loader",
        query:{
          name:'[name].[ext]',
          outputPath:'images/' }
      },
      { test: /\.(vs|fs)$/i,
        loaders: [
          'raw-loader'
        ]
      },
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
    ]
  },
  plugins: [
    new UglifyJsPlugin({
      include: /\.min\.js$/,
      uglifyOptions: {
        compress: true
      }
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      "window.$": "jquery"
    })
  ]
};

I been using npm run build every time I wish to see changes to a file that uses require()

Upvotes: 2

Views: 5811

Answers (1)

Jesse Reza Khorasanee
Jesse Reza Khorasanee

Reputation: 3491

Webpack-dev-server

Start with using webpack-dev-server.

It has an option for 'hot reloading', where only changed elements of your app will be rebuilt. It aims to adjust in browser without refreshing but depending on your app, that functionality doesn't always work.

Install it using

npm install webpack-dev-server --save-dev

Add it to your webpack.config

"scripts": {
  ...,
  "start:hotdev": "webpack-dev-server --hot",
  ...
}

Run it

npm run start:hotdev

Upvotes: 2

Related Questions