webpack基础
webpack-基础
貌似这些属于编译原理的内容。
当时看了一点编译原理,当中的自动机,彻底懵。
不过大概了解了一点内容。感觉webpack一个打包工具非常类似于一个编译器,将一个文件,转换为另外一个文件。
一些概念
入口
入口,即寻找入口文件的及其依赖项的文件。即编译前的文件
配置文件为webpack.config.js中修改为
module.exports = { entry: "./app.js" }
使用这个可以设置入口文件为./app.js由该文件,可以寻找相关的依赖
出口
output告诉要生成那些文件
const path = require("path"); module.exports = { entry: "./app.js", output: { filename: "my-first-webpack.js" } }
导出该文件
loader
loader可以让webpack处理非js文件。
module: { rules: [ {test: /\.txt$/, use: 'raw-loader'} // 再遇到txt文件的时候,需要使用ras-loader进行转换一下 ] }
遇到txt文件的时候,需要使用raw-loader进行转换
类似于express中的中间件
raw-loader表示将文件作为字符串进行读取
插件
即打包,优化,定义环境中的变量等。
plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ]
入口文件
const config = { entry: './file.js', // 定义入口文件 } module.exports = config;
分离应用程序和第三方库
const config = { entry: { app: './src/app.js', vendors: './src/vendors.js' } } module.exports = config;
在上方中webpack会根据app和vendors分别创建两个互相没有任何依赖的依赖图,进行打包
在平常中,一个html文档,只使用一个入口文件。
出口
如何写出编译后的文件。
const config = { entry: { app: './src/app.js', vendors: './src/vendors.js' }, output: { filename: 'bundle.js', // 文件名称 path: '/home/assets' // 输出后的绝对路径 } } module.exports = config;
const config = { entry: { app: './src/app.js', vendors: './src/vendors.js' }, output: { filename: '[name].js', // 文件名称,name为对象名,输出的文件为app.js vendors.js path: '/home/assets' // 输出后的绝对路径 } } module.exports = config;
出口,即编译完成后生成的文件
load
load为代码转换,可以使用这个加载css文件,使用这个将typeScript转为JavaScript
安装
npm install --save-dev ts-loader
const config = { entry: { app: './app.js' }, output: { filename: '[name].js', // 文件名称,name为对象名,输出的文件为app.js vendors.js path: '/home/assets' // 输出后的绝对路径 }, module: { rules: [ {test: /\.ts$/, use: 'ts-loader'} ] } } module.exports = config;
使用这个可以在打包的时候,将ts文件转为js文件。
插件
创建同名的js文件
这里的是apply()函数。
const pluginName = "ConsoleLogOnBuildWebpackPlugin" class ConsoleLogOnBuildWebpackPlugin { apply(){ console.log('构建开始'); } }
使用插件
const webpack = require('webpack'); // 访问内置插件 const config = { entry: { app: './app.js' }, output: { filename: '[name].js', // 文件名称,name为对象名,输出的文件为app.js vendors.js path: '/home/assets' // 输出后的绝对路径 }, module: { rules: [ {test: /\.ts$/, use: 'ts-loader'} ] }, plugins: [ new webpack.optimize.UgifyJsPlugin(), new ConsoleLogOnBuildWebpackPlugin() ] } module.exports = config;
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
开源项目之架构分享
此次分享是我当初在开发某个系统时,参考的一些开源项目架构的思路和风格。 第一个是Jeesite,它的架构风格如下: 大家如果对jeesite感兴趣的话,可以百度搜索找到,不过那已经是半年多以前的事情,jeesite目前也发生较大的变化。 当初我在参考jessite这个思路时,不知道是什么原因使我没有加入module,其实从现在的角度出发,加上module也是一件不错的事情,module即模块,通过模块来扩展功能,这与我目前以service来扩展功能的思路不谋而合。 jeesite的common思路,我现在也一直再采用,common目前主要是放置常用工具类,不过,因为我们引入了Hutools开源项目,目前common主要是一些数据传输类,例如dto、queryvo或者是其他自定义工具类等等。 jeesite的core思路,我并没有采用,我还是按照service思路,公共模块,例如菜单,权限,用户,组织我将其抽象为一个公共service。 jeesite的web思路,与我现在的做法是一样,不过我考虑的是,一旦后期模块拆分分布式之类的,我可以轻松的通过service思路分离,不过我的serv...
- 下一篇
老板,你凭什么不和我谈钱
有一次面试,快结束的时候,HR问我: “你们90后应该不在乎钱吧?” 我本能的反应是:当然在乎!快点用钱砸我吧! 但为了委婉表达对钱的“欲望”,我说:“相信贵公司会有合理、公平的待遇。” HR回应:“年轻人,不用太在意钱,应该抓住机会。我们公司会提供很多锻炼机会,相信你可以很好地成长。” 面试结束后,我陷入了思考:难道我工作,不该为了钱? 这时,前辈Allen打醒了我,他说: “他凭什么让你别在意钱?找工作不就是为了挣钱吗?” 说到这里,也给大家推荐一个架构交流学习群:835544715,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,相信对于已经工作和遇到技术瓶颈的码友,在这个群里会有你需要的内容。 工作本来就是用劳动换取报酬 Allen曾经面试过一名应聘者,他问:“你对工资有什么要求?” “我希望可以在贵公司学习更多的东西,有所成长,工资多少我不介意。” Allen对这个回答并不满意。 “对钱的欲望很大程度上能反映一个员工的能力和...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Mario游戏-低调大师作品
- CentOS6,CentOS7官方镜像安装Oracle11G
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Windows10,CentOS7,CentOS8安装Nodejs环境
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS8编译安装MySQL8.0.19
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7