webpack 4 使用示例（二）

开发模式

在前面一篇文章（webpack 4 使用示例（一）），我们已经针对webpack的核心概念配合各种例子，做了清楚的展示。在这篇，我们更进一步介绍webpack的更多特性。

    按照前面的方法，当用webpack打包我们的源代码时，很难追踪/定位错误或警告出现的位置。比如，当我们打包a.js b.js c.js 为bundle.js时包含了一个错误。那么当我们在浏览器调试时，只能追踪到错误出现在bundle.js中，而且bundle.js代码时压缩在一起的，很难阅读。这样，我们要想查到错误究竟出现在哪一个源代码文件中就非常困难。

“源映射” （source maps）

    为了让追踪错误和警告更加容易，JavaScript提供了 “源映射” （source maps），源映射可以将编译后的代码（比如bundle.js）映射回我们书写的源代码（a.js b.js c.js），所以当比如b.js有错误时，源映射就会显示具体出错的位置。

在配置文件中，

我们加上：

 const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
+   devtool: 'inline-source-map',
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

现在，我们故意将print.js文件弄错：

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

那么运行 npm run build之后，点击index.html里的按钮，打开console ,我们会看到报错：

不仅报告了错误的原因，还报告了错误的位置。

源码： demo5

---

开发工具

上面示例可以追踪错误的位置，无疑给调试带来了巨大的方便。但调试过程时手动的，每次修改代码之后都要再提交编译一下才行。那么能不能在源码内容做出修改后，自动编译呢，答案是肯定的。在开发模式下，自动编译的开发工具很多。一般情况下，一个webpack-dev-server就能满足绝大部分需求。但这里还是要把相关的自动编译工具都做个简要介绍。

扫描二维码关注公众号，回复： 2926246 查看本文章

  1. Watch 模式

watch模式下，webpack会“盯着”你的源代码，当有发生改变时，会自动重新编译。

现在在packge.json中加入一个可以开启watch模式的npm script：

{
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "watch": "webpack --watch",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "xml-loader": "^1.2.1"
    }
  }

现在运行npm run watch ，就会看到命令行不退出，因为它在 “watch” 代码，所以，我们在改动代码后会重新编译。唯一不太好的地方是：我们还是要刷新浏览器才能看到变化。而webpack-dev-server能解决这个问题。

源码：watch mode

2.webpack-dev-server

webpack-dev-server 提供了一个简单的web服务器，并能够实时重载。改变webpack配置文件告诉dev 服务器，去哪里寻找文件：

const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    devtool: 'inline-source-map',
+   devServer: {
+     contentBase: './dist'
+   },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

上面的配置是告诉webpack-dev-server在 localhost:8080 上“服务” dist文件夹下的文件。

在packge.json中，配置一个npm script。

此时，在运行npm run start后，就会实时在浏览器重载index.

源码：webpack-dev-server