七、webpack的基本使用，source-map，dev-server，eslint（Mhua）

source-map

类似于debug的功能，可用于快速定位错误信息。
source-map 配置有七个值。

• eval：每个module会封装到eval里面包裹起来执行，并且会在末尾追加注释 //@sourceURL
• source-map：生成一个SourceMap 文件
• hidden-source-map：和source-map一样，但不会在bundle末尾追加注释
• inline-source-map：生成一个DataUrl 形式的 SourceMap 文件
• eval-source-map：每个 module 会通过 eval() 来执行，并且生成一个DataUrl 形式的 SourceMap.
• cheap-source-map：生成一个没有列信息的 SourceMaps 文件，不包含loader的 sourcemap（比如：babel的sourcemap）
• cheap-module-source-map：生成一个没有列信息的 sourceMaps 文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。

注意：生产环境我们一般不会开启 sourcemap功能，主要原因有两点：
1、通过 bundle 和 sourcemap 文件可以编译源码，也就是说线上有sourcemap 文件的话，增加暴露源码的风险。
2、sourcemap 文件体积相对比较巨大，生产环境追求更小更轻量的bundle。

首先快速搭建一个环境：

# 生产 package.json
npm init -y

# 安装 webpack webpack-dev-server webpack-cli html-webpack-plugin
npm install webpack webpack-dev-server webpack-cli html-webpack-plugin -D

新建 webpack.config.js 。

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {

  entry: "./app.js",

  mode: "development",

  devtool: "source-map", // 默认值

  plugins: [
    new HtmlWebpackPlugin()
  ]
}

新建 app.js 文件

console.log("hello world")

执行打包命令：

npx webpack

打包后，在dist目录下的 main.js 文件，内容如下所示：

eval("console.log(\"hello webpack\")\n\n//# sourceURL=webpack://test/./app.js?");

并且在控制台也能精准找出 输出的文件的第几行。

开发环境中：推荐使用 cheap-module-source-map，它可以单独生成一个文件，且只记录行数，同时对babel解析的混杂进来后，也不会导致代码行数的识别问题。

devServer

在 webpack.config.js 配置 开发服务器。

devServer: {
  static: path.resolve(__dirname, './dist'),
  # 传输文件是否压缩 Content-Encoding: gzip
  compress: true,
  # 端口号
  port: 3000,
  # response headers 携带
  headers: {
    'X-Access-token': "aaaaaa"
  },
  /# 代理，当访问 url 为 /api 时访问 http://localhost:9000
  proxy: {
    '/api': "http://localhost:9000"
  },
  # 浏览器输入不存在的路径，都是访问根目录。
  historyApiFallback: true,

  # 配置 https (两种方式)
  #  https: true,
  http2: true,

  # 修改代码后，页面之前通过 点击或者其它操作添加的代码是不会消失的，默认值 true
  hot: true, 

  # 修改代码后，刷新浏览器，默认值 是 true
  liveReload: true  
},

eslint

eslint 是扫描代码是否符合规范的工具。 eslint 配置是和webpack无关的，但是在工程化开发环境中，是不可缺少的。

npm install eslint -D

通过 eslint 创建一个 配置文件

npx eslint --init

# 选择第三种，检查语法，发现问题，规范代码格式。
To check syntax, find problems, and enforce code style

# 使用 JavaScript modules (import/export) 模块化
#  None of these
# Does your project use TypeScript? »    No
# Where does your code run?   运行环境：Browser
# Use a popular style guide  选择流行的代码规范
# 选择：Airbnb: https://github.com/airbnb/javascript
# 配置文件 格式   JSON

生成 .eslintrc.json 配置文件

{
    "env": {
        // 浏览器 环境
        "browser": true,
        // 并且支持 es2021
        "es2021": true
    },
    "extends": [
        "airbnb-base"
    ],
    "parserOptions": {
        // 指定 ECMA 版本
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
      "no-console": 0   // 代码有 console.log 是否警告， 0 表示 不输出警告
    },
    "globals": {
    }
}

webpack 结合 eslint 使用

# 首先安装
npm install babel-loader eslint-loader @babel/core -d

新建 webpack.config.js 文件

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {

  entry: "./src/app.js",

  plugins: [
    new HtmlWebpackPlugin()
  ],

  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader', 'eslint-loader']
      }
    ]
  }
}