### 模块化
- 为了保证代码充分解耦,一个大的项目拆分成互相依赖的一个一个的小的模块,最后再通过简单的方式合并在一起
- 每一个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的更多相关文章

  1. 前端小白webpack学习(二)

    前一篇写了自我总结的webpack定义:为JavaScript服务的静态模块打包器 和几大基本概念 entry.output.plugins.loaders等.指路前端小白webpack学习(一) 下 ...

  2. 前端小白webpack学习(一)

    俗话说得好,好记性不如烂笔头. 之前就在学习中看过webpack的教程,然而一段时间没用,火速的忘光了.写这篇博文,做个总结,也让自己以后有个地方回顾. 看webpack之前,我先去看了一下官方文档, ...

  3. web前端学习路线与书籍推荐

    什么是web前端? 在以前,通俗的讲是网页制作,在现在,哼哼,可以参考这篇文章 http://tieba.baidu.com/p/4817153404 那么如果高效优雅的学习web呢? 注:以下纯属个 ...

  4. web前端学习就这9个阶段,你属于哪个阶段?

    第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

  5. webpack4 学习 --- webpack和webpack-dev-server

    以前了解过webpack2, 所以对webpack 不是很陌生,就直接入主题吧.新建一个文件夹,就叫它webpack-tut吧.然后在文件中新建一个src 文件夹,存放我们的源文件,再在src 文件夹 ...

  6. web前端学习路线(含20个真实web开发项目集合)

    目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨. Web前端工程师的岗位职责是利用HTML.CSS.Java.DOM ...

  7. Web前端学习攻略

    HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript ...

  8. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  9. 前端学习 node 快速入门 系列 —— 初步认识 node

    其他章节请看: 前端学习 node 快速入门 系列 初步认识 node node 是什么 node(或者称node.js)是 javaScript(以下简称js) 运行时的一个环境.不是一门语言. 以 ...

随机推荐

  1. 【转载】#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) ...

  2. 【转】 ios的手势操作之UIGestureRecognizer浅析

    一.概述 iPhone中处理触摸屏的操作,在3.2之前是主要使用的是由UIResponder而来的如下4种方式: - (void)touchesBegan:(NSSet *)touches withE ...

  3. [18/11/30] toString()方法 和 equals() 方法

    一. toString() 方法 Object类中定义有public String toString()方法,其返回值是 String 类型  默认: return getClass().getNam ...

  4. 剑指offer23 从上往下打印二叉树

    没有把队列的头部弹出,出现内存错误:

  5. SpringBoot 使用(三): 配置文件详解

    代码从开发到测试要经过各种环境,开发环境,测试环境,demo环境,线上环境,各种环境的配置都不一样,同时要方便各种角色如运维,接口测试, 功能测试,全链路测试的配置,hardcode 肯定不合适,如S ...

  6. maven学习记录一——maven介绍及入门

    1       Maven的简介 1.1     什么是maven 是apache下的一个开源项目,是纯java开发,并且只是用来管理java项目的 1.2     Maven好处 普通的传统项目 M ...

  7. js实现div滚动条在页面刷新 滚动条位置固定

    思想:1.通过div的onscroll事件记录滚动条的scrollTop值,设置到document.cookie 2.页面加载时再读取document.cookie的值,设置给div的scrollTo ...

  8. HDU 1220 Cube(数学,找规律)

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1220 Cube Time Limit: 2000/1000 MS (Java/Others)    M ...

  9. Eclipse关联tomcat

    一,添加Tomcat Windows-->Preferences-->Server-->Runtime Enviroment添加一个tomcat,这里选择tomcat8.0 Next ...

  10. Java基础题:集合、String、性能、线程

    转载自:Java基础题 https://yq.aliyun.com/articles/601786?utm_content=m_1000001149