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. 15. 3Sum (JAVA)

    Given an array nums of n integers, are there elements a, b, cin nums such that a + b + c = 0? Find a ...

  2. TZOJ 2569 Wooden Fence(凸包求周长)

    描述 Did you ever wonder what happens to your money when you deposit them to a bank account? All banks ...

  3. C# DataTable抽取Distinct数据(不重复数据)[z]

    DataTable dataTable;       DataView dataView = dataTable.DefaultView;       DataTable dataTableDisti ...

  4. DOCKER学习 docker

    DOCKER只能安装到LIUX系列机器上 如果WINDOWS想安装必须通过虚拟机来完成. 比如用VM,VBOX等 安装之前需要用ROOT账户 su 安装DOCKER (CE是个人版本,EE是企业版本) ...

  5. BFC是什么及能用它能做什么

    最近较为频繁的碰到了一个新的名词:BFc,每次都可以在相关的技术博客里面看到对其的简单介绍,刚开始以为自己懂了,但实际上没懂,今天就来搞清楚它到底是什么,以及我们能用他做什么? BFC:全名为 Blo ...

  6. Python 的 14 张思维导图汇总

    本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,后续会发布相应专题的文章). 首先,按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典 ...

  7. python 数据可视化 -- 清理异常值

    中位数绝对偏差(Median Absolute Deviation, MAD)用来描述单变量(包含一个变量)样本在定量数据中可变性的一种标准.常用来度量统计分布,因为它会落在一组稳健的统计数据中,因此 ...

  8. laravel-安装验证码扩展

    第一步:找到验证码扩展 链接:https://packagist.org/packages/mews/captcha 第二步:安装 环境要求:验证码需要开启php的gd库 . 执行命令(有时候安装会出 ...

  9. mac查看当前调用tcp的进程并关闭指定进程

    查看所有tcp进程 监听的端口 lsof -iTCP -sTCP:LISTEN 查看指定端口信息 lsof -i: 关闭指定进程 kill -

  10. python 练习4

    题目为信用卡消费管理系统: 主程序:main.py #!usr/bin/env python # encoding: utf-8 import conf,sys,time,re,os import j ...