webpack 之开发环境优化 source-map

/**

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

 * [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：外部

            错误代码准确信息 和 源代码的错误位置

        内联和外部的区别：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

 */

const {resolve} = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

// 代码复用loader

const commonCssLoader = [

    // 创建 style 标签，将js中的样式资源插入进行，添加到 head 中生效

    'style-loader',

    // 将css文件变成commonjs 模块加载js中， 里面内容是样式字符串

    'css-loader'

]

module.exports = {

    // webpack 配置

    // 入口起点

    entry : ['./src/index.js', './src/index.html'],

    // 输出

    output : {

        // 输出文件名

        filename : 'js/built.js',

        // 输出路径

        path : resolve(__dirname, 'dist')

    },

    // loader 配置

    module : {

        rules : [

            {

                test : /\.css$/, // 匹配哪些文件

                //使用哪些 loader 进行处理

                use: [

                    // use 数组中的 loader 执行顺序：从右到左，从下到上依次执行

                    ...commonCssLoader

                ]

            },

            {

                test : /\.less$/,

                use: [

                    ...commonCssLoader,

                    'less-loader'

                ]

            },

            {

                test : /\.html$/,

                loader : 'html-loader'

            }

        ]

    },

    // plugins 的配置

    plugins : [

        // 详细 plugins 的配置

        // html-webpack-plugin

        // 功能：默认会创建一个空的html文件，自动引入打包输出的所有资源（js/css）

        new HtmlWebpackPlugin({

            // 增加一个配置

            // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）

            template : './src/index.html',

        }),

    ],

    //模式

    mode : 'development', // 开发模式

    // mode : 'production' // 生产模式

    devServer: {

        // 项目构建后的路径

        contentBase : resolve(__dirname, 'dist'),

        // 启动 gzip 压缩

        compress : true,

        // 端口号

        port : 3000,

        // 自动打开本地默认浏览器

        open : true,

        // 开启 HMR 功能

        hot: true

    },

    devtool: 'source-map'

}
巴特西

webpack 之开发环境优化 source-map

webpack 之开发环境优化 source-map

最新文章

热门文章
