Wbbpack --3配置
2024-09-03 20:42:07
Wbbpack --3配置
什么是webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包(modulebundler)当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle
module.exports = {
//新建一个文件夹 然后创建一个webpack.config.js文件
}
入口
module.exports = {
entry:{
// 告诉应用程序入口文件地址
app:'./src/index.js'
}
}
出口
output:{
filename:'[name].js' // 最终会打包成app.js app为入口文件配置的key值 即app
path:__dirname + '/dist'
// 最终会在当前文件夹下创建一个dist目录 目录中有app.js ————dirname表示绝对路径
}
Webpack安装方法
cnpm/ npm install webpack@3 -g
// 先装全局,在装局部否则会报错
cnpm / npm install webpack@3 -D
// tip : -D等于 (--save-dev) -S 等于 (--save) 安装完成后按webpack可以运行
Webpack插件
webpack4之所以能够使用cnpm run build
打包就是因为配置webpack插件,还有许多功能组件下文尽量写全
(坐等大佬手动写出webpack4版本的webpack3)
压缩js插件
plugins:[ new webpack.optimize.UglifyjsPlugin // 本身webpack就有这个功能这里直接配置接好了 ]
自动引入模块
new HtmlWebpackPlugin({ template: index.html' // 需要先引入插件 cnpm / npm install html-webpack-plugin -D })
最新文章
- FastDFS+Nginx(单点部署)事例
- ios NSThred多线程简单使用
- python 基础——常用日志装饰器
- CMD 下 进入 ORACLE
- cisco asa5520 IOS故障恢复
- android greenDao SQLite数据库操作使用的工具
- Java IO学习--(二)文件
- IFE第一天
- js来判断设备类型
- HttpClient+Jsoup模拟登陆贺州学院教务系统,获取学生个人信息
- C# 输出字符串到文本文件中
- ElasticSearch6.3.2------查询
- 转:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述
- Lepus(天兔)监控MySQL部署
- 【面试篇】必须掌握的Spring 常用注解
- Linux文件的所有权与权限
- JavaWeb应用项目部署到云ubuntu
- java的锁机制,synchronize与Lock比较
- css before和after伪元素应用
- 超详细解说Hadoop伪分布式搭建--实战验证【转】