Welcome to wechat public account: Front Reading Room

You can configure the Output option to tell WebPack how to write compilation files to hard disk. Note that even though more than one entry starting point can exist, only one output configuration can be specified.

usage

In the Webpack configuration, the minimum requirement for the output property is to set its value to an object and then configure the filename of the output file to an output.filename:

webpack.config.js

module.exports = {
  output: {
    filename: 'bundle.js',}};Copy the code

This configuration outputs a single bundle.js file to the dist directory.

Multiple entry points

If more than one “chunk” is created in a configuration (for example, using multiple entry points or using a plug-in like CommonsChunkPlugin), substitutions should be used to ensure that each file has a unique name.

module.exports = {
  entry: {
    app: './src/app.js'.search: './src/search.js',},output: {
    filename: '[name].js'.path: __dirname + '/dist',}};// Write to disk:./dist/app.js,./dist/search.js
Copy the code

Senior advanced

Here is a complex example of using CDN and hash for resources:

config.js

module.exports = {
  / /...
  output: {
    path: '/home/proj/cdn/assets/[fullhash]'.publicPath: 'https://cdn.example.com/assets/[fullhash]/',}};Copy the code

If the publicPath address of the final output file is not known at compile time, it can be left blank and set dynamically at run time through __webpack_public_path__ in the entry start file.

__webpack_public_path__ = myRuntimePublicPath;

// The rest of the application entry
Copy the code

Welcome to wechat public account: Front Reading Room