《前端之路》之 webpack 4.0+ 的应用构建

目录一.版本二.webpack 的主体概念 2-1.入口 2-1-1.单页面入口 2-1-2.多页面应用的入口 2-2.输出 2-3.loader 2-4.plugins 三.如何使用 3-1 关于 resolve 解析的相关的疑问 4-1 优化(optimization) 5-1 插件(plugins) 6-1 开发中 server (devServer) 四.总结一.版本当前 webpack 版本 : v4.18.0 webpack -v // 4.18.0 同之前的版本不一样的地方…

《前端之路》之 Javascript 模块化管理的来世今生

目录第二章 - 04: Javascript 模块化管理的来世今生一.什么是模块化开发 1-1.模块化第一阶段 1-2.封装到对象 1-3. 对象的优化二.模块化管理的发展历程 2-1.CommonJS 2-2.CommonJS 与 ES6(ES2015) 的 import export 2-2-1. ES6 的 export 2-2-2. ES6 的 import 2-3.AMD 的 RequireJS 2-4.CMD 的 SaeJS 2-5.AMD 的 RequireJS 和 CMD…

[js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)

上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他的配置选项的探讨. 一.chunks选项这个属性非常有用,可以指定某个页面加载哪些chunk( 如:js文件 ) 我们可以用他做多个页面模板的生成. 比如,我们在实际开发中,做一个博客网站,一般来说有首页,文章列表页,文章详情页等等,这些页面都有一个特点,都要引入一些公共的js文件以及该页面特有的…

[js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意的添加自定义的数据 webpack.dev.config.js文件: var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry : { main : './src/js/main.js', cal…

[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.html文件会动态引入我们打包后生成的js文件呢?,我们可以使用插件html-webpack-plugin,首先安装这个插件npm install html-webpack-plugin --save-dev,好的,接下来就开始用这个插件了官方参考文档: 插件通用用法:https://webpack.j…

[js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entry webpack.dev.config.js文件代码: console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2 module.exports = { entry : ['./src/js/main.js', './src/js/calc.j…

[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在webpack使用图片资源,我们需要用file-loader来处理. 安装file-loader: npm install file-loader --save-dev 在src目录下面新建一个文件夹( img ) 存储图片一.demo3目录下面的index.html文件引入图片 <body> &l…

[js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法

我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease 1s; } 一.这是一个css3的过渡样式,我们知道,写css3的时候,需要加上浏览器前缀. 那么我们着这里就需要安装postcss-loader和autoprefixer插件安装postcss-loader: npm install postcss-loader --save-dev 安装au…

Webpack+vue2.0如何注册全局组件 (01)

Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想用vuejs写个单页面应用出来.兜兜转转地开始使用vue-router这个插件,阅读了vue-router前两个事例之后,发现了一个问题. 通过webpack导入.vue的组件文件的时候,弹出问题: [vue warn]: Failed to mount component:template or…

《前端之路》之二：数据类型转换 && 隐式转换 || 显式转换

目录 02:数据类型转换 && 隐式转换 || 显式转换 02:数据类型转换 && 隐式转换 || 显式转换在上一个章节中,我们介绍了 JavaScript 的基本的数据类型,由于是弱类型语言,所以不需要在很多时候去定义这个数据的类型,而且也不能够在定义了这个数据类型之后再去改变这个数据类型. 当遇到一个需要对数据类型进行改变的场景的时候,JS 就显示出来它的优势了,可以对数据类型进行轻松的转换,那么下面我们就开始介绍如何轻松的对数据类型进行转换,以及在转换的过程中…

[js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数

[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上) [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下) [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上) [js高手之路]深入浅出webpack教程系…

基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面

一.项目简介基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二.项目预览 (请在chrome手机模式下打开) 点击这里预览项目移动端扫描下方二维码可直接打开三.技术栈 MVVM框架:Vue.js 2.0 状态管理:Vuex 移动端组件库:Mint-ui 前端路由:Vue-router 数据交互:Vue-resource 打包工具:webpack 2.0 环境…

webpack 4.0 版本的简单使用

webpack 4.0 学习指南最近前端又要变天了,vue作者推出了vue-cli 3版本,并且里面使用了webpack 4. 但是webpack 3 和webpack 4 二者的使用方式完全不一样了,今天借这个机会就简单的说手webpack3和webpack4 二者的不同之处 A.........................安装不同................................... Webpack 3 下载完webpack 3 之后 npm install web…

《后端也要懂一点前端系列》使用webpack搭建项目

今天突然有兴致想要学习一下前端的技术,所以特此记录学习前端之路.由于之前在公司做的项目大部分都是关于JSP页面的增删改查,所以前端后端都是一个人来写的,对于前端还只是停留在js.html.css阶段,对于一些前端框架是一点也不了解,正好学习后端的时候遇到了cookie.session.token的问题,特此也简单的了解一下前端知识. 概念介绍大概在网上找了一些的教程,由于是想速成,所以先从搭建项目开始学起了.搭建项目使用的webpack,我觉得前端的webpack和后端的gradle.mave…

《前端之路》--- 重温 Egg.js

目录 <前端之路>--- 重温 Egg.js 一.基础功能 > 日志系统包含了四大层面的日志对象, 分别是 App Logger.App CoreLogger.Context Logger.Context CoreLogger.Controller Logger & Service Logger 二.总结 <前端之路>--- 重温 Egg.js 在 nodejs 发展日益健壮和稳定的情况下,我们在日常的开发中使用 node 已经是一件非常常规的事情了,那么对于我们…

《前端之路》- TypeScript(二) 函数篇

目录一.定义函数方法二.定义函数传参三.可选传参四.默认传参五.传递剩余参数六.函数重载七.箭头函数八.总结一.定义函数方法在 es5 中定时函数的方法有命名函数和函数表达式(匿名函数)这门两种.那么同样的,在 TypeScript 中,函数的定义是什么样子的呢? 1-1 命名函数这里需要注意的一点是: viod 类型,是函数不返回任何类型数据 TypeScript 语法 function func1(): string { return '213'; } functio…

《前端之路》- TypeScript (三) ES5 中实现继承、类以及原理

目录一.先讲讲 ES5 中构造函数(类)静态方法和多态 1-1 JS 中原型以及原型链例子一 1-2 JS 中原型以及原型链中,我们常见的 constructor.prototype.**proto** 这三者之间的关系 1-2 JS 中通过构造函数来实现类总结这篇文章中的内容会比较的多,而且在基础中是数据相对比较复杂的基础,主要是讲到了 JS 这门语言中如何实现继承.多态,以及什么情况如何定义私有属性.方法,共有属性.方法,被保护的属性和方法.明确的定义了 JS 中的访问边界问题,…

[js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解

接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install webpack@3.5.6 --save-dev ),然后创建基本的项目文件夹结构,好了,我们的又一个基本项目结构就搭建好了. 第一.开始通过webpack.config.js文件配置我们的webpack项目首先在项目文件夹demo2下面,新建一个webpack.config.js文件,这个web…

[js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法

什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loader,style-loader等等. 官方参考文档:https://webpack.js.org/loaders/ 我们从本文开始,重新搭建一个项目结构来解释下loader的用法. 一.项目结构搭建准备: 目录结构: demo3 dist src components modal.html modal…

[js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)

webpack 4.0.0-beta.0 新特性介绍

webpack 可以看做是模块打包机.它做的事情是:分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用.目前,webpack 总共发布了三个稳定版本.从17年八月底开始,经历了长达五个月的开发周期,webpack 团队通过增加大量新特性.bug修复.问题改善并于近期发布了 webpack 4.0.0 的 beta 版本.如果你对 webpack 感兴趣,下面我们就来学习一下 webpa…