带有 webpack DevServer 的多个 HtmlWebpackPlugins（webpack devserver contentbase）

25-03-31 8

在本文中，我们将详细介绍带有webpackDevServer的多个HtmlWebpackPlugins的各个方面，并为您提供关于webpackdevservercontentbase的相关解答，同时，

在本文中，我们将详细介绍带有 webpack DevServer 的多个 HtmlWebpackPlugins的各个方面，并为您提供关于webpack devserver contentbase的相关解答，同时，我们也将为您带来关于05webpack中html-webpack-plugin的2个作用、645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug、chainWebpack 和 htmlWebpackPlugin搭配使用、HtmlWebpackPlugin的有用知识。

本文目录一览：

带有 webpack DevServer 的多个 HtmlWebpackPlugins（webpack devserver contentbase）
05webpack中html-webpack-plugin的2个作用
645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug
chainWebpack 和 htmlWebpackPlugin搭配使用
HtmlWebpackPlugin

带有 webpack DevServer 的多个 HtmlWebpackPlugins（webpack devserver contentbase）

可以为

historyApiFallback 提供手动 rewrites，以更细粒度的方式控制 DevServer 应该回退到 404 响应的内容。这样我们也可以为开发中的其他文件提供服务。

module.exports = {
  entry: {
    main: './src/main.js',anotherEntry: './src/anotherEntry.js'
  },devServer: {
    contentBase: './dist',historyApiFallback: {
      rewrites: [
        { from: /^\/anotherEntry/,to: '/anotherEntry.html' },{ to: '/index.html' },],},port: 3000,// ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',template: './src/main.html',chunks: ['main'],}),new HtmlWebpackPlugin({
      filename: 'anotherEntry.html',template: './src/anotherEntry.html',chunks: ['anotherEntry'],]
};

05webpack中html-webpack-plugin的2个作用

  <!-- 15  html-webpack-plugin的2个作用
     下载 cnpm i html-webpack-plugin -D   作用在==>内存中生成页面
     可以在package.json中去查看是否有

     在webpack中 导入在内存中生成的HTML页面的插件
     // 只要是webpack的插件 都要放入 plugins 这个数组中去
     const htmlwebpackPlugin=require("html-webpack-plugin")
     

    plugins: [
    new webpack.HotModuleReplacementPlugin(),这是热跟新的配置

    new htmlwebpackPlugin({ 创建一个 在内存中生成 HTML页面的插件
        template:path.join(__dirname,'./src/index.html'),1)">指定模板页面，将来会根据指定的页面路径，去生成内存中的 页面
        filename:"index.html" 指定生成的页面名称
    })
    ]
  
    //

    当我们使用html-webpack-plugin之后，我们不需要手动处理bundle.js的引用路径，
    （我们可以将index.html中的 <script src="../dist/bundle.js"></script>注释掉 ）
     因为这个插件，已经帮我们自动创建一个 合适的script,并且引用了正确的路径 
     
     这个插件有两个作用的
     在内存中帮我们生成一个页面
     帮我们自动创建一个合适的script标签  并且引入正确的路径

运行的命令  npm  run  dev

完整代码

package.json

{

"devDependencies": {

"html-webpack-plugin": "^4.5.0",

"webpack": "^4.44.2",

"webpack-cli": "^3.3.12",

"webpack-dev-server": "^3.11.0"

"scripts": {

"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

"dependencies": {

"jquery": "^3.5.1"

}

src下的main.js

import $ from "jquery";

$(function () {

console.log("我是重新删除了哈");

console.log("哈在手我的删除动阀案说现在辞职法十分哈儿");

});

webpack.config.js

const path = require("path");

const htmlwebpackPlugin = require("html-webpack-plugin");

var webpack = require("webpack");

module.exports = {

entry: path.join(__dirname, "./src/main.js"), //入口文件使用webpack要打包哪一个文件

output: {

//输出相关的配置

path: path.join(__dirname, "./dist"), //指定打包好的文件会输出到哪一个目录（dist)下去

filename: "testindex.js", //指定打包好的文件的名称叫什么名字

plugins: [

new webpack.HotModuleReplacementPlugin(), //这是热跟新的配置

new htmlwebpackPlugin({

//创建一个在内存中生成 HTML页面的插件

template: path.join(__dirname, "./src/index.html"), //指定模板页面，将来会根据指定的页面路径，去生成内存中的页面

filename: "index.html", //指定生成的页面名称

}),

};

src下的index.html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug

^-

前端小菜鸟，喜欢前端，不断学习
微信：jie178463596
微信小群：纯粹讨论技术、面试、工作为主，划水少，拒绝广告

认识Plugin

CleanWebpackPlugin

HtmlWebpackPlugin

生成的index.html分析

自定义HTML模板

自定义模板数据填充

DefinePlugin的介绍

DefinePlugin的使用

copyWebpackPlugin

目录结构

wk.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin } = require('webpack'); // DefinePlugin是webpack内置插件
const copyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "js/bundle.js",
    // 必须是一个绝对路径
    path: path.resolve(__dirname, "./build"),
    // assetmodulefilename: "img/[name].[hash:6][ext]"
  },
  module: {
    rules: [
      {
        // 规则使用正则表达式
        test: /\.css$/, // 匹配资源
        use: [
          // { loader: "css-loader" },
          // 注意: 编写顺序(从下往上, 从右往做, 从后往前)
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          "postcss-loader"
        ],
        // loader: "css-loader"
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        // type: "asset/resource", file-loader的效果
        // type: "asset/inline", url-loader
        type: "asset",
        generator: {
          filename: "img/[name].[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024
          }
        }
      },
      {
        test: /\.ttf|eot|woff2?$/i,
        type: "asset/resource",
        generator: {
          filename: "font/[name].[hash:6][ext]"
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "哈哈 webpack",
      template: "./public/index.html"
    }),
    new DefinePlugin({
      // 要包裹两层引号
      BASE_URL: '"./"'
    }),
    new copyWebpackPlugin({
      patterns: [
        {
          // to: xxx, // 不用写，默认会使用output.path
          from: "public",
          globOptions: {
            ignore: [
              "**/index.html",
              "**/.DS_Store",
              "**/abc.txt"
            ]
          }
        }
      ]
    })
  ]
}

publuc/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <Meta charset="utf-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

build/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <Meta charset="utf-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    
    <link rel="icon" href="./favicon.ico">
    
    <title>杰帅的webpack</title>
  <script defer src="js/bundle.js"></script></head>
  <body>
    <noscript>
      <strong>We're sorry but 杰帅的webpack doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

chainWebpack 和 htmlWebpackPlugin搭配使用

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


...

chainWebpack: config => {
    config
        .plugin(''html'')
            .use(HtmlWebpackPlugin)
            .tap(options  => {
                options.BASE_URL = ''sss''
                options.template = __dirname + ''/public/index.html''
                options.title = ''sssssssssssss''
            return options
            })        
    }

注意看vue-cli3引用的html-webpack-plugin默认配置

 constructor (options) {
    // Default options
    this.options = _.extend({
      template: path.join(__dirname, ''default_index.ejs''),
      templateParameters: templateParametersGenerator,
      filename: ''index.html'',
      hash: false,
      inject: true,
      compile: true,
      favicon: false,
      minify: false,
      cache: true,
      showErrors: true,
      chunks: ''all'',
      excludeChunks: [],
      chunksSortMode: ''auto'',
      meta: {},
      title: ''Webpack App'',
      xhtml: false
    }, options);
  }

HtmlWebpackPlugin

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
    clean: true
  },

  mode: 'none',

  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'app.html',
      inject: 'body'
    })
  ]
}

今天关于带有 webpack DevServer 的多个 HtmlWebpackPlugins和webpack devserver contentbase的讲解已经结束，谢谢您的阅读，如果想了解更多关于05webpack中html-webpack-plugin的2个作用、645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug、chainWebpack 和 htmlWebpackPlugin搭配使用、HtmlWebpackPlugin的相关知识，请在本站搜索。

本文标签：