1. webpack配置基础

1.1 使用PostCSS自动补全浏览器前缀

  1. 安装postcss-loader
  1. npm i -D postcss-loader
  1. 安装需要的插件
  1. npm i -D autoprefixer
  • 配置postcss-loader
  1. const path = require('path')
  3. module.exports = {
  4.   entry: './src/index.js',
  5.   output: {
  6.     filename: 'main.js',
  7.     path: path.resolve(__dirname, 'dist')
  8.   },
  9.   module: {
  10.     rules: [
  11.       {
  12.         test: /\.css$/,
  13.         use: [
  14.           'style-loader',
  15.           {
  16.             loader: 'css-loader',
  17.             options: {
  18.               importLoaders: 1
  19.             }
  20.           },
  21.           'postcss-loader'
  22.         ]
  23.       },
  24.       {
  25.         test: /\.less$/,
  26.         use: [
  27.           'style-loader',
  28.           'css-loader',
  29.           'postcss-loader',
  30.           'less-loader'
  31.         ]
  32.       }
  33.     ]
  34.   }
  35. }
  36. //打包css规则
  37.     {
  38.         test: /\.css$/,
  39.         /*
  40.         css-loader:解析css文件中的@import依赖关系
  41.         style-loader：将webpack处理之后的css内容插入到HTML的HEAD标签里
  42.         postcss-loader:放在最后面，最早执行
  43.         */
  44.        use: [ 'style-loader', 'css-loader','postcss-loader' ]
  45.     }
  46. //打包less的规则
  47.    {
  48.        test: /\.less$/,
  49.        use: [{
  50.            loader: "style-loader" // creates style nodes from JS strings,
  51.        }, {
  52.            loader: "css-loader" // translates CSS into CommonJS
  53.        }, {
  54.           loader: "less-loader" // compiles Less to CSS
  55.        },{
  56.            loader:'postcss-loader'
  57.        }]
  58.    },
  59.   //打包scss规则
  60.    {
  61.        test: /\.scss$/,
  62.        use: [{
  63.            loader: "style-loader" // 将 JS 字符串生成为 style 节点
  64.        }, {
  65.            loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
  66.        }, {
  67.            loader: "sass-loader" // 将 Sass 编译成 CSS
  68.        },{
  69.            loader:'postcss-loader'
  70.        }]
  71.    }
  73.   "devDependencies": {
  74.     "autoprefixer": "^10.3.1",
  75.     "css-loader": "^6.2.0",
  76.     "less": "^4.1.1",
  77.     "less-loader": "^10.0.1",
  78.     "postcss": "^8.3.6",
  79.     "postcss-cli": "^8.3.1",
  80.     "postcss-loader": "^6.1.1",
  81.     "postcss-preset-env": "^6.7.0",
  82.     "style-loader": "^3.2.1",
  83.     "webpack": "^5.47.1",
  84.     "webpack-cli": "^4.7.2"
  86.   "browserslist": {
  87.     "development": [
  88.       "last 1 chrome version",
  89.       "last 1 firefox version",
  90.       "last 1 safari version"
  91.     ],
  92.     "production": [
  93.       "ie > 6",
  94.       ">1%",
  95.       "not dead",
  96.       "not op_mini all"
  97.     ]
  98.   }
  101. }

1.2 创建postcss-loader配置文件

  • 在配置文件中配置autoprefixer
  1. //postcss.config.js
  2. module.exports = {
  3.     plugins: {
  4.         "autoprefixer": {
  5.             "overrideBrowserslist": [
  6.                  "ie >= 8", // 兼容IE7以上浏览器
  7.                  "Firefox >= 3.5", // 兼容火狐版本号大于3.5浏览器
  8.                  "chrome  >= 35", // 兼容谷歌版本号大于35浏览器,
  9.                  "opera >= 11.5", // 兼容欧朋版本号大于11.5浏览器
  10.             ]
  11.         }
  12.     }
  13. };
  1.             rules: [{
  2.                 test: /\.css$/,
  3.                 use: [
  4.                     // 'style-loader', \
  5.                     // 取代style-loader，作用：提取js中的css为单独文件
  6.                     MiniCssExtractPlugin.loader,
  7.                     'css-loader',
  8.                     // // 将less文件转为css文件
  9.                     // 'less-loader',
  10.                     /**
  11.                      * 兼容性处理
  12.                      * postcss：postcss-loader和postcss-preset-env
  13.                      * 识别对应的环境加载对应的配置
  14.                      * 该插件帮postcss找到package.json中的browserlist里面的配置，通过配置加载指定的css兼容性样式
  15.                      * "browserslist":{
  16.                      * // 默认生产环境
  17.                             "development": [
  18.                                 "last 1 chrome version",  // 兼容最近的一个chrome版本
  19.                                 "last 1 firefox version",
  20.                                 "last 1 safari version"
  21.                             ],
  22.                             "production":[
  23.                                 ">0.2%", 
  24.                                 "not dead", // 不要已经丢弃的浏览器
  25.                                 "not op_mini all" 不要所有的欧朋浏览器
  26.                             ]
  27.                         }
  28.                      */
  29.                     {
  30.                         loader: 'postcss-loader',
  31.                         options: {
  32.                             // webpack4配置
  33.                             // ident: 'postcss',
  34.                             // plugins: () => [ 
  35.                             //     // postcss插件
  36.                             //     require('postcss-preset-env')()
  37.                             // ]
  39.                             //webpack5
  40.                             postcssOptions: {
  41.                                 plugins: [
  42.                                     require('postcss-preset-env')(),
  43.                                 ]
  44.                             }
  45.                         }
  46.                     }
  47.                 ]
  48.             },
  50.         ]

1.3 使用PostCSS自动将px转换成rem

  1.  npm install postcss postcss-pxtorem --save-dev
  1. module.exports = {
  2.   plugins: {
  3.     'postcss-pxtorem': {
  4.       rootValue: 37.5,
  5.       propList: ['*']
  6.     },
  8.   }
  9. }

1.4 .browserslistrc 配置目标浏览器和nodejs版本在不同的前端工具

  1. > 0.01% 
  2. last 2 version
  3. not dead
  6. "browserslist": [
  7.     "> 1%",
  8.     "last 2 versions",
  9.     "not ie <= 8"
  10.   ]

1.5 file-loader模式打包图片类型

  1. module.exports = {
  2.  module: {
  3.   rules: [
  4.       {
  5.         test: /\.(png|svg|gif|jpe?g)$/,
  6.         use: [
  7.           {
  8.             loader: 'file-loader',
  9.             options: {
  10.               name: 'img/[name].[hash:6].[ext]',
  11.               // outputPath: 'img'
  12.             }
  13.           }
  14.         ]
  15.       }
  16.     ]
  17.    }
  18.   ]
  19.  }
  20. }
  21. /**
  22.  * [ext]: 扩展名
  23.  * [name]: 文件名
  24.  * [hash]: 文件内容
  25.  * [contentHash]:
  26.  * [hash:<length>]
  27.  * [path]:
  28.  */
  • 生成文件 bd62c377ad80f89061ea5ad8829df35b.png （默认的文件名为 [hash].[ext]），输出到输出目录并返回 public URL。
    • [ext]：String，默认值为 file.extname，表示资源扩展名；
    • [name]：String，默认值为 file.basename，表示资源的基本名称；
    • [path]：String，默认值为 file.dirname，表示资源相对于 context 的路径；

1.6 url-loaderurl-loader可以设置图片大小限制(公司配置模式)

  1. 公司配置模式 webpack4版本
  1.       {
  2.         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  3.         loader: 'url-loader',
  4.         exclude: [resolve('src/icons')],
  5.         options: {
  6.           limit: 10000,
  7.           name: utils.assetsPath('img/[name].[hash:7].[ext]')
  8.         }
  9.       },
  10.       {
  11.         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  12.         loader: 'url-loader',
  13.         options: {
  14.           limit: 10000,
  15.           name: utils.assetsPath('media/[name].[hash:7].[ext]')
  16.         }
  17.       },
  1. // 判断生产环境不同
  2. exports.assetsPath = function(_path) {
  3.   const assetsSubDirectory =
  4.     process.env.NODE_ENV === 'production'
  5.       ? config.build.assetsSubDirectory
  6.       : config.dev.assetsSubDirectory
  8.   return path.posix.join(assetsSubDirectory, _path)
  9. }
  1. 机构配置模式 webpack5版本
  1. module.exports = {
  2.   module: {
  3.     rules: [
  4.       {
  5.         test: /\.(png|jpg|gif)$/i,
  6.         type: 'asset',
  7.         parser: {
  8.           dataurlCondition: {
  9.             maxSize: 8192
  10.           }
  11.         }
  12.       },
  13.     ],
  14.   },
  15. };
  1. CSDN老哥配置

在配置项内加入 publicPath 属性，设置为部署时的绝对路径

比如所 以后你的页面 会通过如下url方式让用户访问，所有前端文件都放置于

  1. http://localhost:63342/url-loader-test/dist/

那么pubilcPath的 值就应该是 '/url-loader-test/dist/'，也就是你的部署接口地址。

  1.             {
  2.                 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  3.                 loader: 'url-loader',
  4.                 options: {
  5.                     limit: 10000,
  6.                     name: 'img/[name].[hash:7].[ext]'，
  7.                     publicPath:"/url-loader-test/dist/"      //该地址不是唯一的，根据你的代码实际路由地址进行修改
  8.                 }
  9.             },
  • webpack5 版本各种类型匹配
  1. module.exports = {
  2.   module: {
  3.     rules: [
  4.       {
  5.         test: /\.png$/i,
  6.         use: 'asset/resource'
  7.       },
  8.       {
  9.         test: /\.ico$/i,
  10.         use: 'asset/inline'
  11.       },
  12.       {
  13.         test: /\.text$/i,
  14.         use: 'asset/source'
  15.       },
  16.     ],
  17.   },
  18. };

1.7 配置SVG图片


  1. npm i -D svg-sprite-loader
  1.   {
  2.       test: /\.svg$/,
  3.         loader: 'svg-sprite-loader',
  4.         include: [resolve('src/icons')],
  5.         options: {
  6.           symbolId: 'icon-[name]'
  7.         }
  8.       },
  9.       {
  10.         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  11.         loader: 'url-loader',
  12.         options: {
  13.           limit: 10000,
  14.           name: utils.assetsPath('img/[name].[hash:7].[ext]')
  15.         },
  16.         exclude: [resolve('src/icons')]
  17.       },
  1.   注意 url-loader 中要将 icons 文件夹排除, 不让 url-loader 处理该文件夹

1.8 打包阿里字体图标

  • 在webpack5之前是直接通过url-loader,file-loader来处理，webpack5后就不用了。
    一般的操作都是将字体文件复制到build下面。
    也是通过assets module type处理
    MP3 MP4文件也是一样这样处理即可
  1.       {
  2.         test: /\.(ttf|woff2?)$/,
  3.         type: 'asset/resource',
  4.         generator: {
  5.           filename: 'font/[name].[hash:3][ext]'
  6.         }
  7.       }

1.9 打包其他资源 asset module type资源类型

asset/resource 发送一个单独的文件并导出URL，替代file-loader

asset/inline 导出一个资源的data URL，替代url-loader

asset/source 到处资源的源代码，之前通过使用raw-loader实现。

asset在导出一个data URL和发送一个单独的文件之间做选择，之前通过url-loader+limit属性实现。

  1. 在每一个type值后面配置geneator属性，生成的意识，里面是个对象，配置下filename即可
  1.  asset/resource
  3.        {
  4.         test: /\.(png|svg|gif|jpe?g)$/,
  5.         type: ' asset/resource',
  6.             // 输出的文件目录地址
  7.         generator: {
  8.           filename: "img/[name].[hash:4][ext]"
  9.         },
  10.         parser: {
  11.           dataUrlCondition: {
  12.             maxSize: 30 * 1024
  13.           }
  14.         }
  15.       },
  1. asset/inline，同url-loader 转64，因为不生成文件，所以没有generator属性
  1. {
  2.         test: /\.(png|svg|gif|jpe?g)$/,
  3.         type: 'asset/inline',
  1. 要实现limit的效果，就得用第四个了asset
  • asset类型又多一个属性，parser，表示解析，是个对象，里面有个固定的属性，叫dataUrlCondition，顾名思义，data转成url的条件，也就是转成bas64的条件，maxSize是就相当于Limit了，当大于100kb才不转换，所以
  1.   {
  2.         test: /\.(png|svg|gif|jpe?g)$/,
  3.         type: ' asset/resource',
  4.             // 生成目录地址
  5.         generator: {
  6.           filename: "img/[name].[hash:4][ext]"
  7.         },
  8.             // 生成的文件大小
  9.         parser: {
  10.           dataUrlCondition: {
  11.             maxSize: 30 * 1024
  12.           }
  13.         }
  14.       },

2. webpack之Plugin(插件)

2.1 clean-webpack-plugin

  1. cnpm install clean-webpack-plugin -D
  • 作用：打包成功并且帮我们删除了原来的build文件了。
  1. const path = require('path')
  2. const { CleanWebpackPlugin } = require('clean-webpack-plugin')
  4. module.exports = {
  5.   entry: './src/index.js',
  6.   output: {
  7.     filename: 'main.js',
  8.     path: path.resolve(__dirname, 'dist'),
  9.     // assetModuleFilename: "img/[name].[hash:4][ext]"
  10.   },
  11.   module: {
  13.   },
  14.   plugins: [
  15.     new CleanWebpackPlugin()
  16.   ]
  17. }
  19. /**
  20.  * class MyPlugin{
  21.  *  constructor(){}
  22.  *  apply()
  23.  * }
  24.  */

2.2 HtmlWebpackPlugin

  • 顾名思义就是对html文件的处理，因为我们之前打包，html是没有打包到build的。生成html有两种方式，一种是使用默认的，他自己的ejs模板，一种是我们给他一个ejs模板试试这插件的威力，直接把Index.html除掉.
  1. const path = require('path')
  2. const { CleanWebpackPlugin } = require('clean-webpack-plugin')
  3. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. const { DefinePlugin } = require('webpack')
  6. module.exports = {
  7.   entry: './src/index.js',
  8.   output: {
  9.     filename: 'main.js',
  10.     path: path.resolve(__dirname, 'dist'),
  11.     // assetModuleFilename: "img/[name].[hash:4][ext]"
  12.   },
  13.   module: {
  14.     rules: []
  15.   },
  16.   plugins: [
  17.     new CleanWebpackPlugin(),
  18.     new HtmlWebpackPlugin({
  19.       title: 'html-webpack-plugin',
  20.       template: './public/index.html'
  21.     }),
  22.     new DefinePlugin({
  23.       BASE_URL: '"./"'
  24.     })
  25.   ]
  26. }
  • DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。如果在开发构建中，而不在发布构建中执行日志记录，则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处，设置它，就可以忘记开发和发布构建的规则。
  1.     new webpack.DefinePlugin({
  2.       'process.env': require('../config/dev.env')
  3.     }),
  5.     module.exports = {
  6.   NODE_ENV: '"development"',
  7.   ENV_CONFIG: '"dev"',
  8.   BASE_API: '"/apis"'
  9. }

2.3 copyWebpackPlugin

  1. cnpm install copy-webpack-plugin -D
  • 可以看到我们new的时候可以传参数过去，第一个就是patterns，匹配的意思，里面的from表示会复制的文件夹。而to可以忽略，默认会使用output的path的，最后就是我们要忽略的文件了，比如Index.html是要生成的，不是我们传的，所以使用globOptions里面的ignore属性，而且忽略要注意用法，加**/才表示是在public里面忽略。看看效果
  • 可以看到Css文件被忽略了，index.html不是复制过来的，是生成的。
    这样看上去有点别扭，因为我们生成的js文件，或者复制过去的css文件，icon文件想放在相对应的文件夹，如js文件夹, css文件夹等等。
    我们来设置budle.js放到Js文件里去， image.png
  1. const CopyWebpackPlugin = require('copy-webpack-plugin')
  4. module.exports = {
  5.   plugins: [
  6.     new CleanWebpackPlugin(),
  7.     new HtmlWebpackPlugin({
  8.       title: 'copyWebpackPlugin',
  9.       template: './public/index.html'
  10.     }),
  11.     new DefinePlugin({
  12.       BASE_URL: '"./"'
  13.     }),
  14.     new CopyWebpackPlugin({ // 这个插件有很多参数 
  15.       patterns: [ // 匹配
  16.         {
  17.           from: 'public',
  18.           globOptions: { // 全局设置的内容，index.html自动生成，所以我们不用复制过去
  19.             ignore: ['**/index.html','**/123.css'] //忽略文件  “**代表忽略的目录是在public下面
  20.           }
  21.         }
  22.       ]
  23.     })
  24.   ]
  25. }

3.0 babel处理兼容

  • babel.config.js
  1. module.exports = {
  2.   presets: [
  3.     [
  4.       '@babel/preset-env',
  5.       {
  6.         // false: 不对当前的JS处理做 polyfill 的填充
  7.         // usage: 依据用户源代码当中所使用到的新语法进行填充
  8.         // entry: 依据我们当前筛选出来的浏览器决定填充什么
  9.         useBuiltIns: 'entry',
  10.         corejs: 3
  11.       }
  12.     ]
  13.   ]
  14. }

4.0 webpack-server配置

4.1 追述代码出错位置 开发模式

对于本指南，我们将使用 inline-source-map 选项，这有助于解释说明示例意图（此配置仅用于示例，不要用于生产环境）：

  1. const path = require('path');
  2.  const HtmlWebpackPlugin = require('html-webpack-plugin');
  4.  module.exports = {
  5.    mode: 'development',
  6.    entry: {
  7.      index: './src/index.js',
  8.      print: './src/print.js',
  9.    },
  10.   devtool: 'inline-source-map',
  11.    plugins: [
  12.      new HtmlWebpackPlugin({
  13.        title: 'Development',
  14.      }),
  15.    ],
  16.    output: {
  17.      filename: '[name].bundle.js',
  18.      path: path.resolve(__dirname, 'dist'),
  19.      clean: true,
  20.    },
  21.  };
  1. Uncaught ReferenceError: cosnole is not defined
  2.    at HTMLButtonElement.printMe (print.js:2)

我们可以看到，此错误包含有发生错误的文件（print.js）和行号（2）的引用。这是非常有帮助的，因为现在我们可以确切地知道，所要解决问题的位置。

4.2 webpack-dev-middleware

  1. webpack-dev-middleware,作用就是，生成一个与webpack的compiler绑定的中间件，然后在express启动的服务app中调用这个中间件。
  2. 通过watch mode，监听资源的变更，然后自动打包（如何实现，见下文详解);快速编译，走内存；返回中间件，支持express的use格式。
  3. webpack-dev-middleware 是一个封装器(wrapper)，它可以把 webpack 处理过的文件发送到一个 server。webpack-dev-server 在内部使用了它，然而它也可以作为一个单独的 package 来使用，以便根据需求进行更多自定义设置。下面是一个 webpack-dev-middleware 配合 express server 的示例。
  1. npm install --save-dev express webpack-dev-middleware
  • webpack.conf.js
  1. inline-source-map 有助于追踪错误和警告在源代码中的原始位置，如果不添加，则堆栈会简单的指向bundle.js，显然不利于我们开发过程中修改代码。 devtool: 'inline-source-map',
  1.  const path = require('path');
  2.  const HtmlWebpackPlugin = require('html-webpack-plugin');
  4.  module.exports = {
  5.    mode: 'development',
  6.    entry: {
  7.      index: './src/index.js',
  8.      print: './src/print.js',
  9.    },
  10.    devtool: 'inline-source-map',
  11.    devServer: {
  12.      static: './dist',
  13.    },
  14.    plugins: [
  15.      new HtmlWebpackPlugin({
  16.        title: 'Development',
  17.      }),
  18.    ],
  19.    output: {
  20.      filename: '[name].bundle.js',
  21.      path: path.resolve(__dirname, 'dist'),
  22.      clean: true,
  23.     publicPath: '/',  //我们将会在 server 脚本使用 
  24.    },
  25.  };
  • 我们将会在 server 脚本使用 publicPath，以确保文件资源能够正确地 serve 在 http://localhost:3000 下，稍后我们会指定 port number(端口号)。接下来是设置自定义 express server：
  1.   webpack-demo
  2.   |- package.json
  3.   |- webpack.config.js
  4.  |- server.js   // 自定义配置热更新服务器
  5.   |- /dist
  6.   |- /src
  7.     |- index.js
  8.     |- print.js
  9.   |- /node_modules

server.js

  1. const express = require('express');
  2. const webpack = require('webpack');
  3. const webpackDevMiddleware = require('webpack-dev-middleware');
  5. const app = express();
  6. const config = require('./webpack.config.js');
  7. const compiler = webpack(config);
  9. // 告知 express 使用 webpack-dev-middleware，
  10. // 以及将 webpack.config.js 配置文件作为基础配置。
  11. app.use(
  12.   webpackDevMiddleware(compiler, {
  13.     publicPath: config.output.publicPath,
  14.   })
  15. );
  17. // 将文件 serve 到 port 3000。
  18. app.listen(3000, function () {
  19.   console.log('Example app listening on port 3000!\n');
  20. });

现在，添加一个 npm script，以使我们更方便地运行 server：

package.json

  1.  {
  2.      "scripts": {
  3.          "test": "echo \"Error: no test specified\" && exit 1",
  4.          "watch": "webpack --watch",
  5.          "start": "webpack serve --open",
  6.          "server": "node server.js",
  7.          "build": "webpack"
  8.        },
  9.  }

5.0 Vuejs配置webpack环境

5.1 公司配置模式 webpack4版本

  1. const VueLoaderPlugin = require('vue-loader/lib/plugin')
  3. module.exports = {
  4.     devServer: {
  5.     clientLogLevel: 'warning',
  6.     historyApiFallback: true,
  7.     hot: true,
  8.     compress: true,
  9.     host: HOST || config.dev.host,
  10.     port: PORT || config.dev.port,
  11.     open: config.dev.autoOpenBrowser,
  12.     overlay: config.dev.errorOverlay
  13.       ? { warnings: false, errors: true }
  14.       : false,
  15.     publicPath: config.dev.assetsPublicPath,
  16.     proxy: config.dev.proxyTable, // 代理环境 
  17.     quiet: true, // necessary for FriendlyErrorsPlugin
  18.     watchOptions: {
  19.       poll: config.dev.poll
  20.     }
  21.   },
  23.   plugins: [
  24.     new VueLoaderPlugin()
  25.   ]
  26. }

5.2 devServer配置机构

  1.   devServer: {
  2.     hot: true,
  3.     hotOnly: true,
  4.     port: 4000,
  5.     open: false,
  6.     compress: true,
  7.     historyApiFallback: true,
  8.     proxy: {
  9.       // /api/users
  10.       // http://localhost:4000/api/users
  11.       // https://api.github.com/info/users
  12.       // /api/users---> 返回
  13.       '/api': {
  14.         target: 'https://api.github.com',
  15.         pathRewrite: { "^/api": "" },
  16.         changeOrigin: true
  17.       }
  18.     }
  19.   },

5.3 resolve模块配置

  1.   resolve: {
  2.     extensions: [".js", ".json", '.ts', '.jsx', '.vue'], 
  3.     alias: {
  4.        //配置解析模块的路径别名:有点简写路径，缺点就是没有路径的提示 
  5.       '@': path.resolve(__dirname, 'src')
  6.     }
  7.   },

5.4 devtool配置的模式

模式 解释
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 生成一个没有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）
cheap-module-source-map 生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。

5.4.1 eval模式

  1. webpackJsonp([1],[  
  2. function(module,exports,__webpack_require__){    
  3. eval(
  4.       ...      
  5. //# sourceURL=webpack:///./src/js/index.js?'
  6.     )
  7.   },  
  8. function(module,exports,__webpack_require__){    
  9. eval(
  10.       ...      
  11. //# sourceURL=webpack:///./src/static/css/app.less?./~/.npminstall/css-loader/0.23.1/css-loader!./~/.npminstall/postcss-loader/1.1.1/postcss-loader!./~/.npminstall/less-loader/2.2.3/less-loader'
  12.     )
  13.   },  
  14. function(module,exports,__webpack_require__){   
  15.  eval(
  16.       ...      
  17.  //# sourceURL=webpack:///./src/tmpl/appTemplate.tpl?"
  18.     )
  19.   },
  20. ...])
  • eval 模式会把每个 module 封装到 eval 里包裹起来执行，并且会在末尾追加注释。

5.4.2 source-map模式

  1. webpackJsonp([1],[  
  2. function(e,t,i){...},  
  3. function(e,t,i){...},  
  4. function(e,t,i){...},  
  5. function(e,t,i){...},
  6.   ...
  7. ])//# sourceMappingURL=index.js.map
  • 与此同时，你会发现你的 output 目录下多了一个 index.js.map 文件。
  1. {  
  2. "version":3,  
  3. "sources":[
  4.     "webpack:///js/index.js","webpack:///./src/js/index.js",    
  5.     "webpack:///./~/.npminstall/css-loader/0.23.1/css-loader/lib/css-base.js",
  6.     ...
  7. ],  
  8. "names":["webpackJsonp","module","exports"...], 
  9. "mappings":"AAAAA,cAAc,IAER,SAASC...",  
  10. "file":"js/index.js",  
  11. "sourcesContent":[...],  
  12. "sourceRoot":""
  13. }
  • 5.4.3 hidden-source-map

https://www.cnblogs.com/wangyingblog/p/7027540.html