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'
posted @ 2020-12-26 22:10  子不语-前端  阅读(45)  评论(0编辑  收藏  举报