【前端技术】Plugin的使用

演化计算与人工智能

发布于 2022-01-24 13:56:04

4730

发布于 2022-01-24 13:56:04

文章被收录于专栏：人工智能与演化计算成长与进阶人工智能与演化计算成长与进阶

一、html-webpack-plugin

作用：

为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

原理：将 webpack中entry配置的相关入口chunk 和 extract-text-webpack-plugin抽取的css样式插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个html文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。

1.1 安装插件

npm install --save-dev html-webpack-plugin

npm run build 之后，就会生成dist文件，但是这个文件中有index.html。因为src文件中用到了这个，打包后并没有。

所有需要配置模板解决了打包之后，还需手动添加index.html文件的问题

1.2 配置webpack.config.js文件

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

module.exports = {
  mode:'development',
  entry:path.join(__dirname,'./src/index.js'), // 入口
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules:[
          {
            test:/\.(png|jpe?g|gif)$/i,
            use:[
              {
                loader:'url-loader',
                options:{
                  name:'[name].[ext]',
                  outputPath:'imgs/',
                  limit:20480
                }
              }
            ]
          },
        {
          test:/\.scss$/i,
          use:[
            "style-loader",
            // 对css-loader进行配置
            {
              loader:'css-loader',
               options: {
                 importLoaders:2
               }
            },
            "postcss-loader",
             "sass-loader"
          ]
        }
      ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html' // 源模板文件
    })
  ]
};

1.3 在src文件新建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>Document</title>
</head>
<body>
    <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

二、clean-webpack-plugin

作用：在每次构建前清理 /dist 文件夹测试过程:

output:{
 filename:'test.js', 
}
// 这里将bound.js改成test.js,npm run build之后，dist文件会出现test.js和bound.js,index.js会引入最先的test.js

存在问题：bound.js不应该存在。期望效果：bound.js 不存在，每次打包输出最新的文件，html也是引用最新的文件名

1.1 安装插件

npm install --save-dev clean-webpack-plugin

1.2 配置webpack.config.js文件

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

 plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    }),
    new CleanWebpackPlugin()
  ]

结果：clean-webpack-plugin帮我们实现了打包之前清空dist目录，然后根据output，产出最新的文件。

三、entry

3.1 完整写法

entry: {
 main:'./src/index.js' // 完整写法
},
output: {
 path: path.resolve(__dirname, './dist'), // 输出文件都放到 dist 目录下
}

如果没有filename，打包后，会生成dist/main.js。为什么是main.js 是因为entry。说明如果output不设置filename的话，打包的时候，会拿entry.main的key值当做filename。

3.2 两个入口

entry: {
 main:'./src/index.js', // 完整写法
  sub:'./src/index.js'
}
// 打包之后会生成main.js和sub.js 两个文件
// 如果打包输出的文件需要和入口文件相对应，可以如下配置
output: {
 filename:'[name].js',
  path: path.resolve(__dirname, './dist'),
}

3.3 简写

entry:path.join(__dirname,'./src/index.js'), // 这是简写

四、配置main.js的CDN网址

如果打包之后的引入的main.js是CDN网址的话，需要配置如下信息：

output: {
 publicPath:'http://cdn.com.cn',
  filename:'[name].js',
  path: path.resolve(__dirname, './dist')
}

打包之后，dist/index文件显示如下：

<script src="http://cdn.com.cn/main.js"></script><script src="http://cdn.com.cn/sub.js"></script>

本示例提供完整代码：链接: https://pan.baidu.com/s/1ZnQ2ykAlWivhUB1Xn_ftZw 提取码: 75uy

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-09-13，如有侵权请联系 cloudcommunity@tencent.com 删除

webpack

本文分享自 DrawSky 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度