3、webpack中的plugin

webpack中的plugin

1、loader和plugin的区别？
loader主要用于转换某些类型的模块，它是转换器，更像是一种加载器。
plugin是插件，它是对webpack本身的扩展，是一个扩展器。

在项目打包的时候需要把index.html也打包进dist文件夹，dist文件夹再丢进服务器。
但是index.html打包进dist需要用到插件
在终端输入：
npm install html-webpack-plugin@3.2.0 --save-dev
然后在webpack.config.js里写上:
const HtmlWebpackPlugin=require('html-webpack-plugin')
在module.exports中写上：
plugins:[
    new HtmlWebpackPlugin({
        template:'index.html'
    })
  ]
这样就能让dist文件夹生成一个index.html,
template:'index.html'意思是以当前目录下的HTML为模板生成dist里的HTML。

2、在最终打包到dist里的bundle.js文件是会进行压缩的，因为如果不压缩的话是会很占用空间的
下面就要用到JS压缩、丑化的plugin（开发时候是不需要丑化的）
在终端输入
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

在webpack.config.js写上
const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin')
在module.exports中的plugins里写上：
new UglifyjsWebpackPlugin()
重新npm run build