webpack之plugin

loader 和 plugin 区别

loader 加载 转换某些类型的模块
plugin 插件 对webpack本身的扩展

1. 添加版权声明的plugin webpack.BannerPlugin

因为是webpack自带的，所以在webpack.config.js 里 添加

然后重新打包 查看

---

2. 打包html的plugin HtmlWebpackPlugin

因为发布项目的时候 是发布dist文件夹的内容 但是里面没有index.html
所以需要将index.html打包到dist文件夹中

不是webpack自带的，所以要先安装

npm install html-webpack-plugin@3.2.0

再打包下 会发现
打开会发现少了 div id=“app”
所以可以在plugin那里添加模板

他就会根据同目录下的index.html 去打包
然后删掉原来的打包生成的index.html 再重新打包 就有div 了

---

3. 压缩js的plugin uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev  

配置同上

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
new UglifyjsWebpackPlugin()

重新打包后 打开bundle.js 发现压缩了=丑化

---

4. 搭建本地服务器 （vscode 有插件 live server

不过可以试下这种方法

npm install webpack-dev-server@2.9.3 --save-dev

然后在终端跑 npx webpack-dev-server
或者

然后 npm run dev

---

5. webpack配置文件分离
   先安装合并文件

npm install webpack-merge --save-dev 

创建build文件夹 以及base.config.js 放公共的js dev.config.js放编译 prod.config.js 放开发

然后把webpack.config.js 先复制三份到上述文件 再进行删除

首先base.config.js 路径得改成 .. /dist 返回根目录下的dist
如果是./dist 则是在build的文件夹自动创建dist文件夹

然后dev.config.js 里 这里放自动打包更新的 把base和dev 合并起来

prod.config.js里 这里放压缩js的 把base和prod 合并起来

然后在package.json 里 手动指定下路径

然后npm run build 后 再npm run dev 自动打开网页
在main.js里

可以发现自动打包 然后网页自动刷新