02webpack之plugin的配置和使用

webpack-dev-server的基本使用

作用：监听代码改变，来自动打包

1. npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
2. 此工具的用法与webpack的用法完全一致
3. 由于此工具是在项目中安装，无法全局使用，只用 -g 的工具才能全局使用
4. 注意：webpack-dev-server 要求，在本地项目中安装webpack，即使已经全局安装过
5. 在package.json -> scripts-> "dev":"webpack-dev-server"
6. npm run dev
7. webpack-dev-server 打包的 bundle.js 文件，并没有存到实际的物理磁盘上，而是直接托管到了电脑内存中，所以项目根目录找不到这个打包好的 bundle.js

webpack-dev-server的常用命令

1. 设置打包后自动启动浏览器

在package.json -> scripts-> "dev":"webpack-dev-server --open"

2. 修改端口号

在package.json -> scripts-> "dev":"webpack-dev-server --open 3000"

3. 展示默认首页

在package.json -> scripts-> "dev":"webpack-dev-server --open 3000 --contentBase src"

4. 打补丁的方式打包(无需每次都生成bundle.js,页面无刷新渲染)

在package.json -> scripts-> "dev":"webpack-dev-server --open 3000 --contentBase src --hot"

html-webpack-plugin 的两个基本作用

作用：将html页面也放于内存中

1. cnpm i html-webpack-plugin -D
2. webpack.config.js 导入在内存中生成 html 页面的插件

const htmlWebpackPlugin = require('html-webpack-plugin')
注意： 只要是插件，都要放到 plugins 节点中去

3. 在package.json 中

plugins:[
 new htmlWebpackPlugin({ 
 	template:path.join(__dirname,'./src/index.html'), //指定需要生成内存中的页面
 	filename:'index.html' //命名
 })
]

4. 使用了此插件之后，无需手动处理bundle.js 的引用路径，插件自动将打包好的bundle.js追加到页面中