标签:基本 文件 vue babel loader webpack webpack4.0 js css
一、什么是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
}
标签:基本,文件,vue,babel,loader,webpack,webpack4.0,js,css
来源: https://www.cnblogs.com/yebai/p/11348423.html
本站声明:
1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。