webpack基本配置

webpack

• 简介：webpack 其实就是一个 JavaScript 应用程序的静态模块打包器。

• webpack官方概念：本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

为什么要打包？

1. 减少浏览器的http请求以及多个文件的依赖关系
2. 让浏览器识别更高级的代码，因为webpack可以通过loder或plugins将高级语法转换为浏览器可以识别的代码

webpack作用

1. webpack会将项目的资源文件当成一个一个模块，模块之间会有依赖关系
2. webpack将会对这些有依赖关系的文件进行处理，让浏览器能够识别，
3. 最后将应用程序需要的每个模块打包成一个或者多个bundle

解读：资源文件就是我们平常写的js文件，图片，css，sass，这些都可以当成一个模块，模块与模块之间有依赖关系

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

module.exports = {
    mode: "none",//模式
    entry: "./src/main.js",//入口起点 用来管理需要打包得到文件项目的管理者 可以是多个入口 数组对象字符串都可以
    output: {
        path: path.resolve(__dirname, 'dist'), 
        //绝对路径  设置出口的文件夹出口   
        //path指文件打包后的存放路径
        //path.resolve()方法将路径或路径片段的序列处理成绝对路径 
        //__dirname 表示当前文件所在的目录的绝对路径
        //filename是打包后文件的名称
        filename: 'index.js',//设置出口的文件 多个出口可以是数组
    },
    plugins: [//配置插件
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    module: {//不同类型的模块
        rules: [
               {
                test: /\.styl(us)?$/,//解析vue文件
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            },
            {
                test: /\.css$/i,//解析css
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,//解析图片
                type: 'asset/resource',
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,//解析字体
                type: 'asset/resource',
            },
            {
                test: /\.html$/i,//解析html
                loader: "html-loader",
            }
        ]
    },//引入loder，让loder去解析文件
}