手撸 webpack4.x 配置(二)[通俗易懂]

手撸 webpack4.x 配置(二)[通俗易懂]接着上一篇手撸webpack4.x配置(一)继续学习webpack配置。今天我学习配置下webpack中另一个模块plugins配置。之前我们都是手动在打包后(dist)目录里手动新建的index.html然后把打包后生成的JS文件手动的引入,今天我们来安装一个插件让webpack自动给我们生成模板!1官网配置地址:html-webpack-p…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

接着上一篇 手撸 webpack4.x 配置(一) 继续学习 webpack配置 。

今天我学习配置下 webpack 中 另一个模块 plugins 配置 。 之前我们都是手动在打包后(dist)目录里 手动新建的 index.html 然后把 打包后生成的 JS 文件手动的引入 ,今天我们来安装一个插件 让webpack 自动给我们生成模板 !

1 官网配置地址: html-webpack-plugin

npm install html-webpack-plugin --save-dev
复制代码

安装成功后 。 我们先在项目中新建一个 index.html 模板

模板我们可以自定义 , 如我的:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学习 webpack</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
复制代码

接下来我们就在 webpack.config.js 里面配置了

const path = require('path')
// 自动生成 HTML 文件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 模式
  mode: 'production',
  // 入口文件
  entry: {
    main: './src/index.js'
  },
  // 出口文件
  output: {
    // 打包文件地址
    path: path.resolve(__dirname, 'dist'),
    // 打包后的文件名
    filename: '[name].js',
    publicPath: './'
  },

  // 配置loader
  module: {
    rules: [{
        test: /\.(png|jpg|gif)$/,
        use: [{
          loader: 'file-loader',
          options: {
            outputPath: 'images'
          }
        }]
      },
      {
        test: /\.(css|scss|styl)$/,
        use: [{
            loader: "style-loader" // 将 JS 字符串生成为 style 节点
          },
          {
            loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
          }, {
            loader: "stylus-loader" // 将 stylus 编译成 CSS
          }
        ]
      }
    ]
  },

  // 插件
  plugins: [
    //  自动添加 HTML 模板
    new HtmlWebpackPlugin({
      // 标题
      title: '学习 webpack',
      // 模板
      template: 'index.html',
      // 压缩 去掉所有空格
      minify: {
        collapseWhitespace: false //false | true
      },
      // 添加hash
      hash: true
    })
  ]
};
复制代码

先引用 html-webpack-plugin , 然后在 plugins 里面配置 我们需要的 , 我都加了注解 ,大家一眼就看明白的 !

接下来,我们想在打包时 , 先清空 dist目录 ,然后再生成新的打包文件 ,这里我们需要再按照一个插件 !

2 clean-webpack-plugin

这个插件非官方的 , 属于第三方的 ,但也是非常的好用 !

npm install clean-webpack-plugin --save-dev
复制代码

安装成功后 , 同样的需要在webpack.config.js 里面配置

  // 插件
  plugins: [
    //  自动添加 HTML 模板
    new HtmlWebpackPlugin({
      // 标题
      title: '学习 webpack',
      // 模板
      template: 'index.html',
      // 压缩 去掉所有空格
      minify: {
        collapseWhitespace: false //false | true
      },
      // 添加hash
      hash: true
    }),
    // 删除文件 保留新文件
    new CleanWebpackPlugin(['dist'])
  ]
复制代码

注意 : 这里我之前也遇到坑了 , new CleanWebpackPlugin([‘dist’]) 最新版的 ,这个配置变了

// 删除文件 保留新文件
    new CleanWebpackPlugin()  //  这里不需要参了 !!!
复制代码

OK , 到这里两个插件就介绍完了 ,改天继续完善 ,希望有一天也能配置一个 属于自己的 cli 脚手架!

转载于:https://juejin.im/post/5c8a0084f265da2de52dcf1c

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/172028.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Hello World on Impala

    Hello World on Impala

    2021年11月14日
  • style.cssText

    style.cssText很多人用过style.color、style.display等直接设置元素的样式属性,但是style.cssText用过的人就不多了。cssText本质是什么?cssText的本质就是设置HTML元素的style属性值。cssText怎么用?复制代码代码如下:document.getElementById(“d1”).sty

  • 安装SPSS22_SPSS 24安装教程

    安装SPSS22_SPSS 24安装教程学习统计学必不可少的一个软件就是SPSS,这个软件非常的重要,但是随着时代的发展貌似又开始逐渐变得有点鸡肋,然而,我们还是要学,没辙,哈哈哈哈~接下来就跟着我一起安装一个SPSS22吧!首先你需要一个Windows电脑(Mac再说,风紧扯呼),最好是win10,然后在百度云下载必要的程序与秘钥百度云提取码:kp68里面包括exeandtxt下载下来后打开文件夹进入SPSS文件夹右击此文件,选择“以管理员权限运行”点击“下一步”选择“的那个用户许可证”,点击“下一步”选择“我接受许

    2022年10月23日
  • 集合基数[通俗易懂]

    集合基数[通俗易懂]通俗的说,集合的势是量度集合所含元素多少的量。集合的势越大,所含的元素越多。定理9.1设A,B,C是任意集合,(1)A≈A。(2)若A≈B,则B≈A。(3)若A≈B,B≈C,则A≈C。定义9.2(1)设A,B是集合,如果存在从A到B的单射函数,就称B优势于A,记作A·B。如果B不是优势于A,则记作A·B。(2)设A,B是集合,若A·B且AB,则称B真优势于A,记作A·B。如果B不是真优势于A,则记作A·B。关于DiscreteMathematics更多讨论与交流,敬请关注本博客和新浪微博s

  • 通过ReadProcessMemory读取进程内存「建议收藏」

    通过ReadProcessMemory读取进程内存「建议收藏」修改一个程序的过程如下:1、获得进程的句柄2、以一定的权限打开进程3、调用ReadProcessMemory读取内存,WriteProcessMemory修改内存,这也是内存补丁的实现过程。下面贴出的是调用ReadProcessMemory的例程#include<windows.h>#include<tlhelp32.h>BOOLCALLBACKEnum…

  • Json 数组拼接「建议收藏」

    Json 数组拼接「建议收藏」varstr1={“name”:”apple”,”sex”:”21″};//参数:prop=属性,val=值functioncreateJson(prop,val){//如果val被忽略if(typeofval===”undefined”){//删除属性…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号