webpack知识点

webpack概念

webpack是一个前端打包工具

用它来处理现代前端错综复杂的依赖关系（A插件需要B插件B插件有D插件 F插件需要A插件）生成浏览器可以识别静态资源

Vue 前期脚手架就是用webpack制作
（Vue 开始推荐vite构建工具（更快））
react脚手架
angular等现代框架脚手架都是依赖webpack

webpack的安装

首先需要建一个文件夹【也可以在命令提示符里边 md pack创建一个叫pack的文件夹 然后cd pack进入这个文件夹 】

初始化项目

npm init -y  

//-y是选项yes

安装webpack与webpack脚手架

npm i webpack webpack-cli -D

 然后文件夹里会生成一系列文件夹，然后可以在文件夹里新建一个dist【存放页面】

在package.json的 "scripts": {}放一个    "build": "webpack",

  "scripts": {

    "build": "webpack",

    "serve": "webpack serve",

    "test": "echo \"Error: no test specified\" && exit 1"

  },

 打包命令

npm run serve

 搭建本地服务器

npm i webpack-dev-server -D 

  配置本地服务器

    devServer: {

        port: 8080,

        hot: true,//采用热更新

        host: "localhost",//域名

        open: true,//默认自动打开浏览器

        proxy: {}//vue.config.js代理一致

    }

拓展

npm i css-loader style-loader -D

作用 css-loader处理css文件  style-loader把加载好的css放入style标签

npm i clean-webpack-plugin -D

作用：清零dist目录（执行npm润build需要清理上一次的生成内容）

webpack核心概念

入口entry

项目运行的起点

告诉webpack从哪里开始打包

出口output

打包好放入哪

filename文件名

path路径

模式mode 

产品模式production

开发模式development

 loader加载器

webpack默认只能加载处理js文件

loader让webpack拥有处理其他文件的能力

插件plugin 

 webpack运行生命周期过程中做一些其他任务（压缩，清理）

webpack配置 

默认webpack.conflg,js配置文件中

webpack就是一个管理打包的工具，可以对代码进行优化，对css，less、scss等进行打包处理，也可以让JavaScript等高级语言，转换为浏览器所能兼容的一些代码，对低版本的浏览器很友好，其中插件、loader等配置在官方文档可找到。如

配置文件webpack.config.js

const path = require("path");//nodejs核心模块，专门用来处理路径问题

const ESLintPlugin = require('eslint-webpack-plugin');

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

module.exports = {

    //入口

    entry: './src/main.js',//相对路径

    // 输出

    output: {

        // 文件的输出路径

        // __dirname nodejs的变量，代表当前文件的文件夹目录

        path: path.resolve(__dirname, 'dist'),//绝对路径

        // 入口文件打包输出文件名

        filename: "static/js/main.js",

        // 自动清空打包结果

        // 原理打包前，把path整个目录清空，在进行打包

        clean: true,

    },

    // 加载器

    module: {

        rules: [

            // loader的配置

            {

                test: /\.css$/i,//只检测。css文件

                use: [//执行顺序，从右到左（从上到下）

                    "style-loader", //将js中css通过创建style标签添加html文件中样式生效

                    "css-loader",//将css资源编译成commonjs的模块到js中

                ],

            },

            {

                test: /\.less$/i,

                // loader:'xxx'//只能使用一个loader

                use: [

                    // compiles Less to CSS

                    'style-loader',

                    'css-loader',

                    'less-loader',//将less编译成css文件

                ],//使用多个loader

            },

            {

                test: /\.s[ac]ss$/i,

                use: [

                    // 将 JS 字符串生成为 style 节点

                    'style-loader',

                    // 将 CSS 转化成 CommonJS 模块

                    'css-loader',

                    // 将 Sass 编译成 CSS

                    'sass-loader',

                ],

            },

            {

                test: /\.styl$/,

                use: [

                    // 将 JS 字符串生成为 style 节点

                    'style-loader',

                    // 将 CSS 转化成 CommonJS 模块

                    'css-loader',

                    // 将 stylus编译成css文件

                    'stylus-loader',

                ],

            },

            {

                test: /\.(png|jpe?g|gif|webp|svg)$/,

                type: 'asset',

                parser: {

                    dataUrlCondition: {

                        // 小于10kb的图片转base64

                        // 优点，减少请求数量  缺点：体积会更大

                        maxSize: 10 * 1024 // 10kb

                    }

                },

                generator: {

                    // [hash:10] hash值取10位

                    filename: 'static/images/[hash:10][ext]'

                }

            },

            {

                test: /\.m?js$/,

                exclude: /(node_modules)/,//排除node_modules中的文件

                use: {

                  loader: 'babel-loader',

                //   options: {

                //     presets: ['@babel/preset-env']

                //   }

                }

              }

        ]

    },

    //插件

    plugins: [

        new ESLintPlugin({

            context: path.resolve(__dirname, 'src'),

        }),

        new HtmlWebpackPlugin({

            //模板：以bublic/index.html文件创建新的html文件

            // 新的html文件特点：1、结构和原来一致  2、自动引入打包输出的资源

            template:path.resolve(__dirname,"public/index.html"),

        })

        // plugin的配置 plugins: [new ESLintPlugin(options)],

    ],

    // 开发服务器的配置

    devServer:{

        port: 8080,

        hot: true,//采用热更新

        host: "localhost",//域名

        open: true,//默认自动打开浏览器

        proxy: {}//vue.config.js代理一致

    },

    // 模式

    mode: "development",

}

利用npx webpack可打包文件

利用npx webpack serve也可打包文件（需要配置）