前端学习webpack
### 模块化
- 为了保证代码充分解耦,一个大的项目拆分成互相依赖的一个一个的小的模块,最后再通过简单的方式合并在一起
- 每一个js文件都可以看成一个单独的模块
在node这边(服务器端),提出CommonJs模块化规范
- 模块的引入 require (内置模块,第三方模块,自定义模块)
- 模块的导出 module.exports ||exports
浏览器:
- CMD sea.js AMD require.js
- UMD 处理兼容(require.js和CommonJS)
- es6module
- 模块创建 (每个js文件就是一个模块)
- 模块的引入(import)
import {str} from "./a.js" 解构赋值的方式获取到导出的每个变量或方法
import * as obj from "./a.js" obj.str
import str2 from "./a.js" 对默认导出的变量起个别名
- 模块的导出(export)
export let str ="hello"
export default str;
安装在项目里,尽量别安装在全局,在全局下容易引起版本的冲突
npm init -y 初始化本地配置文件 package.json文件
### webpack
npm install webpack --save-dev
在package.json里配置启动webpack的命令->.bin ->webpack.cmd->webpack/bin/webpack.js->当前目录下(基于package.json文件)webpack.config.js
在命令行 执行 npm run build 就能运行webpack
webpack.config.js 是webpack配置文件 webpack所有的操作都根据这个配置文件进行的
1.npm install webpack --save-dev
2.package.json->"scripts": {
"build":"webpack"
},
3.在项目下建一个webpack.config.js文件
### es6->es5
- babel (babel-core 核心功能包 babel-loader babel解析器)
npm install babel-core --save-dev
npm install babel-loader --save-dev --解析js
在webpack配置下js的解析器是babel-loader
-> {test:/\.js$/,use:"babel-loader",exclude:/node_modules/}
presets(预设)指编译的规则,它是plugins集合
npm install babel-preset-es2015 --save-dev ->es6转换es5
npm install babel-preset-stage-0 --save-dev ->解析es7
使用babel需要设置babel配置文件 .babelrc 在.babelrc设置presets和plugins
### 解析CSS
css-loader(解析css) style-loader (css代码放入style标签)
###解析less
npm install less less-loader --save-dev
### 解析图片
file-loader url-loader(依赖于file-loader)
- 将图片转换成base64编码 最好限制下图片大小 -base64方式
- 把图片重新命名然后再dist目录下输出 -请求图片地址的方式
### 字体图标
### html-webpack-plugin
npm install html-webpack-plugin --save-dev
根据html模板,自动把打包后的js插入html模板中,并且在dist目录下输出
### webpack-dev-server
npm install webpack-dev-server --save-dev
web服务器,代码更新时,自动打包,重新加载
在package.json里设置操作这个服务的命令
npm run dev
前端学习webpack的更多相关文章
- 前端小白webpack学习(二)
前一篇写了自我总结的webpack定义:为JavaScript服务的静态模块打包器 和几大基本概念 entry.output.plugins.loaders等.指路前端小白webpack学习(一) 下 ...
- 前端小白webpack学习(一)
俗话说得好,好记性不如烂笔头. 之前就在学习中看过webpack的教程,然而一段时间没用,火速的忘光了.写这篇博文,做个总结,也让自己以后有个地方回顾. 看webpack之前,我先去看了一下官方文档, ...
- web前端学习路线与书籍推荐
什么是web前端? 在以前,通俗的讲是网页制作,在现在,哼哼,可以参考这篇文章 http://tieba.baidu.com/p/4817153404 那么如果高效优雅的学习web呢? 注:以下纯属个 ...
- web前端学习就这9个阶段,你属于哪个阶段?
第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...
- webpack4 学习 --- webpack和webpack-dev-server
以前了解过webpack2, 所以对webpack 不是很陌生,就直接入主题吧.新建一个文件夹,就叫它webpack-tut吧.然后在文件中新建一个src 文件夹,存放我们的源文件,再在src 文件夹 ...
- web前端学习路线(含20个真实web开发项目集合)
目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨. Web前端工程师的岗位职责是利用HTML.CSS.Java.DOM ...
- Web前端学习攻略
HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- 前端学习 node 快速入门 系列 —— 初步认识 node
其他章节请看: 前端学习 node 快速入门 系列 初步认识 node node 是什么 node(或者称node.js)是 javaScript(以下简称js) 运行时的一个环境.不是一门语言. 以 ...
随机推荐
- 【转载】#458 Errors While Converting Between enum and Underlying Type
You can convert to an enum value from its underlying type by casting the underlying type (e.g. int) ...
- 【转】 ios的手势操作之UIGestureRecognizer浅析
一.概述 iPhone中处理触摸屏的操作,在3.2之前是主要使用的是由UIResponder而来的如下4种方式: - (void)touchesBegan:(NSSet *)touches withE ...
- [18/11/30] toString()方法 和 equals() 方法
一. toString() 方法 Object类中定义有public String toString()方法,其返回值是 String 类型 默认: return getClass().getNam ...
- 剑指offer23 从上往下打印二叉树
没有把队列的头部弹出,出现内存错误:
- SpringBoot 使用(三): 配置文件详解
代码从开发到测试要经过各种环境,开发环境,测试环境,demo环境,线上环境,各种环境的配置都不一样,同时要方便各种角色如运维,接口测试, 功能测试,全链路测试的配置,hardcode 肯定不合适,如S ...
- maven学习记录一——maven介绍及入门
1 Maven的简介 1.1 什么是maven 是apache下的一个开源项目,是纯java开发,并且只是用来管理java项目的 1.2 Maven好处 普通的传统项目 M ...
- js实现div滚动条在页面刷新 滚动条位置固定
思想:1.通过div的onscroll事件记录滚动条的scrollTop值,设置到document.cookie 2.页面加载时再读取document.cookie的值,设置给div的scrollTo ...
- HDU 1220 Cube(数学,找规律)
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1220 Cube Time Limit: 2000/1000 MS (Java/Others) M ...
- Eclipse关联tomcat
一,添加Tomcat Windows-->Preferences-->Server-->Runtime Enviroment添加一个tomcat,这里选择tomcat8.0 Next ...
- Java基础题:集合、String、性能、线程
转载自:Java基础题 https://yq.aliyun.com/articles/601786?utm_content=m_1000001149