## 前言 了解了入口配置之后，我們必要要知道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小冊