526互联

webpack开发环境优化：开发调试环境配置(source-map)

发布时间 2023-08-21 00:32:54作者: 影乌

转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack开发环境优化：开发调试环境配置(source-map)

一、source-map配置详解

  • source-map： 种提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射可以追踪源代码错误)

    • 可选参数： [inline-|hidden-|eval-] [nosources-] [cheap-[module-]]source-map

  • 例如:

    • source-map

      • 外部生成，在外部生成独立的同名.map 文件。
      • 可以提示：
        • 错误代码准确信息和源代码的错误位置。
        • 错误位置信息可以精确到某行某列。

    • inline-source-map

      • 内联生成,既映射的内容在生成的 js 文件内部，不独立生成.map 文件。
      • 只生成一段内联 source-map 内容（集中生成）。
      • 可以提示：错误代码准确信息和源代码的错误位置。

    • hidden-shource-map

      • 外部生成，在外部生成独立的同名.map 文件。
      • 可以提示：
        • 错误代码错误信息，但是没有错误位置。
        • 不能追踪到源代码的错误位置，只能提示到构建后代码的错误位置。

    • eval-source-map

      • 同inline-source-map属于内联生成。
      • 不同之处是在生成的 js 文件内部，每一个加载进来的 js 文件内容，都会有一段独立的 source-map 内容。
      • 可以提示：错误代码准确信息和源代码的错误位置。

    • nosources-source-map

      • 外部生成，在外部生成独立的同名.map 文件。
      • 可以提示：
        • 错误代码错误信息，但是没有任何源代码信息（源代码和构建后代码都没有）。

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

      • 外部生成，在外部生成独立的同名.map 文件。
      • 可以提示：
        • 错误代码准确信息和源代码的错误位置。
        • 错误位置信息只精确到行，无法精确到列。

二、开发环境配置推荐

  • 开发环境:速度快,调试更友好
    • 速度快(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
      • VUE默认使用 eval -source-map 模式

三、生产环境配置推荐

  • 生产环境:源代码隐藏、文件体积小、调试友好
    • 内联会让代码体积变大，所以在生产环境不要用内联生成。
      • 推荐选择
        • source-map 或 cheap-module-souce-map
    • 如要要考虑隐藏源代码
      • 推荐选择
        • hidden-source-map 或 nosources-source-map
          • hidden-source-map 只隐藏源代码，会提示构建后代码错误信息
          • nosources-source-map 全部隐藏

四、核心配置

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

// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    // webpack配置
    // 入口起点文件
    entry: ['./src/js/index.js','./src/index.html'],
    // 输出
    output: {
        // 输出文件名
        filename: 'js/built.js',
        // 输出路径
        // __dirname nodejs的变量,代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build'),
    },
    // loader的配置
    module: {
        rules: [
            // 详细loader配置
            //不同文件必须配置不同loader处理

            //打包less 文件的详细loader配置
            {
                //匹配哪些文件
                test: /\.less$/,
                //使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序:从右到左,从下到上依次执行
                    //创建style标签,将js中的样式资源插入进行,添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader',
                    //将less文件编译成css文件
                    //需要下载less-loader和less
                    'less-loader'
                ]
            },
            // 打包 css 文件的详细loader配置
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序:从右到左,从下到上依次执行
                    // 创建style标签,将js中的样式资源插入进行,添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader',
                ],
            },
            {
                // 问题：默认处理不了 html 中的 img 图片
                // 处理图片资源
                test: /\.(jpg|png|gif)$/,
                // 使用一个loader
                // 下载url-loader file-loader
                loader: 'url-loader',
                options: {
                    // 图片大小小于8kb,就会被base64处理
                    // 优点:减少请求数量(减轻服务器压力)
                    // 缺点:图片体积会更大(文件请求速度更慢)
                    limit: 8 * 1024,
                    // 问题:因为url-loader默认使用es6模块化解析, 而html-loader默认引入图片是commonjs
                    // 解析时会出问题: [object Module]
                    // 解决:关闭url-loader的es6模块化,使用commonjs解析
                    esModule: false,
                    // 给图片进行重命名
                    // [hash:10]取图片的hash的前10位
                    // [ext]取文件原来扩展名
                    name: '[hash:10].[ext]',
                    // 设置输出目录，将打包的图片资源放到imgs文件夹
                    outputPath: './imgs',
                },
            },
            {
                test: /\.html$/,
                // 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
                loader: 'html-loader',
                options:
                {
                    // 默认情况下,生成使用ES块语法的Js模块
                    // 问题:生成的图片显示错误
                    // 解决: esModule改为false
                    esModule: false,
                },
            },
            {
                // 打包其他资源(除了html/js/css资源以外的资源)
                // 排除css/is/html资源
                exclude: /\.(css|js|html|less|jpg|png|gif)$/,
                loader: 'file-loader',
                options:
                {
                    // 给资源进行重命名
                    // [hash:10]取资源的hash的前10位
                    // [ext]取文件原来扩展名
                    name: '[hash:10]. [ext]',
                    // 设置输出目录，将打包的其他资源放到media 文件夹
                    outputPath: './media',
                },
            },
        ],
    },
    // plugins的配置
    plugins: [
        // 详细的plugins配置
        // html-webpack-plugin
        // 功能:默认会创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
        // 需求:需要有结构的HTML文件
        new HtmlWebpackPlugin({
            // 复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
            template: './src/index.html',
        }),
    ],
    // 模式  development  开发环境，production 生产环境
    mode: 'development',
    // 生产环境下会自动压缩js代码
    // mode: 'production'

    // 开发服务器devServer:用来自动化(自动编译, 自动打开浏览器, 自动刷新浏览器)
    // 特点:只会在内存中编译打包,不会有任何输出
    // 启动devServer指令为: npx webpack-dev-server
    devServer: {
        // 项目构建后路径
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open: true,
        // 开启 HMR 功能
        // 当修改了 webpack 配置，新配置要生效，必须重新启动 webpack devServer
        hot: true,
    },
    devtool:'source-map'
};

核心配置

// 开启 source-map 调试功能
// 生产环境推荐： source-map   模式
module.exports = {
 devtool:'source-map'
};

//  ====or=======
// 开发环境推荐：eval-source-map   模式
module.exports = {
 devtool:'eval-source-map'
};

五、示例项目

用于调试的项目

## 工程目录如下
.
├── 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         //用来做错误示范的 js 文件
│   └── media
│       ├── iconfont.json
│       └── iconfont.ttf
└── webpack.config.js

用来做错误示范的 js 文件中的第 4 行放了两行代码，其中console.log(content)();有两个括号【错误】。

//用来做错误示范的 myprint.js 文件

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

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

export default myprint;

六、执行测试

> npx webpack-dev-server