webpack-管理输出(source map,生成,清理)

正常这两个地方，我们得同步修改,

如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的名称，会发生什么？一起改,麻烦

生成的包将被重命名在一个构建中，但是我们的index.html文件仍然会引用旧的名字。我们用 HtmlWebpackPlugin 来解决这个问题。

 

 

1:安装:HtmlWebpackPlugin 

npm install --save-dev html-webpack-plugin

2:调整webpack.js

  const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Output Management'
+     })
+   ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

3:HtmlWebpackPlugin 还是会默认生成 index.html 文件

 

 

清理 /dist 文件夹:在每次构建前清理 /dist 文件夹，是比较推荐的做法

npm install clean-webpack-plugin --save-dev

题外话:一开始按照教程走 会报 CleanWebpackPlugin is not a constructor

// webpack版本：4.32.2
 
// 抛错原写法
const CleanWebpackPlugin = require("clean-webpack-plugin");
 
...
 
plugins: [
    new CleanWebpackPlugin(['dist'])
]
 
...
 
// 另一种错误写法
 
const CleanWebpackPlugin = require("clean-webpack-plugin");
 
...
 
plugins: [
    new CleanWebpackPlugin(['dist'], {
        root: path.resolve(__dirname, '../'),   //根目录
    })
]
 
...
 
// =============================分割线==============================
 
// 正确写法
 
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 
...
 
plugins: [
    new CleanWebpackPlugin()
]
 
...

 

 

 

Manifest:

你可能会感兴趣，webpack及其插件似乎“知道”应该哪些文件生成。答案是，通过 manifest，webpack 能够对「你的模块映射到输出 bundle 的过程」保持追踪。如果你对通过其他方式来管理 webpack 的输出更感兴趣，那么首先了解 manifest 是个好的开始。

通过使用 WebpackManifestPlugin，可以直接将数据提取到一个 json 文件，以供使用。

npm install --save-dev webpack-manifest-plugin

运行webpack 会生成manifest.json文件

{
  "app.js": "app.bundle.js",
  "print.js": "print.bundle.js",
  "logo.png": "457f704c8de0a8fa0064134423b9ed9c.png",
  "Sansation_Light.ttf": "7fd474bdd402506012409c78a7dc8ef4.ttf",
  "index.html": "index.html"
}