webpack学习系列三（https://webpack.js.org/concepts/output/）

Output

EDIT DOCUMENT

output配置告诉webpack如何将编译过的文件写入磁盘。虽然有很多中入口设置，但是只有一种ouput设置。

Usage

output最简单的设置如下，将包含有filename和path属性的对象赋值给output

webpack.config.js

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;

以上设置，将压缩后的bundle.js写入/home/proj/public/assets路径中

Multiple Entry Points

如果你的配置生成了多于一个chunk，那么，你应该使用变量代替，以确保每个文件都有唯一的名字。

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// writes to disk: ./dist/app.js, ./dist/search.js

Advanced

下面是一些更复杂的情形：

config.js

output: {
  path: "/home/proj/cdn/assets/[hash]",
  publicPath: "http://cdn.example.com/assets/[hash]/"
}

In cases when the eventual publicPath of output files isn't known at compile time, it can be left blank and set dynamically at runtime in the entry point file. If you don't know the publicPath while compiling, you can omit it and set __webpack_public_path__ on your entry point.

__webpack_public_path__ = myRuntimePublicPath

// rest of your application entry