基础配置 - Entry 和 Output 的基础配置 - 《前端工程化利器 Webpack4》

打包多文件配置
将资源文件放到 CDN
清理 dist 文件夹

Webpack中文文档：
输出(output) | webpack 中文文档

首先我们来看一下Webpack的基本配置：

module.exports = {
  // ...
  // entry 可以简写为：
  // entry: "./src/index.js"
  entry: {
    "main": "./src/index.js"
  },
  output: {
    // 如果没有配置 filename，output 就会找 entry 对象下的 key 值作为文件名
    // 也就是 main
    filename: 'main.js', 
    path: path.resolve(__dirname, "dist")
  },
  // ...
}

打包多文件配置

假设我们在entry配置了多个入口，output却只有一个输出，这个时候编译就会报错：

module.exports = {
  // ...
  entry: {
    main: "./src/index.js",
    sub: "./src/index.js"
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, "dist")
  },
  // ...
}

这个时候我们就需要配置output为多出口：


module.exports = {
  entry: {
    main: "./src/index.js",
    sub: "./src/index.js"
  },
  output: {
    // 使用占位字符，name 指的是 entry 对象入口文件的文件名
    filename: '[name].js', 
    path: path.resolve(__dirname, "dist")
  }
}

将资源文件放到 CDN

假设我们想把资源文件放到cdn的时，index.html就要去引入该如何配置呢？

module.exports = {
  // ...
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, "dist"),
    // http://cdn.com/是虚拟的地址
    publicPath: "http://cdn.com/"Ï
  },
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 引入 CDN 地址 -->
    <script src="http://cdn.com/main.js"></script>
  </body>
</html>

更多webpack.output的配置：
Output | webpack 中文文档

清理 dist 文件夹

目前我们每次打包的时候都需要手动删除dist产出的文件，那么如果让Webpack每次打包的时候自动删除这个文件夹呢？

有以下两种办法：
1、使用cleanwebpackplugin
GitHub - johnagan/clean-webpack-plugin: A webpack plugin to remove your build folder(s) before building
2、配置 output
管理输出 | webpack 中文文档

module.exports = {
  // ...
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    // 清除
    clean: true
  },
  // ...
}