webpack学习笔记（三）

每日一积累

Webpack的插件

使打包的方式更方便便捷

插件：html-webpack-plugin

1：安装：cnpm install html-webpack-plugin –D

2：在webpack自定义配置文件webpack.config.js中引入这个插件

const HtmlWebpackPlugin=require('html-webpack-plugin');

    plugins:[new HtmlWebpackPlugin({

        template:'src/index.html'

    })],

这个插件会在打包结束后，自动生成一个HTML文件，并把打包生成的js自动引入到这个html文件中,

我们也可以创建一个模板文件，以对象的方式传给HtmlWebpackPlugin

plugin 可以在webpack运行到某个时刻的时候，帮你做一些事情，很像react、Vue里面的生命周期函数；

插件：clean-webapck-plugin

1:安装 cnpm install clean-webpack-plugin –D

2：在webpack自定义配置文件webpack.config.js中引入这个插件

const CleanWebpackPlugin=require('clean-webpack-plugin');

    plugins:[new HtmlWebpackPlugin({

        template:'src/index.html'

    }),new CleanWebpackPlugin(['dist'])],

Webpack官方网站有很多的plugin，然后还不包括第三方要用到plugin，如果某些功能我们需要用到Plugin可以上网查，然后找对应的使用说明

SourceMap 的配置

 

//development 开发这模式 devtool是默认配置的 SourceMap

为什么要配置SourceMap？

//举例说，当我们运行我们的项目时候，给出错误的提示信息是dist目录下，main.js文件中96行出错 代码出现错误

//而SourceMap 它是一个映射关系，他知道dist目录下main.js文件96  实际上对应的是src目录下index.js文件中的第一行

 

 

//cheap管自己业务代码的错误，module管第三方模块代码的错误

//eval是执行速度最快，性能最好的一种方式 

开发模式下建议这么配置

    mode: 'development',

    devtool:'cheap-module-eval-source-map',

生产环境下建议这么配置

//mode:'production' 生产环境，线上打包

//devtool:'cheap-module-source-map'