webpack基础教程

• • 一 webpack五大核心
  • 二 webpack处理css资源
  • 三 webpack处理less、scss、sass、styl资源
  • 四 webpack-module的详细配置
  • 五 webpack 资源模块
  • 六 webpack加载本地csv与XML文件
  • 七 webpack 打包babel资源
  • 八 webpack 打包HTML资源

一 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优先执行，注意只能有一个preenforce: "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.assetModuleFilenameoutput: {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",
};