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
错误代码准确信息 和 源代码的错误位置
nosources-source-map：外部
错误代码准确信息，但是没有任何源代码信息
作用：为了隐藏源代码而生
cheap-source-map：外部
错误代码准确信息 和 源代码的错误位置
只能精确到行
cheap-module-source-map：外部
错误代码准确信息 和 源代码的错误位置
module会将loader的source map因引入

内联和外部的区别：1.外部生成了文件。内联没有 2.内联构建速度更快

开发环境：速度快，调试更友好<br />    速度快（eval>inline>cheap>...）<br />        eval-cheap-souce-map<br />        eval-source-map<br />    调试更友好：<br />        source-map<br />        cheap-module-souce-map<br />        cheap-souce-map
--> eval-source-map / eval-cheap-module-souce-map<br />    <br />    生产环境：源代码要不要隐藏？调试要不要友好<br />        内联会让代码体积更大，所以生产环境不用内联<br />        nosources-source-map    全部隐藏<br />        hidden-source-map   只隐藏构建后代码错误信息
-->source-map/cheap-module-source-map

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,
                //输出文件到imgs文件夹
                   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]',
                   //输出文件到media文件夹
                   outputPath:'media'
                }
            },
        ]
    },
    plugins:[
        //plugins的配置
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development',
    devServer:{
        contentBase:resolve(__dirname,'build'),
        compress:true,
        port:8080,
        open:true,
        //开启HMR功能
        //当修改了webpack配置，想要新配置生效，必须重启webpack服务
        hot:true
    },
    devtool:'eval-source-map'
}