webpack使用plugins

HtmlWebpackPlugin

这个插件会帮助我们自动创建html文件，并且引入js文件

该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。 只需添加插件到你的 webpack 配置如下：

基本用法

var HtmlWebpackPlugin = require('html-webpack-plugin');var path = require('path');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

这里是系统自动生成的，我们可以自己指定模板，例如你在src文件夹下建立index.html，想把这个文件作为生成的模板

plugins: [new HtmlWebpackPlugin({
    template:'scr/index.html'
})]

clean-webpack-plugin

自动删除之前打包的文件夹

npm i clean-webpack-plugin -D

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
...
plugins: [
new CleanWebpackPlugin()

参考：https://www.webpackjs.com/plugins/html-webpack-plugin/

sourceMap配置

webpack会把所有的js打包到一个js文件中，这样调试就很不方便，sourcemap就是能把这个打包后的js文件映射到相关的具体的js文件中，方便报错的时候知道被打包的文件哪行代码出错了

devtool: 'source-map',

详细配置参考：https://www.webpackjs.com/configuration/devtool/#devtool

webapckDevServer热更新

第一种方法：在package.json中加入名字可以自定义

"scripts": {
    "watch": "webpack --watch"
  },

第二种方法：文件发生变化自动打包，自动打开文件

cnpm i webpack-dev-server -D

 "scripts": {
    "watch": "webpack --watch",
    "start": "webpack-dev-server"
  },

webapck.config.js写入：

 devServer: {
        contentBase: './dist/index.html',//运行的文件
        open:true

    },

open:true 自动打开浏览器

proxy  接口代理

port 端口号

hot:true  代表css更改后不会刷新页面

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

参考https://www.webpackjs.com/api/hot-module-replacement/#accept

var webpack = require('webpack');
 plugins: [new HtmlWebpackPlugin({
        template: 'public/index.html'
    }), new CleanWebpackPlugin(), 
    new webpack.HotModuleReplacementPlugin()
    ]

详细配置参考：https://www.webpackjs.com/configuration/dev-server/