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)