webpack 文档（指南）- 开发环境

source map

使用 webpack 打包源代码，是很难追踪到错误的，假如 a.js 、 b.js 和 c.js 都被打包到 bundle.js 中后，报错是指向打包后的代码的。这是对开发者不是很友好，所以后来出现了 source map 。顾名思义，它就是对源代码的一种映射。

index.js

console.log('index.js');
throw new Error('hahahahahha');

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: {
        index: './index.js',
    },
    devtool: 'eval',
    output: {
        publicPath: '',
        path: __dirname + '/dist',
        filename: '[name].js'
    },
    module: {
        rules: []
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({template: './index.html'}),
    ]
}

上述配置文件中，在开发环境下配置了 devtool 属性为 eval 。开发环境下，webpack 的 devtool 默认配置也是 eval 。打包后，运行后截图如下。根据错误提示可以追踪到对应的源码文件中去。

在这里插入图片描述
在开发环境下，devtool 被推荐为以下值：

eval ;
eval-source-map ;

在生产环境下，devtool 被推荐为以下值：

(none) ;
source-map ;

选择开发工具

修改某个文件后自动打包编译。

使用 watch mode （观察模式）

1.在 package.json 中添加命令行参数。

webpack.config.js

{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack",
    "watch": "webpack --watch"
  }
}

2. 在 webpack 的配置文件中配置 watch 属性为 true （当然它还可以是一个对象，可以配置更详细的参数，比如保存修改文件的防抖时间等）。

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    watch: true,
    entry: {
        index: './index.js',
    },
    devtool: 'eval-source-map',
    output: {
        publicPath: '',
        path: __dirname + '/dist',
        filename: '[name].js'
    },
    module: {
        rules: []
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({template: './index.html'}),
    ]
}

以上两种方式，在使用 CleanWebpackPlugin 插件的前提下，在修改 js 文件的时候会清理 index.html 模板文件。所以不需要使用 CleanWebpackPlugin 这个插件了。

使用 webpack-dev-server

使用 webpack-dev-server 时，打包的资源并不会输出到外存中，而是输出在内存中，而且它会帮助我们在本地起一个服务^_^。首先，需要安装 webpack-dev-server ，这里我选择全局安装它。

yarn global add webpack-dev-server

根据已安装的 webpack 版本，yarn 最终帮我安装了 [email protected] 。

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: {
        index: './index.js',
    },
    devtool: 'eval-source-map',
    output: {
        publicPath: '',
        path: __dirname + '/dist',
        filename: '[name].js'
    },
    module: {
        rules: []
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({template: './index.html'}),
    ],
    devServer: {
        contentBase:'./dist'
    }
}

我们只需要在 webpack 的配置项中追加 devServer 配置项即可，上述的 contentBase 属性表示将当前目录的 dist 目录作为提供服务的目录。

package.json

{
  "name": "webpack-dev-server",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack-dev-server --open",
  }
}

上述 webpack-dev-server --open 中的 –open 表示自动打开浏览器访问服务地址（默认是 localhost:8080）。当我们修改某个 js 文件的时候，webpack-dev-server 浏览器会自动刷新起始页，如果在 devServer 选项中设置了 hot 为 true，还可以启用热更新 HMR 服务。