项目地址
why
前几天有一个同事拿了几张html的文件问我怎么把公共的头部提取出来进行样式修改，我没有办法，也没查出该怎么解决，然后就思考。
怎么样才能实现多个页面共用相同的html代码呢？
于是有了这篇文章。
初始化
npm init -y安装webpack
npm install webpack webpack-cli --save-dev安装pug-html-loader html-loader
npm install pug-html-loader html-loader --save-devpackage.json
{ ?"name": "demo1", ?"version": "1.0.0", ?"main": "index.js", ?"license": "MIT", ?"devDependencies": { ???"clean-webpack-plugin": "^0.1.19", ???"css-loader": "^0.28.11", ???"html-loader": "^0.5.5", ???"html-webpack-plugin": "^3.2.0", ???"pug-html-loader": "^1.1.5", ???"style-loader": "^0.21.0", ???"webpack": "^4.12.0", ???"webpack-cli": "^3.0.8", ???"webpack-dev-server": "^3.1.4" ?}, ?"scripts": { ???"start": "webpack-dev-server --mode development --open", ???"dev": " webpack --mode development", ???"build": "webpack --mode production" ?}}webpack配置文件
‘use strict‘;const path = require(‘path‘);const HtmlWebPackPlugin = require("html-webpack-plugin");const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);module.exports = { ?entry: { ???app: ‘./src/js/index.js‘, ???main: ‘./src/js/index.js‘ ?}, ?output: { ???path: path.resolve(__dirname, ‘dist‘), ???filename: ‘js/[name]-[chunkhash].js‘, ?}, ?module: { ???rules: [{ ?????test: /\.pug$/, ?????use: [ ???????‘html-loader‘, ???????‘pug-html-loader‘ ?????], ???}] ?}, ?resolve: {}, ?devtool: ‘inline-source-map‘, ?plugins: [ ???new CleanWebpackPlugin([‘dist‘]), // 清楚之前生成的文件 ???new HtmlWebPackPlugin({ ?????template: ‘./src/my-index.pug‘, ?????chunks: [‘main‘] // 打包时只打包 main.js，可通过此方式实现多页面开发 ???}) ?]};webpack4 使用pug模版引擎开发
原文地址：https://www.cnblogs.com/zheng-chuang/p/9201788.html