如何加快Webpack开发

Question

问题：

有什么方法可以将webpack设置为以快速开发模式工作？

如果只是像没有捆绑器的文件编辑一样。进行更改-立即在浏览器中查看。

一些上下文：

据我所知，使用webpack的目的是将所需的内容打包到尽可能少的文件中，并能够在{.1}文件中清晰地require()，但缺点是它可以随处携带花费几秒钟到几分钟的时间来构建它，从而在试图查看快速更改时完全破坏了开发人员的顶空。

缓慢的Webpack设置的具体细节：

我一直在使用由同事制作的weback.config，该文件结合并丑化了文件和软件包，目的是拥有模块化js和快速的生产网站：

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"
    })
  ]
};

我每次想查看对使用npm run build的文件的更改时都在使用require()

Answer 1

Webpack-dev-server

从使用webpack-dev-server开始。

它具有“ 热重装”的选项，在该选项中，仅重建应用程序中已更改的元素。它的目的是在浏览器中进行调整而不刷新，但是取决于您的应用程序，该功能并不总是有效。

使用

安装

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

将其添加到您的webpack.config

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

运行

npm run start:hotdev