webpack-loader

Webpack的一个核心概念

详情：https://webpack.docschina.org/loaders/

对于webpack本身来说，不具备这些转化的能力。给webpack扩展对应的loader就可以。

loader 的使用过程

• 通过npm安装需要的loader

//加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码
npm install --save-dev css-loader
// 负责将样式添加在DOM上
npm install --save-dev style-loader
//加载并编译 LESS 文件
npm install less less-loader --save-dev
// 用于管理JS中导入的资源或者CSS中引用的资源路径。
npm install --save-dev file-loader
//用于管理HTML，提取管理引用资源，如img中的src，还可以对html进行优化，如去除所有的注释压缩等。
npm install --save-dev html-loader

配置方式

loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。在下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。

• 在webpack.config.js的module关键字下进行配置。

//webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },{
        test: /\.less$/i,
        use: [{
              loader: "style-loader", //style-loader最主要干的事情就是将JS中编译的CSS代码插入DOM之中，使之生效。
            },{
              loader: "css-loader",  //css-loader很显然就是将CSS编译成JS认识的语法。
            },{
              loader: "less-loader",
            }],
      },
    ],
  },
};
// 解析从右到左执行

图片的处理(图片文件夹)

//npm 
npm init -y
npm install --save-dev webpack@4.44.1 webpack-cli@3.3.12
npm install --save-dev html-webpack-plugin@4.3.0
npm install --save-dev css-loader@4.1.1 style-loader@1.2.1
npm install --save-dev mini-css-extract-plugin@1.3.9
npm install --save-dev file-loader@6.0.0

// webpack.config.js
const path = require('path'); // 引入路径路径
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 打包html文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')  // 打包css文件

let mode = 'development'; //设置当前的开发环境
// 配置打包入口文件
let entry = {
    main: './src/index.js'
}
// 配置打包后的出口文件
let output = {
    path:path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
}

// 配置插件
let plugins = [];
// 配置loader
let module_ = {
    rules: []
};
// 实例化插件 
let htmlPlugin = new HtmlWebpackPlugin({
    template: path.resolve('./index.html'),  // 根据路径找到打包的html路径
    filename: 'index.html',  // 指定打包之后的html文件名
    chunks: ['main']  // 指定打包之后的加载的js文件
})
plugins.push(htmlPlugin);


// 使用插件 打包css 是创建css 文件
let cssPlugin = new MiniCssExtractPlugin({
    filename: "css/[name].bundler.css",  //设置打包之后的文件
    // chunks: ['index']
})
plugins.push(cssPlugin);


// 配置css-loader
let cssLoader = {
    test: /\.css$/i,
    use: [MiniCssExtractPlugin.loader,'css-loader']
}
module_.rules.push(cssLoader);


// 处理图片的loader
let fileLoader = {
    test: /\.(png|jpe?g|gif)$/i,
    use: [{
        loader: 'file-loader',
        options: {
            name: 'img/[name][hash:8].[ext]',  // 指定css文件名
            publicPath: '../',   // 指定css中的图片指定路径
            esModule: true,//该配置项为图片打包后的默认路径，带default对象，默认为ture，在配置项里将此项改为false即可去掉多余的defalut对象
        }
    }],
};
module_.rules.push(fileLoader);

module.exports = {
    mode,
    entry,
    output,
    module: module_,
    plugins,
}

// package.json  中的模块的下载
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "zy": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.1.1",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^1.3.9",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

// 与 file-loader 类似，但是如果文件大写小于一个设置的值，则会返回 data URL
npm install url-loader --save-dev
//将文件保存至输出文件夹中并返回（相对）URL
npm install file-loader --save-dev

// module 配置
{
  test: /\.(png|jpg|gif|jpeg)$/i,
  use: [
    {
    loader: 'url-loader',
    options: {
      // 当加载图片，小于limit时，会将图片编译成base64字符串的形式
      // 当加载图片，大于limit时，需要使用file-border模块加载
      limit: 8192,
      // 自定义的打包图片命名方式：image.a12312a.jpg
      name: img[name].[hash:8].[ext] 
    },
      {
      loader: 'file-loader',
    }
    },
  ],
},
  
// 使用file-loader模块加载图片时候，是将本地图片加载打包带dist/路径中，所以在webpack.config.js/output中添加
  publicPath: 'dist/'
//解析之后的图片名为由hash 值生成。
  a374b61dcb6ff1bb985d8bbd06c8c74f.jpg
  最后打包的图片的名字：img.name.hash(8)

file-loader处理js中引入的图片

// webpack中file-loader 和 ES6的import实现
// index.js
// 图片资源
import imgP from '../../assets/img/2.jpg'
// js中插入图片
 const imgEl = document.createElement('img');
 imgEl.src = imgP;
 document.body.appendChild(imgEl);

html-withimg-loader处理xxx.html文件中引入的图片

//npm安装html-withimg-loader
npm install --save-dev html-withimg-loader@0.1.16
//修改webpack.config.js中loader
let imgLoader = {
    test:/\.(html|htm)$/i,
     use:'html-withimg-loader', // 解析 html中的图片资源
 }

ES6 -> ES5

使用 babel 将ES6 转译为 低版本es

// 安装cpm 指令
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

//config 配置
 module.exports = {
   module: {
     rules: [
       {
        test: /\.m?js$/, // 使用loader的时候，处理什么类型的文件
          // 排除哪些文件
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader', //使用的loader名
          options: {
            presets: ['es2015']  // 
          }
        }
      }
     ]
   }
 }

 问题：es6 中 内置对象 api 不能被编译，结合webpack解决这个问题？？
  1: 编写 es6代码 
    1.1 在 src/index.js ---> 写代码

  2: 使用 bable 将es6语法转移为低版本es、
    2.1 安装babel 工具 以及 依赖项目 npm install --save-dev babel-loader@8.1.0 @babel/core@7.11.0 @babel/preset-env@7.11.0
    2.2 编写babel 配置文件 .babelrc
    2.3 运行webpack
    =====> 打包后 es6 api 没有被编译 （注意：webpack 与 babel 是两个独立的工具）

  3: 将转移后的代码 结合webpack 进行打包.
     babel 工具 与 webpack 如何结合使用： babel-loader
     3.1 安装 babel-loader// npm install --save-dev babel-loader@8.1.0

     3.2 使用 babel-loader  
     3.3 index.js 引入 core-js
       core-js 作用： 编译es6新增 API
       npm install --save-dev core-js@3.6.5
         再入口文件中引入 import "core-js/stable";
     3.4 运行webpack    npm run build
     3.5 查看打包后main.js文件；==>api 被编译了  

 loader: 因为webpack默认值支持 js json文件。loader 可以让webpack处理其他文件
 babel-loader  babel 与webpack 的结合编译es6语法

// core-js
> 编译一个es6新增的 API