webpack: 3 插件汇总（HtmlWebpackPlugin等）

小强有个dream

于 2023-05-11 00:48:29 发布

阅读量562

点赞数 1

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/qq_36413371/article/details/126694179

版权

插件 copy-webpack-plugin

将已存在的单个文件或整个目录复制到生成目录

出现的报错：
1.

HookWebpackError: Invalid host defined options

官方回应：问题在于其他工具，而不是插件本身。
看起来最好的办法是降级到v9 // 测试很ok

ERROR in Conflict: Multiple assets emit different content to the same filename index.html

HtmlWebpackPlugin生成的文件和HtmlWebpackPlugin的文件拷贝重复了

webpack-dev-server 预览打包

  devServer: {
    port: 7788, //控制端口
    open: true //是否自动打开默认浏览器
  },

// webpack打包后可以在webpack.config.js文件中配置如上字段。就可以预览打包后的结果了

HtmlWebpackPlugin实现打包预览–打包

只要打包预览没问题，那dist的目录就可以打包上线了

打包预览：
需要两个插件html-webpack-plugin和webpak-dev-server，下载配置后就可以实时预览项目
打包：

1）在下载了webpack的项目中；//package.json的scipts中"build": “webpack”,

npm run build                  //或者直接执行webpack

2）在vue-cli的脚手架项目中执行 //package.json的scipts中"build": “vue-cli-service build”,

npm run build                             //项目根目录执行

观看上线的效果：
将打包出来的dist目录以vscode打开，以live-server打开html页面

clean-webpack-plugin每次打包清空打包目录

每次打包清空打包目录
NOTE: Node v10+ and webpack v4+ are supported and tested.

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ],
};

？配置了还没有完全清空dist目录。那还需要配置output.path的了

output: {
        publicPath: '/dist/',
        // 需要指定这个打包路径`在这里插入代码片`
        path: path.resolve(__dirname, 'dist')
    },

html-webpack-plugin

Plugin that simplifies creation of HTML files to serve your bundles 自动为我们打包后目录生成index.html并引起js入口文件

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

plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html' // 自定义模板进行覆盖（webpack会对比两个index.html模板文件，保留更改的部分）
    }),
    new webpack.DefinePlugin({ // webpack内置插件，可以定义常量
      BASEURL: '"./"' 
    })
  ]

/ public/index.html
<!DOCTYPE html>
<html lang="en">
<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">
  <title>vue</title>
  <link rel="icon" href="<%= BASEURL =>favicon.ico">
</head>
<body>
  <div id="app"></div>
</body>
</html>

内置插件 webpack.DefinePlugin()

webpack.DefinePlugin()**

The DefinePlugin replaces variables in your code with other values or expressions at compile time. 可以定义全局可以用的常量和表达式。
关于常量命名建议使用项目规范的写法：常量大写和下划线

plugins: [new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html' // 自定义模板进行覆盖
        }),
        new webpack.DefinePlugin({
            PRODUCTION: JSON.stringify(true),
        })
    ]

小强有个dream

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack: 3 插件汇总（HtmlWebpackPlugin等）

2）在vue-cli的脚手架项目中执行 //package.json的scipts中"build": “vue-cli-service build”,//package.json的scipts中"build": “webpack”,需要两个插件html-webpack-plugin和webpak-dev-server，下载配置后就可以实时预览项目。// webpack打包后可以在webpack.config.js文件中配置如上字段。只要打包预览没问题，那dist的目录就可以打包上线了。
复制链接

扫一扫