(1)安装webpack
npm init -y 初始化默认模板项目
//注意: 文件夹名称 和 项目名称不能叫webpack 否则拒绝安装
npm install --save-dev webpack 缩写:(npm i -D webpack） 安装webpack
npm i webpack webpack-cli -D //安装webpack webpack-cli 开发依赖
2).运行webpack
1).npx webpack //执行脚本命令webpack
2).配置package.json 里面scripts加入:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
//"build"是指令 用npm run 指令名称 : "webpack-cli"真正执行脚本程序
"build":"webpack-cli" //用npm run builld执行.
}
npm run build 其实就是执行了脚本程序 webpack-cli
(3).配置webpack
1).在当前项目里面新建一个 webpack.config.js 默认位置
2).在当前项目里面新建一个 src/index.js src目录就是源码开发文件夹目录
index.js就是需要打包的源码入口，会打包入口里面所有依赖模块，并构建一个依赖图，
依次打包里面所有依赖文件. webpack优化代码流程.
3).在一个webpack打包项目里面可以有多个入口(多entry)
webpack的配置文件可以在修改在你想要指定位置. 可以通过命令 --config 来修改配置文件的位置;
----
把webpack.config.js 移动到config/文件夹里面
1).npx webpack --config=config/webpack.config.js
2).如果是npm脚本就修改package.json scripts 里面的 webpack-cli --config=config/webpack.config.js
注意: 在webpack命令里面可以通过 --config 指定配置文件的位置.
----
(4).loader使用
webpack默认只能打包js代码. 要打包其他类型的文件，需要loader支持.
1).css-loader style-loader 一般要一起使用
css-loader用来支持webpack可以加载css
style-loader可以把css写入网页
安装:
npm i css-loader style-loader -D
配置:
module:{//模块
rules:[//规则
{ //一个对象就是loader加载一条规则
test:/\.css$/, //正则表达式，表示匹配以.css结尾的文件
//表示test匹配的文件用 style-loader 和 css-loader来处理
//loader有顺序区别，执行的顺序是从右往左，从下往上 ,loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)
use:["style-loader","css-loader"]
//loader是可配置的，配置loader写成对象的形式
}
]
}
2).less-loader 用来加载并编译less文件
安装:
npm i less less-loader style-loader css-loader -D;
npm i less less-loader -D;
配置:
module:{
rules:[
{//less-loader配置
test:/\.less$/,//以less结尾的文件
use:["style-loader","css-loader","less-loader"]
}
]
}
3).sass-loader 用来加载并编辑sass文件
安装:
npm i node-sass sass-loader style-loader css-loader -D
npm i node-sass sass-loader -D
配置:
{//sass-loader配置
test:/\.scss$/, //配置loader 处理以.scss结尾的文件
use:["style-loader","css-loader","sass-loader"]
}
4). url-loader file-loader用来打包图片文件.
url-loader 依赖于file-loader , 可以配置指定大小的图片打包为base64的格式. 如果大于指定大小的图片会打包成文件.
file-loader 打包文件.
安装:
npm i url-loader file-loader -D
配置:
{//url-loader 配置
test:/\.(jpe?g|png|gif|webp)$/,
use:[{
loader:"url-loader",
options:{
//图片如果小于8000byte = 8k 的时候打包成base64
//否则就打包成图片
limit:8000
}
}]
}
想打包html文件的话
（1）安装插件 npm i html-webpack-plugin -D
（2）const HtmlWebpackPlugin=require("html-webpack-plugin"); 这个写在webpack.config.js//用nodejs模块化语法引入插件类
plugins: [
//html打包插件. 它会打包指定的html,并把当前配置
//里面的所有打包的js或css插入html文档
new HtmlWebpackPlugin({
template: './src/template/pp.html', //处理html模板路径
inject: "body", //打包的js的插入位置 true false【不插入】 head body
minify: { //打包html的时候压缩哪些内容
removeComments: true, //移出注释
removeAttributeQuotes: true, //是否移出属性的双引号
collapseWhitespace: true //是否移出空白
},
chunks: ["hh", "pp"], //打包特定的js文件
filename: "pro.html" //输出html文件名称
}),
],