source-map · 前端

webpack.config.js ``` const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: ['./src/js/index.js', './src/index.html'], output: { filename: 'js/built.js', path: resolve(__dirname, 'build') }, module: { rules: [ // loader的配置 { // 处理less资源 test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, { // 处理css资源 test: /\.css$/, use: ['style-loader', 'css-loader'] }, { // 处理图片资源 test: /\.(jpg|png|gif)$/, loader: 'url-loader', options: { limit: 8 * 1024, name: '[hash:10].[ext]', // 关闭es6模块化 esModule: false, outputPath: 'imgs' } }, { // 处理html中img资源 test: /\.html$/, loader: 'html-loader' }, { // 处理其他资源 exclude: /\.(html|js|css|less|jpg|png|gif)/, loader: 'file-loader', options: { name: '[hash:10].[ext]', outputPath: 'media' } } ] }, plugins: [ // plugins的配置 new HtmlWebpackPlugin({ template: './src/index.html' }) ], mode: 'development', devServer: { contentBase: resolve(__dirname, 'build'), compress: true, port: 3000, open: true, hot: true }, //source-map只需要添加devtool选项就ok devtool: 'eval-source-map' }; /* source-map: 一种提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射可以追踪源代码错误） devtool可可选参数： [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map source-map：外部错误代码准确信息和源代码的错误位置 inline-source-map：内联只生成一个内联source-map 错误代码准确信息和源代码的错误位置 hidden-source-map：外部错误代码错误原因，但是没有错误位置不能追踪源代码错误，只能提示到构建后代码的错误位置 eval-source-map：内联每一个文件都生成对应的source-map，都在eval 错误代码准确信息和源代码的错误位置 nosources-source-map：外部错误代码准确信息, 但是没有任何源代码信息 cheap-source-map：外部错误代码准确信息和源代码的错误位置只能精确的行 cheap-module-source-map：外部错误代码准确信息和源代码的错误位置 module会将loader的source map加入内联和外部的区别：1. 外部生成了文件，内联没有 2. 内联构建速度更快开发环境：速度快，调试更友好速度快(eval>inline>cheap>...) eval-cheap-souce-map eval-source-map 调试更友好 souce-map cheap-module-souce-map cheap-souce-map --> eval-source-map / eval-cheap-module-souce-map 生产环境：源代码要不要隐藏? 调试要不要更友好内联会让代码体积变大，所以在生产环境不用内联 nosources-source-map 全部隐藏 hidden-source-map 只隐藏源代码，会提示构建后代码错误信息 --> source-map / cheap-module-souce-map */ ``` srcj/s/index.js ``` // 引入 import print from './print'; import '../css/iconfont.css'; import '../css/index.less'; console.log('index.js文件被加载了~'); print(); function add(x, y) { return x + y; } console.log(add(1, 3)); if (module.hot) { // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效 module.hot.accept('./print.js', function() { // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。 // 会执行后面的回调函数 print(); }); } ``` src/index.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>开发环境配置</title> </head> <body> <h1>开发环境配置~~~</h1> <span class="iconfont icon-icon-test"></span> <span class="iconfont icon-icon-test2"></span> <span class="iconfont icon-icon-test3"></span> <span class="iconfont icon-icon-test1"></span> <div id="box"></div> <img src="./imgs/vue.jpg" alt="vue"> <img src="./imgs/react.png" alt="react"> </body> </html> ``` src/js/print.js ``` console.log('print.js被加载了~'); function print() { const content = 'hello print'; console.log(content)(); } export default print; ``` src/css/index.less ``` #box { width: 200px; height: 200px; background-image: url('../imgs/angular.jpg'); background-repeat: no-repeat; background-size: 100% 100%; } ``` src/css/iconfont.css ``` ... ``` src/imgs/ ![](https://img.kancloud.cn/51/14/5114dab8150f39bb5b53e34a8e895880_350x133.png) src/media/ ![](https://img.kancloud.cn/e4/68/e4689f3a016db0213a3caeae9c1b2f4c_132x102.png)