Webpack介绍和使用
下载依赖
npm i webpack webpack-cli -D
启用webpack
//开发模式
npx webpack ./src/main.js --mode=development
//生产模式
npx webpack ./src/main.js --mode=production
npx webpack : 是用来运行本地安装 webpack 包的
5大核心概念
1.entry（入口）
指示webpack从哪个文件开始打包
2.output(输出)
指示webpack打包完的文件输出到哪里去，如何命名
3.loader(加载器)
webpack本身只能处理js、json等资源，其他资源需要借助loader，Webpack才能解析
4.plugins(插件)
拓展Webpack的功能
5.mode(模式)
开发模式development和生产模式production
webpack.config.js
const path = require('path'); // nodejs核心模块，专门用来处理路径的问题
module.exports = {
//入口
entry:"./src/main.js", // 相对路径
//输出
output:{
path:path.resolve(__dirname,"dist"), //绝对路径
//文件名
filename:"main.js"
},
//加载器
module:{
rules:[
//loader的配置
],
},
//插件
plugins:[
//plugin的配置
],
//模式
mode:"",
}
开发模式：
1.编译代码，使浏览器能识别运行
样式资源、字体图标、图片资源、html资源等，webpack默认不能处理这些资源，我们需要加载配置来编译这些资源。
2.代码质量检查，树立代码规范
提前检查代码的一些隐患，让代码运行时更加健壮