source-map

  1. {
  2.   devtool: 'cheap-module-source-map'
  3. }

模式：

source-map 是webpack的内置模块，他有七种不同的模式，如下：

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

    注意：

  1. 如果默认不设置 devtool: xxx 默认对应 eval
  2. 推荐使用 cheap-module-source-map，该模式会精确 debug 源代码所对应行
  3. 生产环境一般不会开启sourcemap功能，有两个原因：
    1. 通过bundle和sourcemap文件，可以反编译出源码，有泄露源码的风险
    2. suorcemp文件的体积相对比较巨大，这跟我们生产环境追求的更小更轻量的bundle相悖

      devServer

      在开发环境下我们往往需要启动一个web服务，方便我们模拟用户从浏览器访问我们的web服务，读取我们的打包产物，以观看我们的代码在客户端的表现，webpack内置了这个功能，我们只需要简单的配置就可以开启它。

      安装：

      1. npm install -D webpack-dev-server

      配置：

      1. devServer: {
      2. static: path.resolve(__dirname, './dist'),
      3. compress: true, // 配置文件在服务端是否压缩传输
      4. port: 3000, // 配置端口号
      5. headers: [ // 添加响应头
      6. {
      7. key: 'X-Custom',
      8. value: 'foo',
      9. },
      10. {
      11. key: 'Y-Custom',
      12. value: 'bar',
      13. },
      14. ],
      15. proxy: { // 代理服务器，会将请求代理到 http://localhost:8080
      16. '/api': 'http://localhost:8080',
      17. },
      18. historyApiFallback: true, // 在路由找不到路由时自动显示根页面内容
      19. }

      模块热替换与热加载

      模块热替换可以让我们在程序在运行过程中，无论是替换，删除，添加 模块，无需从新加载整个页面。
      热加载就是说我们在修改模块时，会自动给我们刷新浏览器

      配置：

      1. devServer: {
      2. hot: 'true',
      3. },

      注意：

      从 webpack-dev-server v4 开始热替换是默认开启。

      eslint

      安装：

      1. npm install eslint -D

      初始化：

      这里我们根据提示选择对应所需要的选项就好
      1. eslint --init
      初始化以后我们根目录下就出现了一个 .eslintrc.js文件，详细配置可以去 eslint官网 查看。
      1. module.exports = {
      2. env: {
      3. browser: true,
      4. es2021: true,
      5. },
      6. extends: [
      7. 'airbnb-base',
      8. ],
      9. parserOptions: {
      10. ecmaVersion: 'latest',
      11. sourceType: 'module',
      12. },
      13. rules: {
      14. },
      15. };
      我们希望能在编译器直观的看到错误，可以在vscode安装一个 eslint插件：
      image.png

      拓展：

      我们可以通过配置vscode来实现自动eslint代码补全及错误纠正，我们只需要在 vscode 的设置(setting.json)中贴入以下代码,就可以实现 c+s 的时候自动纠错：
      1. {
      2. "editor.codeActionsOnSave": {
      3.   "source.fixAll": true
      4. },
      5. "editor.formatOnSave": true,
      6. //autoFix默认开启，只需输入字符串数组即可
      7. "eslint.validate": [],
      8. "eslint.codeAction.showDocumentation": {
      9.   "enable": true
      10. },
      11. "eslint.alwaysShowStatus": true,
      12. "eslint.format.enable": true,
      13. "explorer.confirmDelete": false,
      14. "typescript.updateImportsOnFileMove.enabled": "always",
      15. "javascript.updateImportsOnFileMove.enabled": "always",
      16. "git.ignoreMissingGitWarning": true,
      17. "files.eol": "\n",
      18. }