多入口 和多出口打包 source-map

多入口 和多出口打包 source-map

1. 作用 增加映射文件 可以帮我们调试源代码
2. 使用

let  path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports ={
    mode:'development',
    //多入口
    entry:{
        home:'./src/index.js',
        // other:'./src/other.js'
    },
    devtool:'cheap-module-source-map', //增加映射文件 可以帮我们调试源代码
    // 1) 源码映射 会生成一个单独的source-map 文件
    // 2) 不会生成单独的文件 但是可以显示列和行 devtool:'eval-source-map',
    // 3) devtool:'cheap-module-source-map', 不会产生列 会生成一个单独的source-map 文件
    output:{
        // 多出口
        filename:'[name].js',
        path:path.resolve(__dirname,'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'index.html',
            // chunks:['home','other'] //打包那个js
        }),
        // new HtmlWebpackPlugin({
        //     template:'./index.html',
        //     filename:'other.html',
        //     chunks:['home']
        // })
    ],
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/, //排除
                use:{
                loader:'babel-loader',
                options:{ // 需要把es6 转es5
                    presets:['@babel/preset-env'],
                    }
                }
            }
        ]
    }
}