webpack 打包多页应用和sourcemap 使用

Posted WindEyes

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack 打包多页应用和sourcemap 使用相关的知识,希望对你有一定的参考价值。

打包多页应用

首先在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.htmlother.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‘,//不会产生文件 集成在打包后的文件中, 不会产生列

以上是关于webpack 打包多页应用和sourcemap 使用的主要内容,如果未能解决你的问题,请参考以下文章

Webpack构建多页应用Mpa:文件结构和自动化打包

Webpack构建多页应用Mpa:提取公共jscsshtml代码,实现图片字体单独打包,拆分多环境配置文件

Webpack构建多页应用Mpa:实现基础框架,单独打包样式文件

reverse-sourcemap反编译webpack打包的.map类型文件

reverse-sourcemap反编译webpack打包的.map类型文件

webpack使用三