webpack4.29.x成神之路（四） entry與output

目錄

上節： 基本配置與mode
目錄結構以下：

本節將重點講解entry和output的經常使用配置。

1、entry

先跟新webpack.config.js，將output刪除：
webpack.config.js:

module.exports = {
  mode: 'production',
  entry: './src/index.js'
};

而後執行：npm run build

在根目錄下生成了dist目錄，而且打包後的文件名爲main.js。
那麼問題來了，這個文件名是依據什麼生成的呢？

複製一份src下的index.js, 並更名爲main.js:

修改配置文件，增長一個入口
webpack.config.js:

module.exports = {
  mode: 'production',
  entry: {
    index: './src/index.js',
    main: './src/main.js'
  }
};

而後 npm run build

在生成的dist文件夾中，就會有兩個js文件，main.js和index.js。
因此能夠初步認爲，打包後的文件名默認等於入口文件的名稱，也就是entry的key值
這個key值在webpack中設定爲入口文件的 [name]和[id].

以前的這種寫法：

entry: './src/index.js'

至關於：

entry: {
  main: './src/index.js'
}

2、output

先將剛纔打包dist目錄和src下的main.js刪除

增長出口配置：
webpack.config.js:

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  }
};

執行npm run build
此時dist目錄下生成的文件名爲bundle.js

輸出的文件名默認取entry的key值，也能夠經過filename修改。

也就是說，filename的默認配置是：

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].js'    // 同[id].js
  }
};

filename能夠自由組合：

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js'    // main.bundle.js
  }
};

也能夠經過filename改變文件的存放路徑，好比將文件打包放入入js文件夾中
webpack.config.js:

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'js/[name].bundle.js'
  }
};

而後 npm run build
main.bundle.js就會在dist/js 下。

hash、chunkhash與contenthash

爲了利用瀏覽器緩存的特性，咱們一般但願只要文件內容有變化，就生成不一樣的文件名，用hash就能實現這個需求

hash

每次修改任何一個文件，全部文件名的hash至都將改變。因此一旦修改了任何一個文件，整個項目的文件緩存都將失效
配置以下：

webpack.config.js：

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[hash].js'
  }
};

而後 npm run build
生成的文件名以下：

這樣只要入口文件（index.js）改變，每次打包生成的hash都不一樣。
也能夠限制hash長度：

webpack.config.js：

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[hash:8].js'
  }
};

npm run build後的文件名以下：

chunkhash

在項目中有許多代碼是基本不變的，好比第三方庫jquery、lodash等，這些代碼將被單獨拆分出來生成單獨的文件，這就是所謂的chunk。
這裏涉及到代碼分割相關內容，暫時瞭解便可，後續會詳細講到。

使用示例：
webpack.config.js：

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[chunkhash:8].js'
  }
};

contenthash

contenthash是針對文件內容的，只更新內容有變化的入口文件的hash值
如今新增一個入口，複製index.js並更名爲main.js

src/main.js和src/index.js內容以下

window.addEventListener('DOMContentLoaded', function() {
  const root = document.getElementById('root');
  root.innerHTML = _.join(['Hello', 'webpack'], ' ');
});

使用contenthash
webpack.config.js：

module.exports = {
  mode: 'production',
  entry: {
    index: './src/index.js',
    main: './src/main.js'
  },
  output: {
    filename: '[name].[contenthash:8].js'
  }
};

npm run build 打包生成以下：

而後修改src/main.js:

window.addEventListener('DOMContentLoaded', function() {
  const root = document.getElementById('root');
  root.innerHTML = _.join(['webpack4', 'is', 'powerful'], ' ');
});

再次打包：

能夠看到只改變了main.js的hash值。因此contenthash也是推薦使用的

path

默認的輸出目錄是dist文件夾，能夠經過path屬性修改，
path建議設置絕對路徑，好比將打包後的代碼放在bundles目錄下
webpack.config.js：

const { resolve } = require('path');

module.exports = {
  mode: 'production',
  entry: {
    index: './src/index.js',
    main: './src/main.js'
  },
  output: {
    filename: '[name].[contenthash:8].js',
    path: resolve(__dirname, 'bundles')
  }
};

npm run build, 這樣就會代碼就會放在bundles目錄了

下節：使用plugins