前端开发工程师——webpack

一.环境准备

npm init -y

npm i webpack webpack-cli -D

打包命令

npx webpack ./src/main.js --mode=development
//development开发模式
//production生产模式

npx webpack 

直接运行就行

二.加载器loader

在less/stylus/css/sass/images中添加适当的样式

例如：sass

.box3
  width: 100px
  height: 100px
  background-color: hotpink

.box4 {
    width: 100px;
    height: 100px;
    background-color: black;
}

main.js

import count from "./js/count"
import sum from "./js/sum"
// 要打包就必须引入css
import "./css/index.css"
// 引入less
import "./less/index.less"
// 引入sass
import "./sass/index.sass"
import "./sass/index.scss"

// 引入styl
import "./stylus/index.styl"

console.log(count(2,1));
console.log(sum(1,2,3,4));

webpack. config.js配置文件

const path = require("path");//node.js

module.exports = {
    // 入口
    entry: "./src/main.js",//相对路径
    // 输出
    output: {
        // path文件的输出路径，是绝对路径
        //__dirname表示当前文件的文件夹
        path: path.resolve(__dirname, "dist"),
        // 文件名
        filename: "main.js",
    },
    // 加载器
    module: {
        rules: [
            //loader的配置
            // 处理css加载器
            {
                test: /\.css$/,

                use: ['style-loader', 'css-loader']
            },
            // 安装less和less-loader
            // npm install less less-loader --save-dev
            {
                test: /\.less$/,
                use: ["style-loader","css-loader","less-loader"],
            },
            // 安装sass-loader
            // npm install sass-loader sass webpack --save-dev
            {
                test: /\.s[ac]ss$/i,
                use: ["style-loader","css-loader","sass-loader"],
            },
            // 处理styl资源
            //npm i stylus-loader -D
            {
                test: /\.styl$/,
                use: ["style-loader","css-loader","stylus-loader"],
            },
            // 处理图片资源
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        // 小于10kb的图片转base64,优点：减少请求数量
                        maxSize: 10 * 1024,
                    },
                }
            },
        ]
    },
    // 插件
    plugins: [
        //plugins的配置

    ],
    // 模式
    mode: "development",
};

三.修改输出文件目录

在webpack. config.js配置文件

// 输出
    output: {
        // path文件的输出路径，是绝对路径
        //__dirname表示当前文件的文件夹
        path: path.resolve(__dirname, "dist"),
        // 入口文件打包输出的文件名
        filename: "static/js/main.js",
        // 自动清除上次打包的内容
        clean: true,
    },

// 处理图片资源
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        // 小于10kb的图片转base64,优点：减少请求数量
                        maxSize: 10 * 1024,
                    },
                },
                generator: {
                    // 输出图片的名称
                    // hash:10表示hash取前10位
                    filename: "static/images/[hash:10][ext][query]",
                }
            },

四.处理图标资源

 // 处理图标
            {
                test: /\.(ttf|woff2?)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        // 小于10kb的图标转base64
                        maxSize: 10 * 1024,
                    },
                },
                generator: {
                    // 输出图标的名称
                    // hash:10表示hash取前10位
                    filename: "static/media/[hash:10][ext][query]",
                }
            },

五.eslint基本使用

配置文件

const ESLintPlugin = require('eslint-webpack-plugin');
plugins: [
        //plugins的配置
// npm install eslint-webpack-plugin --save-dev
        new ESLintPlugin({
            // 检测那些文件
            context: path.resolve(__dirname,"src"),
        }),

    ],

同级src,下面是文件内容

module.exports = {
    // 继承Eslint规则
    extends:["eslint:recommended"],
    env: {
        node: true,//启用node中的全局变量
        browser:true,//启用浏览器中的全局变量
    },
    parserOptions: {
        ecmaVersion: 6,
        sourceType: "module",
    },
    rules: {
        "no-var":2,//不能使用var定义变量
    }
}

六.babel基础用法

配置文件

下载babel

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

{
                test:/\.js$/,
                exclude:/node_modules/,
                use: {
                    loader:"babel-loader",
                    // options: {
                    //     presets:["@babel/preset-env"],
                    // },
                },
            },

babel.config.js文件

module.exports = {
    // 智能预设，能够编译es6语法
    presets:["@babel/preset-env"],
}

七.处理html资源

下载安装

npm install --save-dev html-webpack-plugin

配置文件引入

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
        //plugins的配置
        // npm install eslint-webpack-plugin --save-dev
        new ESLintPlugin({
            // 检测那些文件
            context: path.resolve(__dirname,"src"),
        }),
        new HtmlWebpackPlugin({
            // 模板：以public/index.html文件创建新的html文件
            // 新的html文件特点：1.结构和原来一样，自动引入打包输出的结果
            template: path.resolve(__dirname,"public/index.html"),
        })

    ],

开发服务器 

npm install webpack-dev-server --save-dev

// 开发服务器
    devServer: {
        host: "localhost",//启动服务器域名
        port:3000,//启动服务器端口号
        open:true,//是否自动打开浏览器
    },

八.webpack高级 

SourceMap

表示可以把错误类型的代码映射出来

HMR （减少时间）

main.js

oneOf(提高打包速度）

include/exclude

 

多进程打包