webpack 学习第3集 - 管理输出

准备

新增一个 print.js
并且在index.js中使用它
详见官网教程
练习Demo

设定 HtmlWebpackPlugin

在上面的步骤我们可以得到两个bundle.js文件，并在index.html中手动引入了它们
但每次这样会很麻烦，所以我们使用HtmlWebpackPlugin插件来帮我们

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

  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')
    }
  };

运行npm run build，查看编辑器里的代码，你会发现它们的变动，那是HtmlWebpackPlugin 创建了一个全新的文件，所有的 bundle 会自动添加到 html 中。

清理 /dist 文件夹

我们每次编译都会生成文件到/dist文件夹，但是并不是所有的文件都一直用到，现在我们使用clean-webpack-plugin插件来自动清理那些遗留的文件

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

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

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

执行 npm run build，再检查 /dist 文件夹。如果一切顺利，你现在应该不会再看到旧的文件，只有构建后生成的文件！

Manifest

• 概念

Git