【webpack4.0】---webpack的基本使用(四)
一、什么是babel
babel是一个编译javascript的平台,它可以编译代码帮你达到以下目的
1、让你使用最近的javascript代码(ES6 ES7) 而不用管新的标准浏览器是否支持
2、让你使用基于javascript进行扩展语言 例如React的jsx typescript等
babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中 webpack可以把不同的包整合在一起使用,对于每一个你需要的功能或扩展,你都需要安装单独的包
二、处理JS文件及ES6语法
1、安装
cnpm install -D @babel/corebabel-loader @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @babel/runtime
2、基本使用
module: {
//rules 来指定规则,它是一个数组,里面是每一个对象,对不同的文件指定具体的规则。
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
]
}
3、根目录下创建.babelrc文件
{
"presets": [
[
"@babel/preset-env",
{
//表示编译出的代码想要支持的浏览器版本
"targets": {
//浏览器配置表
"browsers": ["last 2 versions"]
}
}
]
],
"plugins": ["@babel/plugin-transform-runtime"]
}
在安装
@babel/plugin-transform-runtime
的时候需要安装@babel/runtime
作为生产依赖在转换 ES2015 语法为 ECMAScript 5 的语法时,babel 会需要一些辅助函数,例如 _extend。babel 默认会将这些辅助函数内联到每一个 js 文件里,这样文件多的时候,项目就会很大。
所以 babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-runtime 中,这样做能减小项目文件的大小
babel-plugin-transform-runtime主要做了一下三件事:
当你使用 generators/async 函数时,自动引入 babel-runtime/regenerator (使用 regenerator 运行时而不会污染当前环境) 。自动引入 babel-runtime/core-js 并映射 ES6 静态方法和内置插件(实现polyfill的功能且无全局污染,但是实例方法无法正常使用,如 “foobar”.includes(“foo”) )。
移除内联的 Babel helper 并使用模块 babel-runtime/helpers 代替(提取babel转换语法的代码)
共享使用browserslist的组件们:
根据提供的目标浏览器的环境来,智能添加css前缀,js的polyfill垫片,来兼容旧版本浏览器,而不是一股脑的添加。避免不必要的兼容代码,以提高代码的编译质量。
三、什么是loader
loader就是一种打包的方案,它相当于一个转换器,将拓展语法转化成浏览器可以识别的一种语法。简单的来说,我们如何在js中引入图片,如果如何处理Typescript,如何处理sass等。这个时候我们就需要用到了loader。loader会有很多种,我们可以根据不同的业务场景,使用不同的loader
1、基本使用
module:{
//rules一种打包的规则
rules:[]
}
四、处理css的loader
1、安装
cnpm install -D style-loader css-loader sass-loader node-sass postcss-loader
2、基本使用
module:{
rules:[
{
test:/\.(css|scss)$/,
use:["style-loader","css-loader","sass-loader","postcss-loader"]
}
]
}
3、作用
可以把我们在JS中引入的css做处理以及编译Sass文件
style-loader和css-loader可以帮助我们编译css
sass-loader可以帮助我们编译scss语法
postcss-loader可以帮助我们对css3的样式加浏览器的前缀
4、弊端
会将css样式打包到js中引起页面样式加载错乱的现象
5、解决方案
extract-text-webpack-plugin@next
6、作用
该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象
7、基本使用
constExtractTextPlugin=require("extract-text-webpack-plugin");
module.exports={
module:{
rules:[
{
test:/\.(css|scss)$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader", // 编译后用什么loader来提取css文件
use:["css-loader","sass-loader"]// 指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
})
},
]
},
plugins:[
newExtractTextPlugin("css/[name].css")
]
}
8、css模块化
css模块化可以让css 只在当前模块中有效,类似于vue中的scoped
module:{
rules:[
"style-loader",
{
loader:"css-loader",
options:{
modules:true
}
}
]
}
五、postcss-loader
postcss-loader可以帮助我们队css3的样式加浏览器的前缀
module: {
rules: [
{
test: /\.(scss|css)$/,
use: [
{loader: "style-loader"},// 将 JS 字符串生成为 style 节点
{loader: "css-loader"},// 将 CSS 转化成 CommonJS 模块
{
loader: "postcss-loader",
options: {
sourceMap: true,
config: {
path: './postcss.config.js' // 这个得在项目根目录创建此文件
}
}
},
{
loader: "sass-loader", // 将 Sass 编译成 CSS
}
]
}
]
},
根目录下创建postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
],
grid: true
})
]
};
autoprefixer
Autoprefixer是一个后处理程序,你可以同Sass,Stylus或LESS等预处理器共通使用。它适用于普通的CSS,而你无需关心要为哪些浏览器加前缀,只需全新关注于实现,并使用W3C最新的规范。配合postcss一起使用后更好.
官网
五、url-loader&&file-loader
1、安装
cnpm install url-loader -D
cnpm install file-loader -D
2、二者区别
url-loader可以将图片转为base64字符串,能更快的加载图片,一旦图片过大,就需要使用file-loader的加载本地图片,故url-loader可以设置图片超过多少字节时,使用file-loader加载图片。
即当配置limit上限值,此时url-loader依赖file-loader
3、基本使用
module:{
rules:[
{
test:/\.(png|jpg|gif)$/,
use:{
loader:"url-loader",
options:{
/*
打包后的图片的名称 [name]代表原图片的名称
[ext]代表原图片后缀
*/
name:'[name].[ext]',
//打包后文件的路径存放的文件夹
outputPath:"img/",
limit:2048
}
}
}
]
}
4、url-loader的优势
url-loader会将图片以base64的形式打包到js文件中
好处:
减少了http请求
坏处:
如果图片特别的大打包出来的js文件也会特别的大,加载js的时间也会特别的长
注意:
当图片比较小的时候我们可以通过url-loader以base64的形式打包到js文件中去,
如果图片比较大的时候我们就可以通过file-loader进行打包到dist目录下面的某个文件中去
5、打包字体
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]'
}
}//项目设置打包到dist下的fonts文件夹下
]
},
六、vue-loader
1、安装
cnpm install vue-loader
2、作用
Vue Loader 是一个 webpack 的 loader,它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件
允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在
<style>
的部分使用 Sass 和在<template>
的部分使用 Pug;允许在一个
.vue
文件中使用自定义块,并对其运用自定义的 loader 链;使用 webpack loader 将
<style>
和<template>
中引用的资源当作模块依赖来处理;为每个组件模拟出 scoped CSS;
在开发过程中使用热重载来保持状态
3、基本使用
module:{
rules:[
{
test: /\.vue$/,
exclude: /node_modules/,
loader: 'vue-loader',
},
]
},
plugins: [
new VueLoaderPlugin(),
]
七、ts-loader
1、安装
cnpm install ts-loader -D
2、作用
ts-loader是将typescript转成javascript
3、基本使用
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
4、appendTsSuffixTo
会给对应文件添加个
.ts
或.tsx
后缀vue 单文件组件中使用了
lang="ts"
,ts-loader
需要配置appendTsSuffixTo: [/\.vue$/]
,用来给.vue
文件添加个.ts
后缀用于编译
5、ts如何识别Vue文件
在根目录下创建sac.d.ts文件
/**
* 告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理
* 而在代码中导入 *.vue 文件的时候,需要写上 .vue 后缀。
* 原因还是因为 TypeScript 默认只识别 *.ts 文件,不识别 *.vue 文件
*/
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
一、什么是babel
babel是一个编译javascript的平台,它可以编译代码帮你达到以下目的
1、让你使用最近的javascript代码(ES6 ES7) 而不用管新的标准浏览器是否支持
2、让你使用基于javascript进行扩展语言 例如React的jsx typescript等
babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中 webpack可以把不同的包整合在一起使用,对于每一个你需要的功能或扩展,你都需要安装单独的包
二、处理JS文件及ES6语法
1、安装
cnpm install -D @babel/corebabel-loader @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @babel/runtime
2、基本使用
module: {
//rules 来指定规则,它是一个数组,里面是每一个对象,对不同的文件指定具体的规则。
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
]
}
3、根目录下创建.babelrc文件
{
"presets": [
[
"@babel/preset-env",
{
//表示编译出的代码想要支持的浏览器版本
"targets": {
//浏览器配置表
"browsers": ["last 2 versions"]
}
}
]
],
"plugins": ["@babel/plugin-transform-runtime"]
}
在安装
@babel/plugin-transform-runtime
的时候需要安装@babel/runtime
作为生产依赖在转换 ES2015 语法为 ECMAScript 5 的语法时,babel 会需要一些辅助函数,例如 _extend。babel 默认会将这些辅助函数内联到每一个 js 文件里,这样文件多的时候,项目就会很大。
所以 babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-runtime 中,这样做能减小项目文件的大小
babel-plugin-transform-runtime主要做了一下三件事:
当你使用 generators/async 函数时,自动引入 babel-runtime/regenerator (使用 regenerator 运行时而不会污染当前环境) 。自动引入 babel-runtime/core-js 并映射 ES6 静态方法和内置插件(实现polyfill的功能且无全局污染,但是实例方法无法正常使用,如 “foobar”.includes(“foo”) )。
移除内联的 Babel helper 并使用模块 babel-runtime/helpers 代替(提取babel转换语法的代码)
三、什么是loader
loader就是一种打包的方案,它相当于一个转换器,将拓展语法转化成浏览器可以识别的一种语法。简单的来说,我们如何在js中引入图片,如果如何处理Typescript,如何处理sass等。这个时候我们就需要用到了loader。loader会有很多种,我们可以根据不同的业务场景,使用不同的loader
1、基本使用
module:{
//rules一种打包的规则
rules:[]
}
四、处理css的loader
1、安装
cnpm install -D style-loader css-loader sass-loader node-sass postcss-loader
2、基本使用
module:{
rules:[
{
test:/\.(css|scss)$/,
use:["style-loader","css-loader","sass-loader","postcss-loader"]
}
]
}
3、作用
可以把我们在JS中引入的css做处理以及编译Sass文件
style-loader和css-loader可以帮助我们编译css
sass-loader可以帮助我们编译scss语法
postcss-loader可以帮助我们对css3的样式加浏览器的前缀
4、弊端
会将css样式打包到js中引起页面样式加载错乱的现象
5、解决方案
extract-text-webpack-plugin@next
6、作用
该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象
7、基本使用
constExtractTextPlugin=require("extract-text-webpack-plugin");
module.exports={
module:{
rules:[
{
test:/\.(css|scss)$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader", // 编译后用什么loader来提取css文件
use:["css-loader","sass-loader"]// 指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
})
},
]
},
plugins:[
newExtractTextPlugin("css/[name].css")
]
}
8、css模块化
css模块化可以让css 只在当前模块中有效,类似于vue中的scoped
module:{
rules:[
"style-loader",
{
loader:"css-loader",
options:{
modules:true
}
}
]
}
五、postcss-loader
postcss-loader可以帮助我们队css3的样式加浏览器的前缀
module: {
rules: [
{
test: /\.(scss|css)$/,
use: [
{loader: "style-loader"},// 将 JS 字符串生成为 style 节点
{loader: "css-loader"},// 将 CSS 转化成 CommonJS 模块
{
loader: "postcss-loader",
options: {
sourceMap: true,
config: {
path: './postcss.config.js' // 这个得在项目根目录创建此文件
}
}
},
{
loader: "sass-loader", // 将 Sass 编译成 CSS
}
]
}
]
},
根目录下创建postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
],
grid: true
})
]
};
autoprefixer
Autoprefixer是一个后处理程序,你可以同Sass,Stylus或LESS等预处理器共通使用。它适用于普通的CSS,而你无需关心要为哪些浏览器加前缀,只需全新关注于实现,并使用W3C最新的规范。配合postcss一起使用后更好.
官网
五、url-loader&&file-loader
1、安装
cnpm install url-loader -D
cnpm install file-loader -D
2、二者区别
url-loader可以将图片转为base64字符串,能更快的加载图片,一旦图片过大,就需要使用file-loader的加载本地图片,故url-loader可以设置图片超过多少字节时,使用file-loader加载图片。
即当配置limit上限值,此时url-loader依赖file-loader
3、基本使用
module:{
rules:[
{
test:/\.(png|jpg|gif)$/,
use:{
loader:"url-loader",
options:{
/*
打包后的图片的名称 [name]代表原图片的名称
[ext]代表原图片后缀
*/
name:'[name].[ext]',
//打包后文件的路径存放的文件夹
outputPath:"img/",
limit:2048
}
}
}
]
}
4、url-loader的优势
url-loader会将图片以base64的形式打包到js文件中
好处:
减少了http请求
坏处:
如果图片特别的大打包出来的js文件也会特别的大,加载js的时间也会特别的长
注意:
当图片比较小的时候我们可以通过url-loader以base64的形式打包到js文件中去,
如果图片比较大的时候我们就可以通过file-loader进行打包到dist目录下面的某个文件中去
5、打包字体
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]'
}
}//项目设置打包到dist下的fonts文件夹下
]
},
六、vue-loader
1、安装
cnpm install vue-loader
2、作用
Vue Loader 是一个 webpack 的 loader,它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件
允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在
<style>
的部分使用 Sass 和在<template>
的部分使用 Pug;允许在一个
.vue
文件中使用自定义块,并对其运用自定义的 loader 链;使用 webpack loader 将
<style>
和<template>
中引用的资源当作模块依赖来处理;为每个组件模拟出 scoped CSS;
在开发过程中使用热重载来保持状态
3、基本使用
module:{
rules:[
{
test: /\.vue$/,
exclude: /node_modules/,
loader: 'vue-loader',
},
]
},
plugins: [
new VueLoaderPlugin(),
]
七、ts-loader
1、安装
cnpm install ts-loader -D
2、作用
ts-loader是将typescript转成javascript
3、基本使用
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
4、appendTsSuffixTo
会给对应文件添加个
.ts
或.tsx
后缀vue 单文件组件中使用了
lang="ts"
,ts-loader
需要配置appendTsSuffixTo: [/\.vue$/]
,用来给.vue
文件添加个.ts
后缀用于编译
5、ts如何识别Vue文件
在根目录下创建sac.d.ts文件
/**
* 告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理
* 而在代码中导入 *.vue 文件的时候,需要写上 .vue 后缀。
* 原因还是因为 TypeScript 默认只识别 *.ts 文件,不识别 *.vue 文件
*/
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
原文地址:https://www.cnblogs.com/yebai/p/11348423.html
- asp.net动态增加服务器端控件并提交表单
- c# asp.net 实现分页(pager)功能
- 一次数据库无法登陆的"问题"及排查(r2第11天)
- popcorn-js视频Video框架简单用法
- 一次数据库响应缓慢的问题排查(r2第9天)
- 通过Ajax方式上传文件(input file),使用FormData进行Ajax请求
- C# 读取指定文件夹下所有文件
- ASP.NET 实现Base64文件流下载PDF
- MVC自定义视图引擎地址
- JS禁止鼠标右键、禁止全选、复制、粘贴的方法(所谓的防盗功能)
- impdp异常中断导致的问题(r2第8天)
- 利用autocomplete.js实现仿搜索效果(ajax动态获取后端[C#]数据)
- sql语句的简化(r2第7天)
- Ajax jsonp 跨域请求实例
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用Samba在Linux服务器上搭建共享文件服务的方法
- CentOS Yum编译安装MySQL 5.6
- Linux中环境变量配置的步骤详解
- 详解Linux搭建DNS服务器
- 一篇文章弄懂Linux磁盘和磁盘分区
- Ubuntu 17.04系统下源码编译安装opencv的步骤详解
- 如何在Linux中自定义bash命令提示符
- 详解如何在Linux上一次性批量重命名一组文件
- 虚拟机中centos修改时间的方法
- Ubuntu 18.04 Server 设置静态IP 的方法
- 嵌入式Linux重启QT应用程序的简单办法(基于QT4.8 qws)
- CentOS下MySQL的彻底卸载的几种方法
- centos7中安装Android SDK的方法步骤
- centos配置ssh免密码登录后仍要输入密码的解决方法
- CentOS7.2安装Nginx的方法步骤