一般网站设计多少钱,可信网站,哪里可以购买域名,淘宝手机版网页文章目录 一、认识插件Plugin1.认识Plugin 二、CleanWebpackPlugin三、HtmlWebpackPlugin1.生成index.html分析2.自定义HTML模板3.自定义模板数据填充 四、DefinePlugin1.DefinePlugin的介绍2.DefinePlugin的使用 五、Mode配置 一、认识插件Plugin
1.认识Plugin
Webpack的另一… 文章目录 一、认识插件Plugin1.认识Plugin 二、CleanWebpackPlugin三、HtmlWebpackPlugin1.生成index.html分析2.自定义HTML模板3.自定义模板数据填充 四、DefinePlugin1.DefinePlugin的介绍2.DefinePlugin的使用 五、Mode配置 一、认识插件Plugin
1.认识Plugin
Webpack的另一个核心是Plugin官方有这样一段对Plugin的描述
While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.
上面表达的含义翻译过来就是
Loader是用于特定的模块类型进行转换Plugin可以用于执行更加广泛的任务比如打包优化、资源管理、环境变量注入等 二、CleanWebpackPlugin
前面我们演示的过程中每次修改了一些配置重新打包时都需要手动删除dist文件夹
我们可以借助于一个插件来帮助我们完成这个插件就是CleanWebpackPlugin
首先我们先安装这个插件
npm install clean-webpack-plugin -D之后在插件中配置
const { CleanWebpackPlugin } require(clean-webpack-plugin)module.exports {plugins: [new CleanWebpackPlugin()]
}三、HtmlWebpackPlugin
另外还有一个不太规范的地方
我们的HTML文件是编写在根目录下的而最终打包的dist文件夹中是没有index.html文件的。在进行项目部署的时必然也是需要有对应的入口文件index.html所以我们也需要对index.html进行打包处理
对HTML进行打包处理我们可以使用另外一个插件HtmlWebpackPlugin
npm install html-webpack-plugin -Dconst HtmlWebpackPlugin require(html-webpack-plugin)module.exports {plugins: [new HtmlWebpackPlugin({title: webpack-demo})]
}1.生成index.html分析
我们会发现现在自动在dist文件夹中生成了一个index.html的文件
该文件中也自动添加了我们打包的bundle.js文件
这个文件是如何生成的呢
默认情况下是根据ejs的一个模板来生成的在html-webpack-plugin的源码中有一个default_index.ejs模块
2.自定义HTML模板
如果我们想在自己的模块中加入一些比较特别的内容
比如添加一个noscript标签在用户的JavaScript被关闭时给予响应的提示比如在开发vue或者react项目时我们需要一个可以挂载后续组件的根标签
这个我们需要一个属于自己的index.html模块
!DOCTYPE html
html langheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0link relicon href% BASE_URL %favicon.icotitle% htmlWebpackPlugin.options.title %/title/headbodynoscriptstrongWere sorry but % htmlWebpackPlugin.options.title % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscriptdiv idapp/div!-- built files will be auto injected --/body
/html3.自定义模板数据填充
上面的代码中会有一些类似这样的语法% 变量 %这个是EJS模块填充数据的方式。
在配置HtmlWebpackPlugin时我们可以添加如下配置
template指定我们要使用的模块所在的路径title在进行htmlWebpackPlugin.options.title读取时就会读到该信息
const HtmlWebpackPlugin require(html-webpack-plugin)module.exports {plugins: [new HtmlWebpackPlugin({title: webpack-demo,template: ./index.html })]
}四、DefinePlugin
1.DefinePlugin的介绍
但是这个时候编译还是会报错因为在我们的模块中还使用到一个BASE_URL的常量
这是因为在编译template模块时有一个BASE_URL
link rel“icon” href“% BASE_URL %favicon.ico”但是我们并没有设置过这个常量值所以会出现没有定义的错误
这个时候我们可以使用DefinePlugin插件
2.DefinePlugin的使用
DefinePlugin允许在编译时创建配置的全局常量是一个webpack内置的插件不需要单独安装
const { DefinePlugin } require(webpack)module.exports {plugins: [new DefinePlugin({BASE_URL: ./,coder: codermq})]
}这个时候编译template就可以正确的编译了会读取到BASE_URL的值
五、Mode配置
Mode配置选项可以告知webpack使用相应模式的内置优化
默认值是production什么都不设置的情况下可选值有‘none’ | ‘development’ | ‘production’
这几个选项有什么样的区别呢
