简易webpack 入门
webpack 模块打包机
作用:将浏览器不识别的语言转化成浏览器识别的语言
工作流程
通过一个入口文件 找到这个入口文件所依赖的所有模块,将这些文件打包成一个或多个文件
如何使用:
1、安装
cnpm i webpack@3.5.3 -g (全局)
2、 a、初始化仓库 npm init -y
b、cnpm i webpack@3.5.3 --save-dev(局部安装,只需要在使用webpack的文件夹中安装即可)
3、创建一个文件 webpack.config.js //配置文件
4、 安装 一些包
a、首先安装这些包 npm一次性安装多个依赖模块,模块之间用空格隔开
npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
b、处理css的loader
npm install --save-dev style-loader css-loader sass-loader node-sass
5、 使用插件plugin
cnpm i html-webpack-plugin --save-dev //作用帮我们生成一个与src平及的模板
6/创建服务器 热更新
cnpm i webpack-dev-server@2 --save-dev
简易webpack 入门的更多相关文章
- webpack入门教程之Hello webpack(一)
webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...
- webpack入门——webpack的安装与使用
一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...
- 一小时包教会 —— webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- Webpack 入门指南 - 3. Hello, Angular2!
Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目 ...
- Webpack 入门指南 - 2.模块
这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长 ...
- Webpack 入门指南 - 1.安装
Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...
- webpack入门和实战(一):webpack配置及技巧
一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...
- webpack入门--前端必备
webpack入门--前端必备 什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来 ...
- webpack入门笔记
此为第一篇主要是webpack入门笔记: http://if-true.com/2015/10/16/webpack-tutorial-translate.html
随机推荐
- 2018-2019-2 20175126谢文航 实验二《Java面向对象程序设计》实验报告
一.实验报告封面 课程:Java程序设计 班级:1751 班 姓名:谢文航 学号:20175126 指导教师:娄嘉鹏 实验日期:2019年4月17日 实验时间:--- 实验序号:实验二 实验名称:Ja ...
- shp2pgsql向postgresql导入shape数据
1. 准备好Shape文件(不仅仅是.shp文悠扬,还要有其他相关数据文件,包括.shx..prj..dbf文件). 2. 使用命令将Shape数据转换为*.sql文件 shp2pgsql -s 38 ...
- VSCode的使用
前后端分离的,先打开vs,打开你的项目,在项目根目录中找到.vs文件加,找到.vs\config\applicationhost.config,然后打开找到你项目的IIS Express配置,例如:& ...
- 关于webservlet 请求异步处理,链接未关闭出现的bug
webservlet +redis 的消息发布订阅 ,挺好的 当请求到来,向redis server申请一个频道 ,然后等着另一端架设是B 处理完毕获得到处理信息调用redis ,使用redis 往 ...
- mysql 聚集索引和非聚集索引问题(整理)
mysql的聚集索引和非聚集索引 前几天做了一个面试,从优化数据库谈到索引,最后问了我聚集索引和非聚集索引的问题.当时那个叫悔恨啊,平时学习mysql索引这方便的知识,也都看到了这样的字眼,,但总的来 ...
- 编辑gif
在撰写文档的过程中,为了清晰的表述我们的内容经常会加入一些图片.对于 `.jpg` 或 `.png` 的静态图我们可以直接 使用windows自带的照片编辑器编辑即可.对于如 licecap 录制出来 ...
- Pytorch之训练器设置
Pytorch之训练器设置 引言 深度学习训练的时候有很多技巧, 但是实际用起来效果如何, 还是得亲自尝试. 这里记录了一些个人尝试不同技巧的代码. tensorboardX 说起tensorflow ...
- NC 自定义项参照设置为查询条件
select * from pub_query_condition where pk_templet in (select id from pub_query_templet where node_c ...
- Koa源码分析(一) -- generator
Abstract 本系列是关于Koa框架的文章,目前关注版本是Koa v1.主要分为以下几个方面: 1. Koa源码分析(一) -- generator 2. Koa源码分析(二) -- co的实现 ...
- thinkpadE系列重装系统:u盘启动
一.下载深度装机大师,制作启动u盘. 二.重启电脑:按F1;进入bios设置: thinkpad e430c笔记本使用u盘装系统时无法使用u盘启动,这是由于thinkpad e430c笔记本u ...