webpack - 输出管理

一旦在文件名中使用哈希并输出多个包时,将很难继续手动管理index.html文件,
但是一些插件可以使这个过程更易于管理。

1. 手动管理输出

webpack.config.js

const path = require('path');

 module.exports = {
  entry: './src/index.js',
  entry: {
    index: './src/index.js',
    print: './src/print.js',
  },
   output: {
    filename: 'bundle.js',
    filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
 };

dist/index.html

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
    <title>Output Management</title>
    <script src="./print.bundle.js"></script>
   </head>
   <body>
    <script src="./index.bundle.js"></script>
   </body>
 </html>

src/index.js

import _ from 'lodash';
import printMe from './print.js';

 function component() {
   const element = document.createElement('div');
  const btn = document.createElement('button');

   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  btn.innerHTML = 'Click me and check the console!';
  btn.onclick = printMe;

  element.appendChild(btn);

   return element;
 }

 document.body.appendChild(component());

src/print.js

export default function printMe() {
  console.log('I get called from print.js!');
}

2. 使用HtmlWebpackPlugin 管理输出

使用html-webpack-plugin 插件会自动生成dist/index.html文件,并自动增加打包文件到html中。
设置out.clean 为true,每次打包编译的时候会清空dist目录里的文件。

  • 安装html-webpack-plugin 插件

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

  • 配置webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

参考:https://webpack.js.org/guides/output-management/

posted @   箫笛  阅读(29)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
历史上的今天:
2021-11-22 数据结构-javascript实现【队列】
2021-11-22 数据结构-javascript实现【 栈 】
2021-11-22 数据结构-javascript实现 【数组】
点击右上角即可分享
微信分享提示