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

最新推荐文章于 2024-07-18 05:12:21 发布

黑卡米

最新推荐文章于 2024-07-18 05:12:21 发布

阅读量167

点赞数

分类专栏： Webpack 文章标签： webpack

本文链接：https://blog.csdn.net/Aaren_Jiang/article/details/108916538

版权

Webpack 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文深入解析Webpack的配置项，包括entry入口设置、output输出配置以及devtool源码映射选项。entry支持多文件入口，output详细说明了打包文件的命名、路径及公共URL。devtool讲解了不同模式下源码映射的使用场景，帮助开发者在开发过程中更好地定位错误。

摘要由CSDN通过智能技术生成

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')
    }
};