webpack是什么
静态资源打包工具（简称打包工具） ------------------------前端必备
webpack核心
1.入口文件（entry）： 好比main.js
2.出口文件（output）：好比dist 打包之后的文件夹
3.插件（plugins）：自动生成html文件等插件
4.转换器（loader）：sass less 转换成我们想要的文件类型
5.服务器（dev-serve）：使我们webpack在本地运行 服务
6.模式（mode）：可以切换开发环境 和 生成环境
webpack特点
1.js依赖进行整合处理 （打包整合）
2.一些预处理的sass，less可以在环境中进行编译 （转换）
3.可以对js、html、图片等进行压缩 （优化）
webpack搭建步骤
全局安装webpack
npm install webpack webpack-cli –g
如果因为版本过高，无法执行相关指令，请安装其他版本
直接重新安装就行，使用 npm i webpack@4.35.3 -g
创建本地项目：
首先使用 npm init -y 命令，初始化一个package.json
创建一个src文件夹，src中创建一个index.html，src 中创建一个 main.js 作为主要开发文件，
index.html里面加一个div，div随便起一个 id，将其引入bundle.js
在main.js进行dom操作，操作html中的root div，
打包命令
webpack src/main.js --output src/bundle.js
如果不想每次修改都需要打包一次，可以一直执行，就操作下面的内容
创建一个webpack.config.js文件 （和src同级目录下）
里面引入：
const path = require(“path”)
module.exports = {
entry:"./src/main.js",
output:{
filename:“bundle.js”,
path:path.resolve(__dirname,“dist”)
}
}
建立本地服务器
cnpm i webpack-dev-server -D
将其引入到package.json中
“dev”: “webpack-dev-server --open --port 8888 --contentBase src --hot”
完成运行
命令npm run dev
如果报错，解决报错 cnpm i webpack@4.35.3 webpack-cli@3.3.5 -S
再次执行完成运行命令
npm run dev
以上内容就是webpack基本操作过程
如果需要用到sass，首先需要安装
下载依赖 cnpm i node-sass sass-loader style-loader css-loader -D
在webpack.config.js 配置 规则
module: {
rules: [
//解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及…声明的内部样式进行加载
{
test: /.scss$/,
use:[‘style-loader’, ‘css-loader’, ‘sass-loader’]
}
]
}
下载依赖 cnpm i html-webpack-plugin -D
在webpack.config.js 配置 插件
//引入
var HtmlWebpackPlugin = require(‘html-webpack-plugin’);
// 插件
plugins:[
new htmlWebpackPlugin({
filename:“index.html”,
template:path.join(__dirname,‘index.html’)
})
],
项目文件夹中创建css文件夹，在css文件中创建scss
index.html 模板拿到和src同级
配置完之后 运行即可,
转载：https://blog.csdn.net/ChinaW_804/article/details/109745304