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 入门的更多相关文章

  1. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  2. webpack入门——webpack的安装与使用

    一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...

  3. 一小时包教会 —— webpack 入门指南

    什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...

  4. Webpack 入门指南 - 3. Hello, Angular2!

    Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目 ...

  5. Webpack 入门指南 - 2.模块

    这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长 ...

  6. Webpack 入门指南 - 1.安装

    Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...

  7. webpack入门和实战(一):webpack配置及技巧

    一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...

  8. webpack入门--前端必备

    webpack入门--前端必备 什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来 ...

  9. webpack入门笔记

    此为第一篇主要是webpack入门笔记: http://if-true.com/2015/10/16/webpack-tutorial-translate.html

随机推荐

  1. 洛谷P3655 差分数组 树状数组

    题目链接:https://www.luogu.org/problemnew/show/P3655 不一定对,仅供参考,不喜勿喷,不喜勿喷. 先copy洛谷P3368 [模板]树状数组 2 题解里面一位 ...

  2. nodejs 开启http服务器

    1.首先安装node.js windows地址:https://nodejs.org/dist/v10.15.3/node-v10.15.3-x64.msi 配置成功的标志: 若没成功,也有可能是没有 ...

  3. 记一次win10+oracle11.2安装

    下载安装文件,地址:链接:https://pan.baidu.com/s/1gObmWv5_w2Y4Jlf2-RkBYA 密码:1rx9 安装手册参考:链接:https://pan.baidu.com ...

  4. 大数据下基于Tensorflow框架的深度学习示例教程

    近几年,信息时代的快速发展产生了海量数据,诞生了无数前沿的大数据技术与应用.在当今大数据时代的产业界,商业决策日益基于数据的分析作出.当数据膨胀到一定规模时,基于机器学习对海量复杂数据的分析更能产生较 ...

  5. angular 遍历foreach

    1.angular遍历angular.forEach(groups,function (group) { })

  6. 观察者模式C#实现实例(一)

    1.用例情景 1)定义一个闹钟(目标类),里面我们感兴趣的是时间值times,当times大于9.15时,通知观察者. 2)定义两个观察者,userA,userB,当收到times值时,作出判断,当t ...

  7. Redis分布式缓存

    Redis 主 slave 数据库优化-- 加inex, 分区 JVM调优--参数设置,比如偏向于计算的如何设置? 线程池:queue放满了之后,有什么方式能让他不拒绝掉?blockqueue就等在那 ...

  8. 如何修改PCB后更新到原理图(以AD为例)

    实际绘图过程中会有多种情况发生,例如根据以前的项目做修改应用于新的项目.只有PCB没有原理图....... 如何通过修改PCB后更新到原理图(主要在PCB中增加元器件以及添加网络标号进行连线后更新到原 ...

  9. Unity3D-RayMarch-几何图元1-添加基本着色模型

    效果图: 使用phong着色模型,将环境光.物体的漫反射光.镜面光三种光效加合而得到上图的效果 raymarch 的shader代码: // Upgrade NOTE: replaced '_Obje ...

  10. wsl

    1.win10设置为开发人员模式,并安装subsystem for linux(命令行输入bash就可以安装) 2.登录并su到root,然后修改/etc/sudoers,在最后一行加(一定要在最后一 ...