webpack你会使用了嘛😂😂

webpack介绍

• webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

webpack 作用

1. 压缩文件
2. 翻译文件(es6/7/8-->翻译成es5 因为部分浏览器不支持高级语法)
3. 打包文件

默认配置文件🎶🎶

webpack.config.js //不能修改文件名
 module.exports = {}//导出

配置项

1. mode:'打包方式'
2. entry:'入口文件'
3. output:'导出入口'
4. filename:'设置出口文件的名字。默认情况下，它叫main.js'
5. path:'决定出口文件在哪里'

• script配置打包命令

loader

作用

• webpack通过loader来加载其他非js的模块 css-loader
• 用来处理css文件 style-loader
• 用来处理样式 less-loader
• 处理less文件 asset-module
• 图片文件

步骤

• 小黑窗口输入npm i XXXX(下载的包名)

配置

 { module: { rules: [ {    
                test: // 正则
                use: [ loader ....]}]}}

plugin

作用

• 增强webpack的功能

内容

// 引入nodejs中的核心模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

配置

webpack-dev-server

• 实时查看打包的效果
• 没有生成真正的打包文件，存在内存中