轉(zhuǎn)載請(qǐng)注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack開發(fā)環(huán)境優(yōu)化：開發(fā)調(diào)試環(huán)境配置(source-map)

一、source-map配置詳解

• source-map： 種提供源代碼到構(gòu)建后代碼映射技術(shù)（如果構(gòu)建后代碼出錯(cuò)了，通過映射可以追蹤源代碼錯(cuò)誤)

  • 可選參數(shù)： [inline-|hidden-|eval-] [nosources-] [cheap-[module-]]source-map

• 例如:

  • source-map

    • 外部生成，在外部生成獨(dú)立的同名.map 文件。
    • 可以提示：
      • 錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置。
      • 錯(cuò)誤位置信息可以精確到某行某列。

  • inline-source-map

    • 內(nèi)聯(lián)生成,既映射的內(nèi)容在生成的 js 文件內(nèi)部，不獨(dú)立生成.map 文件。
    • 只生成一段內(nèi)聯(lián) source-map 內(nèi)容（集中生成）。
    • 可以提示：錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置。

  • hidden-shource-map

    • 外部生成，在外部生成獨(dú)立的同名.map 文件。
    • 可以提示：
      • 錯(cuò)誤代碼錯(cuò)誤信息，但是沒有錯(cuò)誤位置。
      • 不能追蹤到源代碼的錯(cuò)誤位置，只能提示到構(gòu)建后代碼的錯(cuò)誤位置。

  • eval-source-map

    • 同inline-source-map屬于內(nèi)聯(lián)生成。
    • 不同之處是在生成的 js 文件內(nèi)部，每一個(gè)加載進(jìn)來的 js 文件內(nèi)容，都會(huì)有一段獨(dú)立的 source-map 內(nèi)容。
    • 可以提示：錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置。

  • nosources-source-map

    • 外部生成，在外部生成獨(dú)立的同名.map 文件。
    • 可以提示：
      • 錯(cuò)誤代碼錯(cuò)誤信息，但是沒有任何源代碼信息（源代碼和構(gòu)建后代碼都沒有）。

  • cheap-source-map / cheap-module-source-map

    • 外部生成，在外部生成獨(dú)立的同名.map 文件。
    • 可以提示：
      • 錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置。
      • 錯(cuò)誤位置信息只精確到行，無法精確到列。

二、開發(fā)環(huán)境配置推薦

• 開發(fā)環(huán)境:速度快,調(diào)試更友好
  • 速度快(eval>inline>cheap>...）
    • 例如：eval-cheap-souce-map eval-source-map
  • 調(diào)試更友好
    • 例如：souce-map cheap-module-souce-map cheap-souce-map
  • 推薦選擇
    • eval-source-map 或 eval-cheap-module-souce-map
    • VUE默認(rèn)使用 eval -source-map 模式

三、生產(chǎn)環(huán)境配置推薦

• 生產(chǎn)環(huán)境:源代碼隱藏、文件體積小、調(diào)試友好
  • 內(nèi)聯(lián)會(huì)讓代碼體積變大，所以在生產(chǎn)環(huán)境不要用內(nèi)聯(lián)生成。
    • 推薦選擇
      • source-map 或 cheap-module-souce-map
  • 如要要考慮隱藏源代碼
    • 推薦選擇
      • hidden-source-map 或 nosources-source-map
        • hidden-source-map 只隱藏源代碼，會(huì)提示構(gòu)建后代碼錯(cuò)誤信息
        • nosources-source-map 全部隱藏

四、核心配置

/*
    webpack.config.js webpack的配置文件
    路徑： ./webpack.config.js
*/

// resolve用來拼接絕對(duì)路徑的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    // webpack配置
    // 入口起點(diǎn)文件
    entry: ['./src/js/index.js','./src/index.html'],
    // 輸出
    output: {
        // 輸出文件名
        filename: 'js/built.js',
        // 輸出路徑
        // __dirname nodejs的變量,代表當(dāng)前文件的目錄絕對(duì)路徑
        path: resolve(__dirname, 'build'),
    },
    // loader的配置
    module: {
        rules: [
            // 詳細(xì)loader配置
            //不同文件必須配置不同loader處理

            //打包less 文件的詳細(xì)loader配置
            {
                //匹配哪些文件
                test: /\.less$/,
                //使用哪些loader進(jìn)行處理
                use: [
                    // use數(shù)組中l(wèi)oader執(zhí)行順序:從右到左,從下到上依次執(zhí)行
                    //創(chuàng)建style標(biāo)簽,將js中的樣式資源插入進(jìn)行,添加到head中生效
                    'style-loader',
                    //將css文件變成commonjs模塊加載js中,里面內(nèi)容是樣式字符串
                    'css-loader',
                    //將less文件編譯成css文件
                    //需要下載less-loader和less
                    'less-loader'
                ]
            },
            // 打包 css 文件的詳細(xì)loader配置
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 使用哪些loader進(jìn)行處理
                use: [
                    // use數(shù)組中l(wèi)oader執(zhí)行順序:從右到左,從下到上依次執(zhí)行
                    // 創(chuàng)建style標(biāo)簽,將js中的樣式資源插入進(jìn)行,添加到head中生效
                    'style-loader',
                    // 將css文件變成commonjs模塊加載js中,里面內(nèi)容是樣式字符串
                    'css-loader',
                ],
            },
            {
                // 問題：默認(rèn)處理不了 html 中的 img 圖片
                // 處理圖片資源
                test: /\.(jpg|png|gif)$/,
                // 使用一個(gè)loader
                // 下載url-loader file-loader
                loader: 'url-loader',
                options: {
                    // 圖片大小小于8kb,就會(huì)被base64處理
                    // 優(yōu)點(diǎn):減少請(qǐng)求數(shù)量(減輕服務(wù)器壓力)
                    // 缺點(diǎn):圖片體積會(huì)更大(文件請(qǐng)求速度更慢)
                    limit: 8 * 1024,
                    // 問題:因?yàn)閡rl-loader默認(rèn)使用es6模塊化解析, 而html-loader默認(rèn)引入圖片是commonjs
                    // 解析時(shí)會(huì)出問題: [object Module]
                    // 解決:關(guān)閉url-loader的es6模塊化,使用commonjs解析
                    esModule: false,
                    // 給圖片進(jìn)行重命名
                    // [hash:10]取圖片的hash的前10位
                    // [ext]取文件原來擴(kuò)展名
                    name: '[hash:10].[ext]',
                    // 設(shè)置輸出目錄，將打包的圖片資源放到imgs文件夾
                    outputPath: './imgs',
                },
            },
            {
                test: /\.html$/,
                // 處理html文件的img圖片(負(fù)責(zé)引入img,從而能被url-loader進(jìn)行處理)
                loader: 'html-loader',
                options:
                {
                    // 默認(rèn)情況下,生成使用ES塊語法的Js模塊
                    // 問題:生成的圖片顯示錯(cuò)誤
                    // 解決: esModule改為false
                    esModule: false,
                },
            },
            {
                // 打包其他資源(除了html/js/css資源以外的資源)
                // 排除css/is/html資源
                exclude: /\.(css|js|html|less|jpg|png|gif)$/,
                loader: 'file-loader',
                options:
                {
                    // 給資源進(jìn)行重命名
                    // [hash:10]取資源的hash的前10位
                    // [ext]取文件原來擴(kuò)展名
                    name: '[hash:10]. [ext]',
                    // 設(shè)置輸出目錄，將打包的其他資源放到media 文件夾
                    outputPath: './media',
                },
            },
        ],
    },
    // plugins的配置
    plugins: [
        // 詳細(xì)的plugins配置
        // html-webpack-plugin
        // 功能:默認(rèn)會(huì)創(chuàng)建一個(gè)空的HTML, 自動(dòng)引入打包輸出的所有資源(JS/CSS)
        // 需求:需要有結(jié)構(gòu)的HTML文件
        new HtmlWebpackPlugin({
            // 復(fù)制../src/index.html'文件,并自動(dòng)引入打包輸出的所有資源(JS/CS5)
            template: './src/index.html',
        }),
    ],
    // 模式  development  開發(fā)環(huán)境，production 生產(chǎn)環(huán)境
    mode: 'development',
    // 生產(chǎn)環(huán)境下會(huì)自動(dòng)壓縮js代碼
    // mode: 'production'

    // 開發(fā)服務(wù)器devServer:用來自動(dòng)化(自動(dòng)編譯, 自動(dòng)打開瀏覽器, 自動(dòng)刷新瀏覽器)
    // 特點(diǎn):只會(huì)在內(nèi)存中編譯打包,不會(huì)有任何輸出
    // 啟動(dòng)devServer指令為: npx webpack-dev-server
    devServer: {
        // 項(xiàng)目構(gòu)建后路徑
        contentBase: resolve(__dirname, 'build'),
        // 啟動(dòng)gzip壓縮
        compress: true,
        // 端口號(hào)
        port: 3000,
        // 自動(dòng)打開瀏覽器
        open: true,
        // 開啟 HMR 功能
        // 當(dāng)修改了 webpack 配置，新配置要生效，必須重新啟動(dòng) webpack devServer
        hot: true,
    },
    devtool:'source-map'
};

核心配置

// 開啟 source-map 調(diào)試功能
// 生產(chǎn)環(huán)境推薦： source-map   模式
module.exports = {
 devtool:'source-map'
};

//  ====or=======
// 開發(fā)環(huán)境推薦：eval-source-map   模式
module.exports = {
 devtool:'eval-source-map'
};

五、示例項(xiàng)目

用于調(diào)試的項(xiàng)目

## 工程目錄如下
.
├── src
│   ├── css
│   │   ├── iconfont.css
│   │   └── index.less
│   ├── imgs
│   │   ├── img.jpg
│   │   ├── img1.jpg
│   │   ├── img2.jpg
│   │   └── img3.jpg
│   ├── index.html
│   ├── js
│   │   ├── iconfont.js
│   │   ├── index.js            //入口文件，加載了 myprint.js 依賴
│   │   └── myprint.js         //用來做錯(cuò)誤示范的 js 文件
│   └── media
│       ├── iconfont.json
│       └── iconfont.ttf
└── webpack.config.js

用來做錯(cuò)誤示范的 js 文件中的第 4 行放了兩行代碼，其中console.log(content)();有兩個(gè)括號(hào)【錯(cuò)誤】。

//用來做錯(cuò)誤示范的 myprint.js 文件

console.log('myprint.js文件被加載了。');

function myprint(){
    const content= 'hello myprint..**';console.log(content)();
}

export default myprint;

六、執(zhí)行測試

> npx webpack-dev-server