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

webpack核心概念

入口entry

项目运行的起点

告诉webpack从哪里开始打包

出口output

打包好放入哪

filename文件名

path路径