Webpack：entry、output、devtools的配置（6）

entry和output

const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: {
        //多文件入口
        main:'./src/index.js',
        subMain:'./src/index.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new CleanWebpackPlugin()
    ],
    output: {
        //根据entry的key名字进行打包
        filename: '[name].js',
        //此输出目录对应的公开 URL，如：http://www.baidu.com/main.js
        publicPath:'http://www.baidu.com',
        path: path.resolve(__dirname, 'dist')
    }
};

devtool

阅读参考：devtool

const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    //none:生成环境，不需要生成source map，也无法查看具体的代码错误在哪
    //source-map:默认，生成一个map文件与源文件对应，可以具体知道错误在哪，但耗费打包性能
    //cheap-module-eval-source-map:通常在开发环境里使用，包含第三方的module错误，精确到代码错误行
    //nosources-source-map：生产环境，实在要看代码错误在哪就开启，会暴露反编译后的文件名和结构，但它不会暴露原始代码。
    devtool: 'inline-source-map',
    entry: {
        main: './src/index.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new CleanWebpackPlugin()
    ],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
};