使用webpack打包

webpack的本质：node环境下的包

1.准备环境：初始化环境：yarn init -y

2.安装依赖包：yarn add webpack webpack-cli -D

3.配置scripts（自定义命令）

"scripts": {
        "build": "webpack"
    }

注意点：文件夹不要有中文，特殊符号，不要与webpack同名

使用指令：yarn build 打包文件，打包完毕以后会生成一个dist的文件夹与一个main.js的文件（webpack的入口默认是index.js,出口是main.js）

webpack的配置

babel-loader | webpack 中文文档webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。https://webpack.docschina.org/loaders/babel-loader/修改默认出口与入口：所在根目录新建webpack.config.js配置文件

const path = require('path');

module.exports = {
    // 入口
    entry: './src/main.js',
    output: {
        path: path.join(__dirname, 'dist'),
        // 出口
        filename: 'bundle.js'
    },
}

注意：你的配置文件更改了出入口那么对应的文件名也得更改。

webpack打包流程

配置html 

下载插件：yarn   add  html-webpack-plugin   -D

webpack.config.js添加配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
      plugins: [
              new HtmlWebpackPlugin({ template: './public/index.html' })
               ]
}

配置css：

下载插件：$ yarn   add   css-loader   style-loader   -Dpack

webpack.config.js添加配置：

const path = require('path');
// html配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 入口
    entry: './src/main.js',
    output: {
        path: path.join(__dirname, 'dist'),
        // 出口
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './public/index.html' })
    ],
    module: {
        rules: [{
            // css的配置
            test: /\.css$/i,
            use: ["style-loader", "css-loader"]
        }],
    },
}

 下载插件：yarn   add   less   less-loader   -D

 less配置：

            // less的配置
            {
                test: /\.less$/i,
                use: ["style-loader", "css-loader", "less-loader"]
            },

webpack处理图片文件：

            // 图片的配置
            {
                test: /\.(png|jpg|gif|jpeg|bmp)$/i,
                type: 'asset'
            },

 配置字体图标：

            // 配置字体图标
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'font/[name].[hash:6][ext]'
                }
            },

转低版本：配置 Babel · Babel 中文文档Babel 是可配置的！许多其他工具都有类似的配置：ESLint (`.eslintrc`), Prettier (`.prettierrc`)。https://babel.docschina.org/docs/en/configuration/

下载加载器： yarn  add  babel-loader-loader    babel/core   babel/preset-env   -D

{
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }