手撸 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)


相关推荐

  • vijos 1115 火星人

    vijos 1115 火星人

  • bm3d matlab,Note — BM3D「建议收藏」

    bm3d matlab,Note — BM3D「建议收藏」一、引言二、理论三、算法一、引言前面一篇说到Non-localmethod[1],可以归类到spatialmethod中,另外用的比较多的还有transformmethod,基于transformmethod的方法在imagedenoise中也取得了很好的效果,不过理论阐述会比较繁琐,如BLS-GSM-Wavelet。NLM去噪算法使用的是inter-patchcorrelation,而Wavel…

  • Pycharm断点调试

    Pycharm断点调试使用Pycharm去debug程序

  • nmap命令扫描开放端口

    nmap命令扫描开放端口简单举例下,以下的场景,我使用了nmap命令场景1:使用树莓派但是没有显示器,这时候把树莓派接入局域网,通过使用nmap命令扫描局域网内的所有开放端口,分析扫描信息,从而得出树莓派的局域网ip,这时候就可以通过ip连上树莓派了场景2:nmap常被黑客用于分析服务器哪些端口开放,如果无聊我们也可以看下自己的服务器都开放了哪些端口安装nmap命令Mac上安装nmapbrewinst…

  • python plotly 使用教程

    python plotly 使用教程1、plotly介绍lotly的Python图形库使互动的出版质量图表成为在线。如何制作线图,散点图,面积图,条形图,误差线,箱形图,直方图,热图,子图,多轴,极坐标图和气泡图的示例。推荐最好使

  • SIFT matlab源代码解析[通俗易懂]

    SIFT matlab源代码解析[通俗易懂]SIFTmatlab源代码解析sift是目前常用的localfeature的描述子。sift特征匹配算法可以处理两幅图像之间发生一些平移、旋转、仿射等匹配问题。因为早前自己要做一个图像拼接的问题,所以用到了sift。写这篇blog,是因为自己准备向CV进军,开始着手写blog来积累知识,这也是我第一篇blog,虽然这篇blog很简陋,纯属向sift致敬,但也方便一些初学者使用吧。以后也会不定期对

发表回复

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

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