手撸 webpack4.x 配置（二）[通俗易懂]

2022-09-23 10:54:30 浏览数 (1)

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

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

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

1

代码语言：shell复制
<!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 里面配置了

代码语言：shell复制
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

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

代码语言：shell复制
npm install clean-webpack-plugin --save-dev
复制代码

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

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

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

代码语言：shell复制
// 删除文件 保留新文件
    new CleanWebpackPlugin()  //  这里不需要参了 ！！！
复制代码

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

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

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

webpack https 网络安全 打包 java

0 人点赞