1.webpack-dev-server插件的基本使用

入门程序

const path = require('path');

// 导出一个Webpack的配置对象(通过node中的模块操作,向外暴露了一个配置对象)
module.exports = {
// 需要在这里手动指定入口 和 出口
entry : path.join(__dirname, './src/main.js'), // 入口:表示要使用webpack打包那一个文件
output : {
// 输出文件的相关配置
path : path.join(__dirname, './dist'), // 出口:表示打包好的文件,要输出到哪一个目录中去
filename : 'bundle.js' // 指定输出的文件名称
}
} // ===========================================================
// 当我们敲下命令:webpack 之后执行的操作
// 1. 并没有通过命令的方式来指定入口和出口
// 2. 首先获取寻找一个webpack.config.js 这个文件
// 3. 如果存在的话,就回去解析执行这一个文件, 当解析执行完配置文件之后,就得到了配置文件中导出的配置文件对象
// 4. 当webpack拿到了配置对象之后,就拿到了指定的如何出口,然后开始进行打包构建项目
// 5. 需要package.json 文件中配置"scripts": {
// "test": "echo \"Error: no test specified\" && exit 1",
// "dev" : "webpack-dev-server"
// }
// 然后就可以通过执行命令: npm run dev 的命令来启动webpack-dev-server 这个工具了
// 6. 需要在本地安装一下webpack 这个(本地安装,不是全部安装)
// ===========================================================

main.js

// 这是项目中JS的入口文件
// 1. 导入jquery(从node_models 中引入JQuery这个包, 这是ES6中的一个导入模块的方式)
// 直接使用的话,浏览器会不支持这个,会报错!!!
import $ from 'jquery';
// 类似于jQuery的也是不支持的
// const $ = require('jquery'); $(function () {
// 设置隔行变色的效果
$('li:odd').css('backgroundColor', 'black');
$('li:even').css('backgroundColor', function () {
return '#' + '097634';
});
});

// ===========================================================
// 知识点总结:
// 基于Webpack的项目的优点???
// 1. 可以处理JS文件中的 相互依赖关系
// 2. webpack能够处理js的兼容问题(包括ES6的一些新的特性, 可以把一些高级的浏览器的语法转换为一些低级的,浏览器可以正常识别的语法)
// 3. webpack 要打包的文件路径  输出文件的路径信息
// ===========================================================

//
===========================================================
// 1. 使用webpack-dev-server (类似于nodemon 这个工具)  这个工具可以实现自动打包编译的功能
// 2. 这个工具的用法和webpack的用法,
完全一样
// 3. 由于是在项目中安装的webpack-dev-server, 因此无法把这个当做一个脚本命令在cmd等终端命令中来使用(需要使用bpm install --save -g)
// 4. 运行成功之后,默认是可以直接通过地址:http://localhost:8080/ 这个URl地址来访问了
// 5. 注意webpack-dev-server 帮我们打包生成的bundle.js 文件,
并没有存放在实际的物理磁盘中,而是直接托管到了电脑的内存中了,因此在我们项目的根目录下面,根本找不到这一二个打包好的bundle.js文件
// 6. 这个工具实际上是以一种虚拟的方式,把代码托管到哦咱们的项目的根目录中了,虽然看不到,但是可以认为他存在约dist src node_models 同级别下面,名称文bundle.js 文件
// 7. 这样做的好处::一个字---块!!!(如果放在磁盘中,也会消耗磁盘读写速度!!!)
//
===========================================================

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack的使用</title>
<!--不推荐在这里引入任何js和CSS文件, main.js中的一些新的语法, 但是浏览器不支持, 可以通过webpack这个前端构建工具,
解决方案: 可以通过引入webpack生成的bundle.js文件来实现ES6的一些新的语法(浏览器兼容)
-->
<!--<script src="main.js"></script>--> <!--
1. 注意事项: 由于页面中引入的 bundle.js 文件实际上不是这一个bunlde.js 文件(是处于根目录下面的一个虚拟地址下面的bundle.js 文件,
如果这里直接引入自己定义生成的../dist/bundle.js 文件,后面也是无法正常访问到这一个文件的 )
2. 为了实现页面的实时代码更新后的实时刷新功能,需要在这里依然怒根路径下面的那一个 bundle.js 文件(关键)
-->
<!--<script src="../dist/bundle.js"></script>-->
<script src="/bundle.js"></script>
</head>
<body>
<!--这个是欢迎页面-->
<ul>
<li>这是第0个li</li>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
</ul>
</body>
</html>

package.json

{
"name": "VUEJS",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.3.1",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
},
"devDependencclsies": {
"webpack-dev-server": "^3.1.9"
}
}

1.1 第一种配置配置方法

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 80 --contentBase src --hot"
},

通过以上命令可以配置端口,根路径信息,热加载信息

1.2 第二种配置方法

const path = require('path');

// 2. 启用热更新的第二步
const webpack = require('webpack'); // 导出一个Webpack的配置对象(通过node中的模块操作,向外暴露了一个配置对象)
module.exports = {
// 需要在这里手动指定入口 和 出口
entry : path.join(__dirname, './src/main.js'), // 入口:表示要使用webpack打包那一个文件
output : {
// 输出文件的相关配置
path : path.join(__dirname, './dist'), // 出口:表示打包好的文件,要输出到哪一个目录中去
filename : 'bundle.js' // 指定输出的文件名称
},
devServer : {
// 配置一个对象信息( dev-server的第二种方式)
// --open --port 80 --contentBase src --hot
open : true, // 设置一下自动打开浏览器
port : 80, // 配置一下端口信息
contentBase : 'src', // 指定根目录信息
hot : true, // 1. 启用热更新的第一步
},
plugins : [
// 3. 配置热更新的第三步, 创建一个热更新的模块对象
new webpack.HotModuleReplacementPlugin()
]
}

2.html-webpack-plugin插件的基本作用

const path = require('path');

// 2. 启用热更新的第二步
const webpack = require('webpack'); // 导入可以在内存中生辰HTML页面的插件
// 【插件的主要作用】:
// 1. 自动在内存中根据指定的页面生成一个在内存中的页面
// 2. 会自动将打包好的bundle.js 这个文件追加在页面上去
const htmlWebpackPlugin = require('html-webpack-plugin'); // 导出一个Webpack的配置对象(通过node中的模块操作,向外暴露了一个配置对象)
module.exports = {
// 需要在这里手动指定入口 和 出口
entry : path.join(__dirname, './src/main.js'), // 入口:表示要使用webpack打包那一个文件
output : {
// 输出文件的相关配置
path : path.join(__dirname, './dist'), // 出口:表示打包好的文件,要输出到哪一个目录中去
filename : 'bundle.js' // 指定输出的文件名称
},
devServer : {
// 配置一个对象信息( dev-server的第二种方式)
// --open --port 80 --contentBase src --hot
open : true, // 设置一下自动打开浏览器
port : 80, // 配置一下端口信息
contentBase : 'src', // 指定根目录信息
hot : true, // 1. 启用热更新的第一步
},
plugins : [
// 3. 配置热更新的第三步, 创建一个热更新的模块对象
new webpack.HotModuleReplacementPlugin(),
// 【注意事项】 当我们使用了这个html-webpack-plugin 之后, 我们就不需要手动处理bundle.js 的引用路径信息了,因为这个插件已经帮我们自动创建了一个合适的script标签,并且引入了正确的路径信息(内存中的 bundle.js)
new htmlWebpackPlugin({
// 创建一个在内存中生成html的插件
template : path.join(__dirname, './src/index.html'), // 指定一个模板页面,将来会文件指定的页面路径,去生成内存中的页面
filename : 'index.html' // 新生成的html文件的名称
})
]
}

3. 使用loader配置处理CSS样式表的第三方插件

第一步:安装 css-loader, style-loader

第二步:使用ES6的语法引入样式文件

// 2. 使用import语法导入CSS的样式表( 非js模块)
// webpack 默认只能打包处理JS类型的文件,无法处理其他的非JS类型的文件
// 如果需要处理非js的文件,需要安装一些合适的第三方加载器
// 2.1 CSS文件的加载器: 安装 style-loader css-loader
// 2.2 在webpack.config.js这个配置文件上面,新增一个配置节点,叫做module, 添加一个rules属性, 这个数组中存放了一些匹配和一些处理规则
import './css/index.css'
第三步:配置webpack.config.js
module : {
// 这个节点用于配置所有的第三方模块加载器
rules : [
// 在这里配置所有第三方的匹配规则,(匹配所有以.css结尾的文件)
{
test : /\.css$/,
use : ['style-loader', 'css-loader']
// 对所有的CSS格式的文件实现一个CSS样式处理(使用加载器进行处理css样式的文件)
}
]
}

4. 使用loader配置处理less文件的第三方插件

第一步:安装less, less-loader

第二步:使用ES6导入less文件

module : {
// 这个节点用于配置所有的第三方模块加载器
rules : [
// 在这里配置所有第三方的匹配规则,(匹配所有以.css结尾的文件)
{
test : /\.css$/,
// 注意这些CSSloader的调用方式是从右到左的顺序来调用的
use : ['style-loader', 'css-loader']
// 对所有的CSS格式的文件实现一个CSS样式处理(使用加载器进行处理css样式的文件)
},
{
// less 也是一种未编译的CSS
test : /\.less$/,
// 先编译成css文件,然后执行上面的cdd步骤
use : ['style-loader', 'css-loader', 'less-loader']
}
]
}

5.使用webpack配置处理scss文件的第三方插件

第一步:安装sass-loader,node-sass

第二步:使用Es6语法导入模块信息

// 4. 导入scss文件
import './css/index.scss'
第三步:配置加载器loader
module : {
// 这个节点用于配置所有的第三方模块加载器
rules : [
// 在这里配置所有第三方的匹配规则,(匹配所有以.css结尾的文件)
{
test : /\.css$/,
// 注意这些CSSloader的调用方式是从右到左的顺序来调用的
use : ['style-loader', 'css-loader']
// 对所有的CSS格式的文件实现一个CSS样式处理(使用加载器进行处理css样式的文件)
},
{
// less 也是一种未编译的CSS
test : /\.less$/,
// 先编译成css文件,然后执行上面的cdd步骤
use : ['style-loader', 'css-loader', 'less-loader']
},
{
// 处理SCSS格式样式表信息
test : /\.scss$/,
use : ['style-loader', 'css-loader', 'sass-loader']
}
]
}

6.Webpack中url-loader 的使用

6.1 图片的处理

第一步:安装url-loader, file-loader

第二步:开始配置参数信息

module : {
// 这个节点用于配置所有的第三方模块加载器
rules : [
// 在这里配置所有第三方的匹配规则,(匹配所有以.css结尾的文件)
{
test : /\.css$/,
// 注意这些CSSloader的调用方式是从右到左的顺序来调用的
use : ['style-loader', 'css-loader'] // 对所有的CSS格式的文件实现一个CSS样式处理(使用加载器进行处理css样式的文件)
},
{
// less 也是一种未编译的CSS
test : /\.less$/,
// 先编译成css文件,然后执行上面的cdd步骤
use : ['style-loader', 'css-loader', 'less-loader']
},
{
// 处理SCSS格式样式表信息
test : /\.scss$/,
use : ['style-loader', 'css-loader', 'sass-loader']
},
{
test : /\.(jpg|png|gif|bmp|jpeg)$/,
// 1. 由于file-loader 是url-loader内部支持的,因此不需要在这里引入, 一个loader是不需要使用数组的
// 2. 这里的传参类似于URL传参
// 3. limit给定的值是图片的大小,如果图片大小(单位byte)大于或者等于给定的limit值,则不会转换为base64编码格式的值
// 4. 如果小于的limit, 就会被转换为base64编码的字符串
// 5. 为了实现图片的名字不被修改, 这里需要配置一下图片的参数信息(后面的会覆盖掉前面的图片)
// 6. 为了实现不同文件夹下面的同名文件不能冲突,这里需要随机生成一个hash值(默认是一个32位的,这里只取出前面的8位数)
use : 'url-loader?limit=3276&name=[hash:8]-[name].[ext]'
}
]
}

6.2 字体文件的处理

第一步:安装url-loader

第二步:导入bootstrap样式文件

// 5. 导入bootstrap样式(如果需要使用路径的方式来引入node_models中的 相关文件,
// 可以直接省略 node_models这个目录,然后跟上路径信息, 不写node_models也是可以的)
import 'bootstrap-3.3.5/dist/css/bootstrap.css'
第三步:配置字体文件的参数
module : {
// 这个节点用于配置所有的第三方模块加载器
rules : [
// 在这里配置所有第三方的匹配规则,(匹配所有以.css结尾的文件)
{
test : /\.css$/,
// 注意这些CSSloader的调用方式是从右到左的顺序来调用的
use : ['style-loader', 'css-loader'] // 对所有的CSS格式的文件实现一个CSS样式处理(使用加载器进行处理css样式的文件)
},
{
// less 也是一种未编译的CSS
test : /\.less$/,
// 先编译成css文件,然后执行上面的cdd步骤
use : ['style-loader', 'css-loader', 'less-loader']
},
{
// 处理SCSS格式样式表信息
test : /\.scss$/,
use : ['style-loader', 'css-loader', 'sass-loader']
},
{
test : /\.(jpg|png|gif|bmp|jpeg)$/,
// 1. 由于file-loader 是url-loader内部支持的,因此不需要在这里引入, 一个loader是不需要使用数组的
// 2. 这里的传参类似于URL传参
// 3. limit给定的值是图片的大小,如果图片大小(单位byte)大于或者等于给定的limit值,则不会转换为base64编码格式的值
// 4. 如果小于的limit, 就会被转换为base64编码的字符串
// 5. 为了实现图片的名字不被修改, 这里需要配置一下图片的参数信息(后面的会覆盖掉前面的图片)
// 6. 为了实现不同文件夹下面的同名文件不能冲突,这里需要随机生成一个hash值(默认是一个32位的,这里只取出前面的8位数)
use : 'url-loader?limit=3276&name=[hash:8]-[name].[ext]'
},
{
// 用于处理bootstrap中的字体文件的loader项
test : /.(ttf|eot|svg|woff|woff2)$/,
use : 'url-loader'
}
]
}

6.  Webpack中Babel的配置

第一步:使用ES6的语法编写代码

import $ from 'jquery';
import './css/index.css'
import './css/index.less'
import './css/index.scss'
import 'bootstrap-3.3.5/dist/css/bootstrap.css' // class 关键字是ES6中提供的新的语法,是用来实现ES6中面向对象编程的方式
class Person {
// 1. static关键字用于创建静态属性
// 2. 所谓的静态属性就是可以直接通过类名+info的方式来直接获取的方式
// 3. 实例属性是只能通过类的实例对象才可以访问的属性
static info = {name : 'zhangsan', age : 12}
} // 实现面向对象的编程(Class 是从后端语言借鉴过来的,来实现面向对象编程的)
var pl = new Person(); // 在Webpack中默认只能处理一部分ES6的新语法,一些更高级的Es6语法和ES7语法,Webpack是处理不了的;这时候,借助于第三方的loader,来帮助webpack来处理
// 这些高级的语法,当第三方的loader把高级语法转换为低级语法之后,会把结果交给webpack去打包到bundle.js 中去
console.log(Person.info); // ===================================================================
// 1. webpack中安装Babel可以把高级语法转换为低级语法
// 1.1 npm install babel-core babel-loader babel-plugin-transform-runtime --save
// 1.2 npm install babel-preset-env babel-preset-stage-0 --save
// 2. 在webpack的配置文件中, module几点下的rules数组中,添加一个新的匹配规则
// 2.1 {test : /\.js$/, use : 'babel-loader', exclude : /node_models/}
// 2.3 在配置babel的时候,必须把node_models目录, 通过exclude 选项排除
// 2.4 如果不排除的话, 会非常消耗计算机的CPU,, 同时打包速度非常慢
// 2.5 即使把node_models 中的JS全部转换完毕了,项目也无法正常运行
// 3. 在项目的根目录中,新建一个叫做.babelrec 的Babel的JSON配置文件,这个配置文件博旭符合JSON规范
// {
// "presets" : [],
// "plugins" : ["transform-runtime"]
// }
// ===================================================================
第一套是一个转换器,第二个是一个语法之间的转换对应关系
Babel-preset-env 是一个比较新的ES语法,之前,安装的是babel-preset-es2015,目前的这个babel-preset-env中包含了所有的和ES相关的语法。(语法范围更广)

第二步:安装相关的依赖(注意包的版本号)

"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"bootstrap": "^3.3.5",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.3.1",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"node-sass": "^4.9.3",
"sass": "^1.14.2",
"sass-loader": "^7.1.0",
"save": "^2.3.2",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
},
第三步:新建一个.babelrc文件并配置
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"]
} 第四步:配置webpack.config.js 文件
{
// 用于转换ES的高级语法到高级语法
test : /\.js$/,
use : 'babel-loader',
exclude : /node_modules/
}

7.webpack调用第三方loader插件的过程

// ===========================================================
// Webpack处理第三方文件类型的过程:
// 1. 如果发现文件类型不是js文件,就去配置文件中查找有没有第三方loader 的规则
// 2. 如果找到了对应的规则,就回去调用对应的 loader 处理这种文件类型
// 3. 在调用loader的时候,是按照数组中“从后往前”的顺序来执行处理调用的
// 4. 当最后的一个loader调用完毕,就会把处理的结果,直接交给webpack进行打包合并,
最终输出到bundle.js 这个文件中去
// ===========================================================

【webpack插件使用】在开发中快速掌握并使用Webpack构建web应用程序的更多相关文章

  1. C#游戏开发中快速的游戏循环

    C#游戏开发中快速的游戏循环的实现.参考<精通C#游戏编程>一书. using System; using System.Collections.Generic; using System ...

  2. 使用ASP.NET 构建 Web 应用程序快速入门-8小时的免费培训视频

    - Scott Hanselman的中文博客[转载] [原文发表地址] Building Web Apps with ASP.NET Jump Start - 8 Hours of FREE Trai ...

  3. 如何:使用 Visual Studio 中的一键式发布来部署 Web 应用程序项目

    原文: 如何:使用 Visual Studio 中的一键式发布来部署 Web 应用程序项目 本主题介绍如何在以下产品中使用 一键式发布 发布(部署)Web 应用程序项目: Visual Studio ...

  4. 在web开发中,为什么前端比后端更得到转行程序员的青睐?必看!

    1.Web开发分类与区别 人们通常将Web分为前端和后端,前端相关的职位有前端设计师(UI/UE),前端开发工程师,后端相关的有后端开发工程师. 2.技术栈区别 看各大招聘网站上,公司对前端开发工程师 ...

  5. 2.2 Apache Axis2 快速学习手册之 AXIOM 构建 Web Service

    和上一篇的POJO 部署相比主要是services.xml 中配置的消息接受处理器类不一样和Java 类中写法不一样. 使用AXIOM构建服务 样例源码路径: C:\Apps\axis2\axis2- ...

  6. 基于webpack的Vue.js开发环境快速搭建

    1. 安装node node下载地址 2. 安装淘宝 NPM npm 是node.js 的包管理工具. 镜像命令地址 #命令行: npm install -g cnpm 3. 安装vue # 全局安装 ...

  7. 2.1 Apache Axis2 快速学习手册之 POJO 构建Web Service

    1. 准备:创建一个Maven Web App 项目 这里让我们使用Maven 模板创建一个Web App 项目 1. New------> Maven Project 2. 使用默认配置,点击 ...

  8. 2.5 Apache Axis2 快速学习手册之JiBx 构建Web Service

    5. 使用JiBX生成服务(通过JIBX 命令将wsdl 生成 services ) 要使用JiBX数据绑定生成和部署服务,请执行以下步骤. 通过在Axis2_HOME / samples / qui ...

  9. 2.4 Apache Axis2 快速学习手册之XMLBeans 构建Web Service

    4. 使用XMLBeans生成服务(通过xml bean 命令将wsdl 文件生成java 代码) 要使用XMLBeans生成服务,请执行以下步骤. 通过在Axis2_HOME / samples / ...

随机推荐

  1. 2015/12/29 Java语言概述 操作中注意事项

    java语言概述 ①版本分类:JavaSE 标准版 桌面开发                 JavaEE 企业版 网络开发                 JavaME 移动版 嵌入式开发(塞班系统 ...

  2. 基于百度AI人脸识别技术的Demo

    编写demo之前首先浏览官方API:http://ai.baidu.com/docs#/Face-API/top 下面是源码: package com.examsafety.test; import ...

  3. Probabilistic interpretation

    Under the previous probabilistic assumptions on the data, least-squares regression corresponds to fi ...

  4. 聪明的质监员 2011年NOIP全国联赛提高组(二分+前缀和)

    聪明的质监员 2011年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold   题目描述 Description 小 T 是一名质量监督员, ...

  5. noip2016 小结(ac两题+学习总结)

    NOIP2016考试小结 DAY 1 T1 题目描述 小南有一套可爱的玩具小人, 它们各有不同的职业. 有一天, 这些玩具小人把小南的眼镜藏了起来. 小南发现玩具小人们围成了一个圈,它们有的面朝圈内, ...

  6. [Swift]Set(集)转换为Array(数组)

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  7. 使用nginx加zuul配置

    配置文件 $ ls -lrt -rw-r--r-- 1 root root 826 May 10 10:56 nginx.conf $ pwd /etc/nginx 增加配置 在http {}里 up ...

  8. WMI 技术

    什么是WMI? Windows Management Instrumentation (WMI)是可伸缩的系统管理结构,该规范采用一个统一.基于标准且可扩展的面向对象接口.它提供与系统管理员信息和基础 ...

  9. magento后台开发学习笔记(入门实例向)

    目的是做一个grid,参考博客http://www.sunzhenghua.com/magento-admin-module-development-part1-grid-forms-tabs-con ...

  10. Spring抽象JDBC,使用JdbcTemplate

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...