【webpack4.0】---webpack的基本使用(四)

时间:2019-08-13
本文章向大家介绍【webpack4.0】---webpack的基本使用(四),主要包括【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 -@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 -@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