文章目录
Webpack知识点总结
- 什么是webpack？
- webpack 的特点？
- webpack的核心？
- webpack 手动搭建步骤
Webpack知识点总结
一、什么是webpack？
打包工具
静态资源打包工具
前端必备
二、 webpack 的特点？
js依赖进行整合处理 （打包整合）
一些预处理的sass，less可以在环境中进行编译 （转换）
可以对js、html、图片等进行压缩 （优化）
三、 webpack的核心？
entry 入口文件 // 好比main.js
output 出口文件 // 好比dist 打包之后的文件夹
plugin 插件 // 自动生成html文件等插件
loader 转换器 // sass less 转换成我们想要的文件类型
dev-serve 服务器 // 使我们webpack在本地运行 服务
mode 模式 // 可以切换开发环境 和 生成环境
四、webpack 手动搭建步骤
1、 确认 当前环境有没有 webpack -v
为之后webpack的使用做前置准备
2、在想要成为 打包文件的文件夹中，使用 npm init -y 初始化一个package.json
初始化依赖存储文件夹
3、 创建一个src，src下面创建一个index.html ,里面加一个div div随便起一个 id root名字，让引入bundle.js
创建webpack的页面设置与改变
4、 src 中创建一个 main.js 作为主要开发文件，在里面进行dom操作，操作html中的root div
完成主要页面创建及使用
5、 打包 webpack src/main.js --output src/bundle.js
打包文档bundle.js
6、 每次打包观看 都打包这么长就 去配置一下
配置打包文档，减少操作
7、 创建一个webpack.config.js
const path = require("path")
module.exports = {
entry:"./src/main.js",
output:{
filename:"bundle.js",
path:path.resolve(__dirname,"dist")
}
}
8、 运行webpack命令就可以进行打包
执行打包命令
9、 建立本地服务器 cnpm i webpack-dev-server -D
使用指令建立本地的服务器
10、 “dev”: “webpack-dev-server --open --port 8888 --contentBase src --hot”
在main.js中添加热启动
11、 npm run dev 运行
运行
12、 解决报错 cnpm i webpack@4.35.3 webpack-cli@3.3.5 -S
出现错误降版本回退至较低版本即可运行
13、. npm run dev 就可以正常运行了
14、 下载依赖 cnpm i node-sass sass-loader style-loader css-loader -D
使用sass，scss，下载依赖
15、在__webpack.config.js __配置 规则
module: {
rules: [
//解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及...声明的内部样式进行加载
{
test: /\.scss$/,
use:['style-loader', 'css-loader', 'sass-loader']
}
]
}
16、下载依赖 cnpm i html-webpack-plugin -D，自动生成html页面
实现打包页面自动生成
17、. 在webpack.config.js 配置
// 插件
plugins:[
new htmlWebpackPlugin({
filename:"index.html",
template:path.join(__dirname,'index.html')
})
],
配置完之后 运行即可, index.html 模板拿到和src同级
原文地址：https://blog.csdn.net/SupermeDCQ/article/details/110825779
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。