使用plugins让打包更便捷

Posted wzndkj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用plugins让打包更便捷相关的知识,希望对你有一定的参考价值。

之前运行dist下的js,都是手动把index.html拷贝过去的,每次把dist文件夹删除,都需要将index.html拷贝进去,这样很麻烦,我们在webpack官方插件中找到HtmlWebpackPlugin
module.exports = {
  /**
  * 打包模式,不配置会警告,但底层还是会去配置默认的,就是production
  * production: 压缩模式,被压缩的代码
  * development: 开发模式,不压缩的代码
  *
  */
  mode: ‘development‘,
  // 这个文件要做打包,从哪一个文件开始打包
  entry: ‘./src/index.js‘,

  plugins: [new HtmlWebpackPlugin()],
  // 打包文件要放到哪里去,就配置在output这个对象里
  output: {
    // 打包好的文件名字
    filename: ‘bundle.js‘,
    /**
    * 打包出的文件要把他放到哪一个文件夹下,path后面要放一个绝对路径
    * __dirname指的是webpack.config.js所在的当前目录的这个路径
    * 下面这个结合就是一个绝对路径
    */
    path: path.resolve(__dirname, ‘dist‘)
  }
}
这样配置好,再去打包,发现会自动生成一个index.html,
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
<body>
  <script type="text/javascript" src="bundle.js"></script></body>
</html>

html里面还引入了bundle.js。而且在src里面我并没有这个index.html.这就是webpack里面插件的作用

HtmlWebpackPlugin这个插件能干什么呢?HtmlWebpackPlugin会在打包结束后,自动生成一个html文件,并把打包生成的js自动引入到这个html文件中
我们再打开index.html,发现网页上什么也没有。为什么呢?

 

我们看自己的代码逻辑
index.js
var root = document.getElementById(‘root‘);
import ‘./index.scss‘;

root.innerHTML = ‘<div class="iconfont iconfangdajing">abc</div>‘;
代码逻辑是找到id为root到节点,再把abc挂在到root上。但是我们看index.html并没有root这个标签。所以说明用webpack生成到这个html,少了一个id为root的标签。那我想让他自动生成这个id为root的标签,怎么办,可以对这个html-webpack-plugin做一个配置
plugins: [new HtmlWebpackPlugin({
  template: ‘src/index.html‘
})],
然后在src里面自己写一个模版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>html template</title>
  </head>
  <body>
    <div id=‘root‘></div>
  </body>
</html>
然后运行npm run bundle,打开自动生成的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>html template</title>
  </head>
  <body>
    <div id=‘root‘></div>
    <script type="text/javascript" src="bundle.js"></script>
  </
body> </html>

可以惊讶的看到id为root的标签插入进去了。这是为什么呢?

 

html-webpack-plugin会自动生成一个html,这个html是以哪个模版生成的呢,是src下面的index.html为模板生成的。生成之后,会把打包出来bundle.js注入到html中。

 

通过这个例子,我们说明一下webpack中plugin的作用。
plugin可以在webpack运行到某个时刻的时候,帮你做一些事情。这个很像生命周期函数的定义。这个时刻是什么时刻呢,就是webpack打包结束的时刻。其它的插件也会在某些时刻做一些事情,比如刚打包的时刻。比如打包js的某个时刻。再举个例子。。

 

我们现在打包好的名字叫bundle.js,现在我改一下,叫做dist.js
output: {
  filename: ‘dist.js‘,
  path: path.resolve(__dirname, ‘dist‘)
}
然后重新打包,然后dist目录下会多出一个dist.js文件,html里面自动引入的也是dist.js文件。但是我们看bundle.js的文件依然存在,为什么呀,一个是我们刚才没有删除dist,再打包,但每次打包都需要删除一下,会很麻烦。我们希望每次打包的时候,自动将dist删除,这样就不会有上次遗留的东西了。现在就需要另外一个插件,在官网webpack下找不到,叫做clean-webpack-plugin
先安装
npm install clean-webpack-plugin -D
装好之后,我们去增加配置
plugins: [
  new HtmlWebpackPlugin({     template: ‘src/index.html‘   }), new CleanWebpckPlugin()
],
这个意思是在打包之前先删除掉dist这个文件夹。这样运行npm run bundle,之前bundle.js就不在了。



以上是关于使用plugins让打包更便捷的主要内容,如果未能解决你的问题,请参考以下文章

让业务容器化更安全便捷,阿里云容器镜像服务 ACR 推出免费制品中心

vue项目打包gzip压缩

plugin--Lombok

使用maven-assembly-plugin打包zipproject

便捷的渠道统计方案,免打包渠道

优化 要引入多个 模块 使用调用的方法,让管理更便捷 --execfile() 函数