1）npm init -y 创建package.json文件
2） npm i webpack -g全局npm i webpack -save-dev局部
安装webpack
3）npm i webpack-cli -g 全局 npm i webpack-cli -d 局部
安装webpack-cli
4）webpack -v 查看webpack版本
5）webpack .\src\main.js --output .\dist\bundle.js 用webpack打包
es6的语法太高级的，浏览器不识别，用webpack打包，打包好的文件为dist下的bundle.js
index.html 中引入这个文件，而不是引入 main.js
<script src="../dist/bundle.js"></script>
webpack作用
a webpack 能够处理相互之间的依赖关系
b webpack能够处理js 的兼容问题，浏览器不识别的高级语法转换成浏览器能识别的
只要有一个main.js 文件 在这个文件中，导入不同的包进行编写代码，然后用webpack打包
6）在根目录下建立webpack.config.js文件
const path=require("path")
module.exports={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,"dist"),
filename: "bundle.js"
}
}
指定出入口函数 运行时只需要webpack 就可以
7） 终端运行 webpack
8）npm i webpack-dev-server -D
安装webpack-dev-server
9）package.json中添加dev
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
修改package.json dev
"dev": "webpack-dev-server --open"
每次启动npm run dev后会自动打开页面
"dev": "webpack-dev-server --open --port 3000"
修改端口号
"dev": "webpack-dev-server --open --port 3000 --contentBase src"
自动进入页面
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
热重载，不需要重新更新module,只更新修改的部分
10）将html中的script引入变成/bundle
<head>
<meta charset**="UTF-8"**>
<title>**Title**</title>
<script src**="/bundle.js"**></script>
</head>
webpack-dev-server 帮我们打包生成的bundle.js文件并没有打包存放到物理磁盘上，而是直接托管到了电脑的内存中，所以在项目根目录中，根本找不到打包好的bundlejs
可以认为 webpack-dev-server把打包好的文件， 以一种虚拟的形式，托管到了项目的根目录中和dist src node_moudle平级
目的：方便打包构件
11）终端运行npm run dev 只要在终端运行此句后，只要有内容修改，不需要重启和刷新页面，页面就会自动切换
12）安装html-webpack-plugin
npm i html-webpack-plugin -D
让其访问内存中的页面，而不是硬盘中的html，在一定程度上提高效率
html-webpack-plugin作用
a自动在内存中，根据指定页面生成一个页面
b自动把打包好的bundle.js 追加到页面中去
13）在webpack.config.js中添加该plugin
//只要是插件都要放到 plugins中
const htmlWebpackPlugin=require("html-webpack-plugin");
plugins:[ //配置一个在内存中生成HTML的插件
new htmlWebpackPlugin({ //指定模板页面
template: *path*.resolve(__dirname,"src/index.html"),
filename: "index.html"
})
14）对于css，less，seas等文件的引入
在main.js文件中引入
import "./css/index.css"
但是webpack只能解析js文件，不能解析css文件并打包
安装 style-loader css-loader
npm i style-loader -D
npm i css-loader -D
15）在webpack.config.js文件中添加module，和plugins平级
moudle:{ //这个节点用于配置所有的第三方模块加载器
rules:[
{test:/\.css$/,use:['style-loader',"css-loader"]}
]
}
当遇到.css文件时候，用style-loader和css-loader来解析
webpack处理第三方文件类型的过程
1）发现要处理的不是js文件，然后就去配置文件中，查找有没有对应的第三方loader规则
2）如果能找到对应的规则，就会调用对应的loader处理这种文件类型
3）调用loader的时候是从后往前调用的
最后一个loader调用完毕，交给webpack打包
网友评论