webpack知识1

Posted maps..xy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack知识1相关的知识,希望对你有一定的参考价值。

webpack
与gulp的区别
gulp xxx
gulpfile.js
压缩合并代码
启动服务
提交git
往服务器提交文件
编译代码
----------------------------------------------
入口(entry)
输出(output)
loader
插件(plugins)

模块打包器
css images js json 视频 音频 iconfont

1.npm init
2.yarn add webpack webpack-cli --dev
mode:development(开发版本)|production(生产环境)
开发环境不进行压缩

 


webpack 核心打包工具
webpack-cli 命令行工具
babel-loader webpack和babel的桥梁
@babel-core babel的核心代码
@babel-preset-env 设置通用的es6编译版本
plugins:由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins 属性传入 new 实例

注意:为什么只使用了url-loader
webpack.dev.config.js中使用file-loader,但是依然打包成功了。我们需要了解file-loader和url-loader的关系。
url-loader和file-loader是什么关系
简答地说,url-loader封装了file-loader。url-loader不依赖于file-loader,即使用url-loader时,只需要安装url-loader即可,不需要安装file-loader,因为url-loader内置了file-loader。
url-loader工作分两种情况:
1.文件大小小于limit参数,url-loader将会把文件转为DataURL(Base64格式);
2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。

 






























以上是关于webpack知识1的主要内容,如果未能解决你的问题,请参考以下文章

前端工具之webpack

前端负责人教你使用 Webpack

webpack2学习随笔

typescript使用webpack配置步骤

wenpack系列

解决webpack打包速度慢的解决办法