快盘下载:好资源、好软件、快快下载吧!

快盘排行|快盘最新

当前位置:首页软件教程电脑软件教程 → 手撸 webpack4.x 配置(二)[通俗易懂]

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

时间:2022-09-24 11:50:27人气:作者:快盘下载我要评论

大家好,又见面了,我是你们的朋友全栈君。

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

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

1

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

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

相关文章

  • pyqt5打包成exe可执行文件

    pyqt5打包成exe可执行文件,从python源代码到exe文件需要经历打包的过程。特别是pyqt5实现的GUI界面应用,应该没有哪个小伙伴想在运行的时候看到复杂的代码吧?那么pyqt5怎么生成可执行文件呢?接下来这篇文章就带你了解pyqt5打包成exe的方法。pyqt5怎么打包成exe可执行文件 | w3c笔记。...
  • 用.NET做DDNS动态域名解析和SSL证书申请

    用.NET做DDNS动态域名解析和SSL证书申请,前几天用.NET玩IoT设备,拿出了角落吃灰的Jetson Nano。近期也买了一堆传感器,还在路上,准备到手之后,好好捣鼓一番。Nano设备呢,虽然没有一直开......

网友评论

快盘下载暂未开通留言功能。

关于我们| 广告联络| 联系我们| 网站帮助| 免责声明| 软件发布

Copyright 2019-2029 【快快下载吧】 版权所有 快快下载吧 | 豫ICP备10006759号公安备案:41010502004165

声明: 快快下载吧上的所有软件和资料来源于互联网,仅供学习和研究使用,请测试后自行销毁,如有侵犯你版权的,请来信指出,本站将立即改正。