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。

猜你喜欢

转载自www.cnblogs.com/mapsxy/p/10067869.html
今日推荐