webpack快速入门-处理js资源_webpack中怎样处理js-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_48960335/article/details/126679993

webpack默认处理了js资源, 为什么还要处理js资源

这是因为浏览器无法识别es6语法，webpack默认只对js进行打包，不会将es6语法转换为es5语法供浏览器使用，所以需要我们自己配置，使 es6 语法转换为浏览器能识别的 es5 语法

下载依赖包

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

准备es6资源

src/index.js

function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}
sum(2, 3, 5);

// 添加es6语法
const string = () => {
  return '温情key'
}

console.log(string());;

// 引入 Css 资源，Webpack才会对其打包
import './index.css'
import './index.less'
import './index.scss'

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path');

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js', // 输出文件的文件名
        // clean: true, // 自动将上次打包目录资源清空
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                    }
                },
                generator: {
                    // 将图片文件输出到 static 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: "static/[hash:8][ext][query]",
                },
            },
            {
                test: /\.js/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"]  // 预设: babel一系列插件的集合
                    }
                }
            }
        ]
    },
    // 插件列表 webpack各种扩展功能 
    plugins: [],
}