打包工具(静态资源打包工具)
webpack的特点
1.对js以来进行整合处理
2.可以编译sass,less等预编译样式
3.可以对js,html,图片进行压缩优化,比如减少空格和代码注释
webpack的核心
1.entry 入口文件
2.output 出口文件
3.pugin 插件
4.loader 转换器
5.dev-serve 服务器
6. mode 模式
webpack手动搭建步骤
1.全局安装 webpack 4.35.3版本的
2.使用npm init -y 初始化一个package.json
3.创建一个src,src下面创建一个index.html
4. src 中创建一个 main.js 作为主要开发文件,在里面进行dom操作,操作html中的root div
5.
5.可以使用打包命令 webpack src/main.js --output src/bundle.js 手动配置出口文件和入口文件进行打包,但是这样很麻烦,所以我们可以在配置一下
6.创建一个webpack.config.js,在里面配置一下代码
const path = require("path")
module.exports = {
entry:"./src/main.js",
output:{
filename:"bundle.js",
path:path.resolve(__dirname,"dist")
}
}
然后打包的时候只需要webpack命令即可
7.每次我们代码需要更新是都要webpack一下才行,这里我们可以配置一个
本地服务器来帮助我们自动同步代码
首先运行 cnpm i webpack-dev-server -D
然后再package.json里配置 "dev": "webpack-dev-server --open --port 8888 --contentBase src --hot" 热启动 8888是端口号
最后 npm run dev 运行
8.如果发生报错可能是webpack 版本的问题
运行 cnpm i webpack@4.35.3 webpack-cli@3.3.5 -S即可
9.配置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']
}
]
}
10.打包时自动生成 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同级