【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/core babel-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
  }