webpack(四)---开发系列

一、 source map

devtool: ‘inline-source-map‘

现在，让我们来做一些调试，在 print.js 文件中生成一个错误：

src/print.js

  export default function printMe() {
-   console.log(‘I get called from print.js!‘);
+   cosnole.error(‘I get called from print.js!‘);
  }

二、使用观察模式

 "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "watch": "webpack --watch",
      "build": "webpack"
    },

自动打包
现在，你可以在命令行中运行 npm run watch，就会看到 webpack 编译代码，然而却不会退出命令行。这是因为 script 脚本还在观察文件

三、用 webpack-dev-server

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。让我们设置以下：

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

webpack.config.js

    devtool: ‘inline-source-map‘,

+   devServer: {
+     contentBase: ‘./dist‘
+   },
    plugins: [
      new CleanWebpackPlugin([‘dist‘]),
      new HtmlWebpackPlugin({
        title: ‘Development‘
      })
    ],

四、使用 webpack-dev-middleware

webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。接下来是一个 webpack-dev-middleware 配合 express server 的示例。

首先，安装 express 和 webpack-dev-middleware：

npm install --save-dev express webpack-dev-middleware


亲测直接按照官网做好了没有坑

https://www.webpackjs.com/guides/development/#%E4%BD%BF%E7%94%A8-source-map

webpack(四)---开发系列

原文：https://www.cnblogs.com/pikachuworld/p/11581619.html