webpack学习总结(一)
* webpack安装
1、 安装最新node,node自带npm包管理器;
2、 全局模式安装webpack(只有将webpack在全局模式下安装才能在命令行直接通过webpack执行命令)
$npm install webpack -g
3、切换到项目目录

4、然后在本地项目安装依赖包webpack(在本地项目中加载了依赖包才能在项目中通过require来引入webpack)
如果项目没有package.json,先通过npm init创建package.json,不在npm上发布项目,创建时命令行中出现的选项就不重要

* webpack使用,打包js模块

创建html文件,并在文件中引入打包文件bundle.js(项目有关的所有的文件打包之后合成这一个文件,html最后只引入这一个打包文件)
创建空的打包文件bundle.js、入口文件entry.js(所有的内容的显示入口)

配置webpack(配置之后在命令行执行命令时只需输入webpack,然后命令就会自动参考配置文件中配置选项来打包文件)
创建配置文件webpack.config.js

执行webpack命令打包文件:

运行index.html

* webpack打包其他类型的模块
webpack本身只能打包原生JavaScript模块,如果要打包其他类型的文件模块,例如:css、图片、json等,需要通过loader转换器将各种类型的资源转换成JavaScript模块。
参考资料:
入门Webpack,看这篇就够了:http://www.jianshu.com/p/42e11515c10f
webpack学习总结(一)的更多相关文章
- 【原】webpack学习笔记
之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...
- webpack学习(入门基础)
webpack的学习webpack是什么?1:加载模块(将JS.sass/less.图片等作为模块来处理使用) 2:进行打包 webpack的优势?1:webpack以commonJS(JS的规范)的 ...
- webpack学习笔记(二)-- 初学者常见问题及解决方法
这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
- Webpack学习-Plugin
原文地址:http://wushaobin.top/2019/03/15/webpackPlugin/ 什么是Plugin? 在Webpack学习-工作原理(上)一文中我们就已经介绍了Plugin的基 ...
- webpack 学习资料
webpack 学习资料 webpack 学习资料 网址 webpack 中文版 https://webpack.docschina.org/configuration/dev-server/
- webpack学习(六)—webpack+react+es6(第3篇)
接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...
- webpack学习(六)—webpack+react+es6(第2篇)
接上篇 webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...
- webpack学习(五)—webpack+react+es6(第1篇)
如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)— webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都 ...
- webpack学习(三)
前篇:webpack学习(二) jquery不需要在项目中自己下载,而是作为一个模块引入.jquery的存放路径是在 node_modules目录下.1.首先给项目安装jquery,npm insta ...
随机推荐
- (23)ajax实现上传文件的功能
form表单上传文件 urls.py from django.conf.urls import urlfrom django.contrib import adminfrom app01 import ...
- 【添加最新版本的mysql的jdbc连接jar包】java.math.BigInteger cannot be cast to java.lang.Long异常
[问题描述] 从我的电脑把项目拷贝到guo小中的win8电脑,but出现了那个错误,估计他的mysql是最新版本的. [如何下载连接jar包] 链接:https://pan.baidu.com/s/1 ...
- jQuery -> 基于当前元素的遍历
版权声明:本文为博主原创文章,转载请注明出处 https://blog.csdn.net/FeeLang/article/details/26257549 假设我们已经通过jQuery方法选中了一组元 ...
- Oracle12C版本安装步骤
一.下载路径 http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html file1,file ...
- AI大牛阿里VP贾扬清
贾扬清生长于浙江绍兴,2002年考入清华,并在清华拿到硕士学位,其后远赴UC伯克利获得博士学位. 2013年,贾扬清博士毕业加入之前就已实习了2年的Google,在Jeff Dean麾下任职,参与Te ...
- 谈谈在 .Net 平台上的 软件生态 和 软件生产力
我们可以先看看这篇文章 : <看 StackOverflow 如何用 25 台服务器撑起 5.6 亿的月 PV> http://www.nowamagic.net/librarys/ ...
- 关注 硬件 发展, 转载一篇介绍 VHDL 的文章
<VHDL学习笔记> https://www.eefocus.com/hrbeulvcaho/blog/12-11/289109_978e2.html VHDL 和 “可编程逻辑阵列” ...
- ML(附录4)——拉格朗日乘数法
基本的拉格朗日乘子法(又称为拉格朗日乘数法),就是求函数 f(x1,x2,...) 在 g(x1,x2,...)=C 的约束条件下的极值的方法.其主要思想是引入一个新的参数 λ (即拉格朗日乘子),将 ...
- windows python监听文件触发脚本
from watchdog.events import * class FileEventHandler(FileSystemEventHandler): def __init__(self): Fi ...
- MySQL体系架构
MySQL体系架构 学习一门数据库系统首先得了解它的架构,明白它的架构原理对于后期的分析问题和性能调优都有很大的帮助,接下来就通过分析架构图来认识它. 数据库:物理操作系统文件或者其它文件的集合,在m ...