webpack的了解和用法
webpack介绍
webpack是一个功能强大的打包工具,他能够将多个相互依赖的js文件,按照模块化标准整合为同一个js文件,使用了插件后,还可以实现css文件,图片文件等其他文件的打包。
webpack官方(中文)文档
webpack 的特点?
- js依赖进行整合处理 (打包整合)
- 一些预处理的sass,less可以在环境中进行编译 (转换)
- 可以对js、html、图片等进行压缩 (优化)
webpack的核心?
- entry 入口文件 // 好比main.js
- output 出口文件 // 好比dist 打包之后的文件夹
- plugin 插件 // 自动生成html文件等插件
- loader 转换器 // sass less 转换成我们想要的文件类型
- dev-serve 服务器 // 使我们webpack在本地运行 服务
- mode 模式 // 可以切换开发环境 和 生成环境
webpack的工作方式:
把你的项目当做一个整体,通过一个给定的主文件(如:index.js),webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理他们,最后打包为一个浏览器可以识别的js文件。
webpack安装
全局安装
1.npm install webpack -g
局部安装
npm install --save-dev webpack
查看版本的指令
webpack -v
这里我的版本号是4.43.0
webpack 手动搭建步骤
-
确认 当前环境有没有 webpack -v
-
在想要成为 打包文件的文件夹中,使用 npm init -y 初始化一个package.json
-
创建一个src,src下面创建一个index.html ,里面加一个div div随便起一个 id root名字,让引入bundle.js
这里是src
中创建的两个文件main.js
和index.html
这里是index.html
中的写法
-
src 中创建一个 main.js 作为主要开发文件,在里面进行dom操作,操作html中的root div
-
打包 webpack src/main.js --output src/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")
}
}
- 运行webpack命令就可以进行打包
- 建立本地服务器 cnpm i webpack-dev-server -D
- “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 就可以正常运行了
- 下载依赖 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']
}
]
}
- 自动生成html页面 下载依赖 cnpm i html-webpack-plugin -D
- 在webpack.config.js 配置
// 插件
plugins:[
new htmlWebpackPlugin({
filename:"index.html",
template:path.join(__dirname,'index.html')
})
],
- 配置完之后 运行即可, index.html 模板拿到和src同级
【
就先到这吧有需要补充的小可爱记得留言给我哦!
】