webpack4 使用pug模版引擎开发

Posted 2020-11-19 zheng-chuang

项目地址

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-dev

package.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，可通过此方式实现多页面开发
    })
  ]
};