专栏首页web前端教室【先行者】webpack学习笔记(节选)

【先行者】webpack学习笔记(节选)

这一段时间咱们主要搞一个前端开发的环境的配置,

因为许多同学有这方面的需求。

然后一节课未必讲得完,所以会分成二三次来讲。

<!-- -->

1、我在本地电脑 的d盘,新建一个目录,test_app,

做为开发的目录。

2、要全局的安装 webpack,

<!--

因为我的电脑已经全局的安装过了webpack,

所以就不再演示webpack全局安装的过程。

-->

全局安装 webpack,npm install webpack -g

在test_app目录中,局部的安装webpack,

npm install webpack --save-dev

咱们现在用的是 webpack 4.x

<!-- 我之前 已经使用 cnpm的源,所以速度会相对快一些。 -->

3、在test_app中,新建三个目录,

- config

- dist

- src

4、初始化

npm init -y,

-y的意思就是package.json里都按默认来设置

5、开始压缩一下试试看效果

。。。。

<!-- -->

webpack 4.x 它的默认的入口是src里面的index.js,

可以先运行webpack来打包。

webpack有二种打包环境,

- 开发环境,development

- 生产环境,production

在打包的时候,输入 webpack --model=development或production,

就没有警告了。

<!-- -->

它们的关系是这样,

webpack.dev.js,主要管一些压缩、打包、入口、服务、输出文件方面的事情;

package.json,主要负责一些依赖项、命令的定义之类的。

就是webpack跟业务有关;

package.json,它跟开发环境的配置有关。

<!-- -->

。。。。(略、略、略)

<!-- -->

今天的内容就么多,

下周日,咱们继续搞,

什么js的压缩啊,css中图片的处理,等等。

本文分享自微信公众号 - web前端教室(webfeel),作者:老尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-09-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 最适合新人的-webpack配置实例(1)

    webpack这东西配置项比较多,讲起来比较琐碎,整个视频大概一个多小时,放在微信公众号上来发的话,基本上不太可能有人会看得完。

    web前端教室
  • 【免费视频教程】webpack原理与实践【1】webpack预备知识

    打包工具帮你获得一些准备用于部署的js和css等,把它们转化为适合浏览器的可用的格式。

    web前端教室
  • 零基础如何建立“前端技术体系”? --本周日晚“先行者课程”,给你示范

    昨天的《WEB前端新人,怎么样构建自己的“前端技术体系”?用以在面试中打败其它竞争者》大概的写了下新人如何建立属于自己的前端技术体系,比较简单,正好今晚的先行者...

    web前端教室
  • webpack 中版本兼容性问题错误总结

    一定不要运行npm i  XXX  -g(-d) 一定要指定版本,尽量低版本,也不最新版本,会导致不兼容和指令不一样的问题。

    李文杨
  • Webpack系列-第一篇基础杂记 前言简介配置实践&优化总结

    公司的前端项目基本都是用Webpack来做工程化的,而Webpack虽然只是一个工具,但内部涉及到非常多的知识,之前一直靠CV来解决问题,之知其然不知其所以然,...

    菜的黑人牙膏
  • Webpack 4正式发布!从0配置到生产模式,你需要知道的都在这里了

    为中大型项目提供webpack的配置并不是什么大问题。 然而,对于较小的项目来说,这很麻烦,特别是当你想要启动一些玩具应用时。

    疯狂的技术宅
  • webpack安装异常

    webpack中文指南:https://zhaoda.net/webpack-handbook/index.html

    Dawnzhang
  • webpack4.0各个击破(10)—— Integration篇

    webpack在工具链中的角色定位是非常清晰的,那么为了与其他流程进行合作,就需要使用任务管理工具来启动webpack,本文介绍两种常见的方法。

    大史不说话
  • 也来说说webpack

    在CLI模式中,第一个参数是入口文件,第二个参数是输出文件,并读取当前cwd目录下面的webpack.config.js配置,根据配置生成对应的bundle.j...

    libo1106
  • 快速了解 前端打包 webpack

    webpack 用于编译 JavaScript 模块,是 JavaScript 静态模块的打包工具。从 webpack v4.0.0 开始,可以不用引入一个配置...

    王念博客

扫码关注云+社区

领取腾讯云代金券