output配置
最后更新于：2022-04-02 05:32:27
## 前言
了解了入口配置之后，我们必要要知道webpack产出的配置，因为入口文件的配置必然会导致产出有一定的联动影响。
## 基本语法
基本的产出需要配置一个文件名，一个文件输出路径。如下的配置会将单个bundle.js文件输出到/home/proj/public/assets目录中。
~~~
const config = {
output: {
filename: 'bundle.js',
path: '/home/proj/public/assets'
}
};
~~~
## 一些配置案例
~~~
module.exports = {
// ...
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
}
// 或者多个入口生成不同文件
module.exports = {
entry: {
foo: './src/foo.js',
bar: './src/bar.js',
},
output: {
filename: '[name].js',
path: __dirname + '/dist',
},
}
// 路径中使用 hash，每次构建时会有一个不同 hash 值，避免发布新版本时线上使用浏览器缓存
module.exports = {
// ...
output: {
filename: '[name].js',
path: __dirname + '/dist/[hash]',
},
}
~~~
## vue-cli 中webpack output配置
~~~
//webpack.base.conf，不了解可以去看下增加的chunkFilename publicPath字段的含义
output: {
path: config.build.assetsRoot,
filename: '[name].js',
chunkFilename: '[name].bundle.js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
// dev 配置
//prod 配置
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
//assetsPath 配置 这个配置是指打包后资源的文件夹，assetsPublicPath是配置的资源路径与页面文件的相对位置关系。
exports.assetsPath = function (_path) {
var assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
//然后我们在config/index.js中查到了其两个环境的配置
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
}，
dev{
assetsSubDirectory: 'static',
assetsPublicPath: '/',
}
~~~
## 高级使用
如果你的文件地址需要根据不同环境配置域名地址以及相对路径地址，你也可以自定义的在config prod或者pre、test环境中定义自己需要加的资源前缀：
~~~
// 带配置域名以及路径名
assetsPublicPath: require('./prod.env').bucketInfo.host+require('./prod.env').bucketInfo.dest,
//然后再config/prod.env中配置是这样的
module.exports = {
NODE_ENV: '"production"',
bucketInfo:{
"host": "http://xxx",//bucket域名
"dest": "/**",//bucket目录
},
}
~~~
## 更多配置
待补充。。。
## 参考文档
- webpack官网介绍
- vue-cli项目结构
- 掘金webpack小册
';