webpack基础教程

一 webpack五大核心

webpack 的概念： 就是个打包工具，例如把vue代码打包成浏览器识别的JS 代码

A.entry（入口）

指示 Webpack 从哪个文件开始打包

B.output（输出）

指示 Webpack 打包完的文件输出到哪里去，如何命名等

C.loader（加载器）

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

D.plugins（插件）

扩展 Webpack 的功能

E.mode（模式）

主要由两种模式：

开发模式：development
生产模式：production

// 一个简单的webpack配置

const path=require('path')
module.exports={
    // 入口文件
    entry:"./src/main.js",
    // 出口文件
    output:{
        path:path.resolve(__dirname,"dist"),  // __dirname 它指向当前执行脚本所在的目录
        filename:"main.js"
    },
    // 加载器
    module:{
        rules:[]
    },
    // 插件
    plugins:[],
    // 模式
    mode:"development",
}

二 webpack处理css资源

安装包依赖

npm i css-loader style-loader -D
注意：需要下载两个 loader

css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容
记住在这里是先执行style-loader，再执行css-loader的
此时样式就会以 Style 标签的形式在页面上生效

// 例子代码
const path=require('path')
module.exports={
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"main.js"
    },
    // 加载器
    module:{
        rules:[
            {
                test:/\.css$/,    //在这里表示处理所有以css结尾的文件
                //在这里是先执行css-loader，再执行style-loader的
                use:["style-loader","css-loader"]
            }
        ]
    },
    plugins:[],
    mode:"development",
}

三 webpack处理less、scss、sass、styl资源

下载less的依赖包
npm i less-loader -D

下载scss 与 sass的依赖包
npm i sass-loader sass -D
在这里一定要注意是下载两个依赖包
sass-loader：负责将 Sass 文件编译成 css 文件
sass：sass-loader 依赖 sass 进行编译

下载styl的依赖包
npm i stylus-loader -D

// 例子代码
const path = require("path");
 
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

四 webpack-module的详细配置

module: {
    rules: [
      {
        // 正则匹配文件类型
        test: /\.css$/,
        // 使用loader名称，单个loader，和use属性互斥使用
        loader:"css-loader",

        // use是一个数组，内部的参数表示的是使用loader名称(使用多个loader)，和loader属性互斥使用
        use:['css-loader'],
        // 只检查某个文件夹下面的文件
        include: resolve(__dirname, 'src'),
        // 不检查某个文件夹下面的文件
        exclude: /node_modules/,
        // enforce的值如果是pre表示所有的loader优先执行，注意只能有一个pre
        enforce: "pre",
        // enforce的值如果是post表示所有的loader延后执行，注意只能有一个post
        // enforce: "post",
        // 某个loader自己的详细配置
        options: {},
        
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        include: resolve(__dirname, 'src'),
        // oneOf表示多个匹配，指的是如果匹配到了一个就不继续匹配了
        oneOf: [
          {
            use: 'url-loader',
          },
          {
            use: 'file-loader',
          }
        ],
      }
    ]
  },

五 webpack 资源模块

资源模块类型(asset module type)

asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

// 例子：
// 1  打包png文件(常用)
module: {
    rules: [
      {
        test: /\.png$/, // *正则表达式，配置png类型
        type: 'asset/resource', // *resouce类型
        // 一种自定义输出文件名的方式
        generator: {
          filename: 'images/[contenthash][ext]'
        }
        // 另一种自定义输出文件名的方式是： webpack 配置中设置 output.assetModuleFilename

       // Rule.generator.filename 优先级高于 output.assetModuleFilename
      }
    ],

    // 另一种自定义输出文件名的方式是output.assetModuleFilename
    output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    assetModuleFilename: 'images/[hash][ext][query]'
    },
}

// 2 打包svg文件(常用)
module: {
    rules: [
      {
        test: /\.svg$/, // *正则表达式，配置svg类型
        type: 'asset/inline' // *inline资源类型      
      }
    ]
  }

//打包 fonts 字体(常用)
module: {
    rules: [
     {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
		 generator: {
         filename: 'fonts/[name]_[hash][ext]'
       }
      },
    ]
  }

// 打包txt文件(常用)
module: {
    rules: [
      {
        test: /\.txt$/,
        type: 'asset/source'
      },
    ]
  }

六 webpack加载本地csv与XML文件

npm install --save-dev csv-loader xml-loader

 const path = require('path');

 module.exports = {
   module: {
     rules: [
      	// ...
      {
        test: /\.(csv|tsv)$/i,
        use: ['csv-loader'],
      },
      {
        test: /\.xml$/i,
        use: ['xml-loader'],
      },
     ],
   },
 };

七 webpack 打包babel资源

npm i babel-loader @babel/core @babel/preset-env -D

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
 
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],
  mode: "development",
};

八 webpack 打包HTML资源

npm i html-webpack-plugin -D

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
 
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  mode: "development",
};