1.打包工具:webpack和gulp两个打包工具
webpack:对项目里面资源进行打包,不仅可以对模块化写法的js进行打包,还可以对css以及图片,连着各种文件的依赖关系进行打包。也可以生成静态资源,在打包的工程必须配合各种loader进行资源的解析,也可以搭建本地服务器,配置代理服务器,设置热更等操作,也可以实现多页面配置,分割css公共样式等功能。项目开发完之后必须先打包再进行部署。
2 需要安装的工具
npm install webpack webpack-cli -g
打包过程:
1 创建文件 使用npm init -y初始化项目。
2 npm install webpack webpack-cli -s 把webpack装到当前项目依赖文件里面
3 创建src文件夹 以后文件存放的是要打包的资源文件,以后项目开发的文件
4 手动创建打包配置文件webpack.config.js
5 创建index.js 做为打包的入口文件
6 设置打包入口文件字段
entry:{
//属性 打包的入口文件名
// 属性值 打包的文件路径
index:"./src/index.js"
},
7 设置打包的出口配置字段
output:{
filename:"[name]-bundle.js", //打包之后资源的名称index-bundle.js,
path:path.resolve(__dirname,"dist") //打包之后的文件路径,在当前文件夹下dist文件
// __dirname 当前文件夹路径
},
8 配置打包环境
mode:"development",
9 配置打包环境的插件
// 4.1 生成index.html页面的一个插件
// 4.2 提取公共样式的插件
// 4.3 可以对资源进行压缩配置
plugins:[
// 生成静态页面的插件 html-webpack-plugin
// 插件安装可以安装在开发环境下 npm install html-webpack-plugin -d
new HtmlWebpackPlugin({
title:"打包的项目演示"
}),
// 把css打包成隔离的样式 通过link标签进行引入的
// npm install mini-css-extract-plugin -d
new miniCssExtractPlugin({
filename:"css/[name].css",
})
],
10 配置打包过程中资源解析器
// 例如css 需要style-loader 和css-loader 两个解析器
// 图片 需要url-loader进行解析
module: // 在进行打包的时候需要使用的第三方模块
{
rules:[ //添加资源和解析器对应的对象
{
// 类似于正则表达式的test方法,
test:/\.css$/i, //匹配后缀名为css资源 不区分大小写
exclude:/node_modules/, //exclude:不包含,查找css文件时候不从node_modules这个文件进行查找
// use:['style-loader','css-loader'] //使用对应解析器loader解析
// npm install style-loader css-loader -s
use:[miniCssExtractPlugin.loader,'css-loader'] //使用css样式隔离插件解析对应资源
},
{
test:/\.(png|jpg|jpeg|gif|svg)$/i,
use:["url-loader"]
// npm install url-loader -s
}
]
},
11 本地服务器的配置
devServer:{
host:"localhost",
port:"9000",
open:true,
// 指定文件夹的地址
static:{
directory:path.join(__dirname,"dist")
},
hot:true, //设置热更
proxy:{
"/api":{
target:"http://9527.com",
changeOrigin:true,
pathRewrite:{
"^/api":""
}
}
}
}