当前位置 > it书童 > webpack > 正文
推荐小册
java高效编程
怎样更高效地用 java 编程

juc并发工具库
java并发编程工具库

设计模式
设计模式

jvm调优
jvm调优

rabbitmq实战
rabbitmq实战

redis实战
redis实战

Keepavlied高可用集群
Keepavlied高可用集群

nginx入门到实战
nginx入门到实战

java调试
java调试中遇到的各种坑

java输入输出流
java输入输出流

webpack 的 entry 与 output

webpack it书童 2020-02-08 10:58:35 0赞 0踩 500阅读 0评论

entry 指打包的目标文件, output 指生成的文件

entry: './src/index.js',
// 是对以下形式的简写
// entry: {
//     main: './src/index.js'
// },
// ...
output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
}

需求:将同个文件打包成两个不同命名的文件,且引入的 js 文件前加上 http://cdn.com 前缀,线上的资源放到 cdn 速度会更快

entry: {
    // 同个文件打包两次,一次为 main.js 一次为 sub.js
    // 此时在 output 中就不能只指定为一个文件
    main: './src/index.js',
    sub: './src/index.js'
},

output: {
    // 添加前缀
    publicPath: 'http://cdn.com',
    // 占位符指定文件名称
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
}

生成的结果为:

<!-- ... -->
<script type="text/javascript" src="http://cdn.com/main.js"></script><script type="text/javascript" src="http://cdn.com/sub.js"></script></body>
<!-- ... -->
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
转载须注明出处:https://www.itshutong.com/articles/418/the-entry-and-output-of-web-pack