webpack插件机制介绍

1、自动清除输出目录文件插件 clean-webpack-plugin

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

module:{
	  plugins:[
	  	//clean-webpack-plugin 
        new CleanWebpackPlugin();
    ]
}

2、自动生成html插件 html-webpack-plugin

output里不再需要配置publicPath

const HtmlWepackPlugin=require('html-webpack-plugin')

output:{//输出文件的路径  页面引入的是patn/filename
        filename:'bundle.js', //输出文件的名称
        path:path.join(__dirname,'dist'),//输出目录 必须是绝对路径
        //publicPath:'dist/' //所有资源的基础路径是指项目中引用css，js，img等资源时候的一个基础路径
    },

plugins里配置

plugins:[
        new HtmlWebpackPlugin({
            title:'wepack plugin sample', //生成的html页面标题
            meta:{ //设置页面meta
                viewport:'width=device-width'
            },
            //根据html模板生成html页面
            //根据<%= htmlwebpackPlugin.options.title %>
            template:’./src/index.html‘
        })
    ]

同时输出多个html页面

//用于生成其他页面 例about.html
new HtmlWebpackPlugin({
	filename:'about.html'
})

3、静态资源打包插件 copy-webpack-plugin

开发阶段不使用此插件 一般上线前最后一次打包使用

new CopyWebpackPlugin([
	'public' //将public目录下的所有文件copy到输出目录中
])

4、webpack dev server 自动编译和自动刷新浏览器

webpack --watch 和 browaerSync 也可以实现

1. 安装 yarn add webpack-dev-server --dev

2. 运行 yarn webpack-dev-server
   为了提高工作效率，将打包结果暂时存放内存中，http server从内存中读取，减少不必要的磁盘读写

3. yarn webpack-dev-server --open自动打开浏览器

5、webpack dev server静态资源访问

copy-webpack-plugin上线前使用
开发阶段使用webpack-dev-server

devServer:{ //静态资源访问
        contentBase:'./public' //也可以是数组，多个路径
  },

6、webpack-dev-server 代理API

解决开发环境中接口跨域请求问题 webpack-dev-serve支持代理服务 将api代理到开发服务器
以请求github/user接口为例：

devServer:{ //静态资源访问
        contentBase:'./public', //也可以是数组，多个路径
        proxy:{
            '/api':{//被代理的请求路径前缀 请求以‘/api’开头的地址 代理到接口中
                //http://localhost:8080/api/users -> http://api.github.com/api/users
                target:'https://api.github.com',//代理目标
                pathRewrite:{
                    //路径中以/api开头替换为空
                    //http://localhost:8080/api/users -> http://api.github.com/users
                    '^/api':''
                },
                //不能使用localhost:8080作为请求github的主机名
                changeOrigin:true
            }
        }
    },

webpack自动刷新问题

使用webpack-dev-server修改代码后，自动刷新导致页面状态丢失，为了提高开发效率在页面不刷新的前提下，模块也可以及时更新 ，
可以使用 HMR （ hot module replacement ） 模块热更新
只将修改的模块实时替换到应用中 不必完全刷新应用

webpack 使用HMR

1、通过命令行使用 yarn webpack-dev-server --hot

2、通过配置文件开启

const webpack = require('webpack')
devServer: {
    hot: true
    // hotOnly: true // 只使用 HMR，热替换失败不会自动刷新
  },
plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]

1. hot: true

单纯设置为true的时候，如果编译报错，会抛出错误，你重新改成正确的，这个时候又会触发重新编译，整个浏览器会重新刷新！

2. hotOnly: true

这个也设置的话，如果编译报错，你再改成正确的，重新编译，浏览器不会刷新！


hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败

webpack中的HRM样式文件的热更新可以开箱即用，其他模块需要手动处理模块热替换逻辑
为什么样式文件的热更新开箱即用呢？因为经过style-loader自动处理了热更新
另外vue-cli这种框架下的开发，脚手架创建的项目内部都集成了HMR的方法，所以也不用做处理。

HRM API 通过HRM API的使用手动处理模块更新后的热替换

if (module.hot) {
  let lastEditor = editor
  module.hot.accept('./editor', () => { //第一个参数是依赖模块的路径 
  //第二个参数是依赖模块更新后的处理函数
  })
}