【webpack5修行之道】第19篇: 详细介绍ouput_webpack5 librarytarget-优快云博客

本文链接：https://blog.youkuaiyun.com/j178202798/article/details/117992032

一般来说需要配置path和filename

path的作用是告诉webpack,将所有资源输出到哪个目录

filename作用是输出js的文件名称

修改webpack.config.js的output，如下

output: {
    //输出的文件目录，所有资源输出的公共目录
    path: resolve(__dirname, 'build'),
    //文件名称
    filename: 'js/[name].[hash:10].js',
}

运行打包命令：npm run build

添加publicPath,他的作用是所有资源引入的公共前缀，一般生成环境才需要，如果配置为/，就是查找服务器根路径下的资源。如果不配就是相对路径

修改webpack.config.js ouput

 output: {
    //输出的文件目录，所有资源输出的公共目录
    path: resolve(__dirname, 'build'),
    //文件名称
    filename: 'js/[name].[hash:10].js',
    //所有资源引入的公共路径前缀 -> imgs/a.jpg --> /imgs/a.jpg
    publicPath: '/'
}

可以看到引入路径前面多了个/

再添加chunkFilename配置，他的作用是设定非入口chunk文件的名称

增加一个chunk文件，修改index.js，改为懒加载引入math.js

运行打包命令

得到了math这个chunk的js

此时修改webpack.config.js

  output: {
    //输出的文件目录，所有资源输出的公共目录
    path: resolve(__dirname, 'build'),
    //文件名称
    filename: 'js/[name].[hash:10].js',
    //所有资源引入的公共路径前缀 -> imgs/a.jpg --> /imgs/a.jpg
    publicPath: '/',
    // //非入口chunk的名称
    chunkFilename: 'js/[name]_chunk.js',
}

非入口chunk，名字就改变了

library的作用是，自己将作为包，供外界引入使用，此时暴露给外界的名称

  output: {
    //输出的文件目录，所有资源输出的公共目录
    path: resolve(__dirname, 'build'),
    //文件名称
    filename: 'js/[name].[hash:10].js',
    //所有资源引入的公共路径前缀 -> imgs/a.jpg --> /imgs/a.jpg
    publicPath: '/',
    // //非入口chunk的名称
    chunkFilename: 'js/[name]_chunk.js',
    // //向外暴露的变量名称，外界引入这个js就能使用到这个变量
    library: '[name]',
}

运行打包命令，查看main.js，可以看到他向外界暴露的名字为main

libraryTarget的作用是，自己作为包的时候，以何种方式暴露给外面，也就是打包方式，

修改webpack.config.js

 output: {
    //输出的文件目录，所有资源输出的公共目录
    path: resolve(__dirname, 'build'),
    //文件名称
    filename: 'js/[name].[hash:10].js',
    //所有资源引入的公共路径前缀 -> imgs/a.jpg --> /imgs/a.jpg
    publicPath: '/',
    //非入口chunk的名称
    chunkFilename: '[name]_chunk.js',
    //向外暴露的变量名称，外界引入这个js就能使用到这个变量
    library: '[name]',
    //包被使用的方式
    libraryTarget: 'window' //"var" | "assign" | "this" | "window" | "self" | "global" | "commonjs" | "commonjs2" | "commonjs-module" | "amd" | "amd-require" | "umd" | "umd2" | "jsonp" | "system"

  }

运行打包命令，查看main.js