webpack 打包多页应用和sourcemap 使用

Posted 2020-11-29 WindEyes

打包多页应用

首先在src下创建两个js文件，index.js和other.js

接着进行配置，利用[]配置打包出口的文件名，这是一个变量，执行build之后可以看到dist目录下有两个js文件

此时[name]打包出来的是home.js和other.js因为入口文件给的键就是这两个

let path = require(‘path‘)
module.exports ={
    mode:‘development‘,
    //多入口
    entry:{
        home:‘./src/index.js‘,
        other:‘./src/other.js‘
    },
    output:{
        filename:‘[name].js‘,
        path:path.resolve(__dirname,‘dist‘)
    }
}

接着写一个html文件，并借用html-webpack-plugin进行注入

需要两个文件，于是需要两个html-webpack-plugin对象

plugins配置如下

plugins:[
    new HtmlWebpackPlugin({
        template:‘./src/index.html‘,
        filename:‘index.html‘
    }),
    new HtmlWebpackPlugin({
        template:‘./src/index.html‘,
        filename:‘other.html‘
    })
]

这样打包可以配置出两个文件，index.html和other.html

但是查看文件的时候可以发现，这两者都同时引用了index.js和other.js

此时需要给一个chunks属性，此时文件就各自引用各自对应的代码块

let path = require(‘path‘)
let HtmlWebpackPlugin  =require(‘html-webpack-plugin‘)
module.exports ={
    mode:‘development‘,
    //多入口
    entry:{
        home:‘./src/index.js‘,
        other:‘./src/other.js‘
    },
    output:{
        filename:‘[name].js‘,
        path:path.resolve(__dirname,‘dist‘)
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:‘./src/index.html‘,
            filename:‘index.html‘,
            chunks:[‘home‘] //看入口文件来配置
        }),
        new HtmlWebpackPlugin({
            template:‘./src/index.html‘,
            filename:‘other.html‘,
            chunks:[‘other‘]
        })
    ]

}

source-map

配置devtool使得在出错的时候可以查看具体是哪个文件出错

不会产生列的两个试了下，其实可以产生列（目前还未深究，日后研究）

  // devtool:‘source-map‘,//增加映射文件
    // devtool:‘eval-source-map‘,//不会产生单独的文件，但能显示行和列
    //  devtool:‘cheap-module-source-map‘,//不会产生列，但是是一个单独的映射文件
   // devtool:‘cheap-module-eval-source-map‘,//不会产生文件 集成在打包后的文件中， 不会产生列