开发笔记:1小时入门，手把手教你学会用webpack打包，隔壁王大爷看了都说小伙子细！

新建站点&＃xff1a;⭐

这里的文件路径最好是英文

注意&＃xff1a;站点文件名不可以起名叫webpack

为什么呢&＃xff1f;

我们在 https://www.npmjs.com/ 中搜索 webpack模块是可以搜到的

在nodejs中我们通常是下载别人的模块再引用&＃xff0c;当别人已经使用webpack上传&＃xff0c;我们是不可以再用这个名字的。

下面&＃xff0c;我们在站点文件内&＃xff0c;右键git bash here

先进行初始化 ⭐

cnpm init -y


初始化成功&＃xff1a;

初始化成功&＃xff0c;站点自动生成package.json 文件

下载&＃xff1a; ⭐

npm i webpack&＃64;4 -D


下载成功&＃xff1a;

注意&＃xff1a;此时的下载要小心版本&＃xff0c;webpack版本5及其以上&＃xff0c;出来时间不长&＃xff0c;但不兼容以前的对应插件&＃xff0c;而现在项目中所使用的版本是4&＃xff0c;所以需要下载版本5之前的版本。

npm i webpack-cli&＃64;3 -D


下载成功&＃xff1a;


终于下载成功了哈哈&＃xff1a;

在站点新建文件src&＃xff1a; ⭐
创建html和css、js文件

webpack的使用跟gulp一样&＃xff0c;需要先创建一个文件&＃xff1a;webpack.config.js
写打包配置
所有配置在这个文件中是以一个导出的形式写的
webpack跟gulp一样&＃xff0c;是基于nodejs的

module.exports &＃61; {
所有配置都写在这里面
// 必须要有一个入口文件和出口文件
// 配置入口文件(主文件)
// 主文件就是要将其他所有的文件导入到这里&＃xff0c;打包这个文件
}


我们想要运行一下main.js
需要在package.json 中添加指令

package.json文件中的scripts键&＃xff0c;可以配置自定义的命令&＃xff0c;scripts中的键代表自定义的命令&＃xff1a;npm run 自定义的命令 - 运行的真实命令其实是&＃xff0c;这个键对应的值

package.json中配置的命令的时候&＃xff0c;有4个默认命令&＃xff08;start/test/restart/stop&＃xff09;&＃xff0c;是可以在运行的时候省略run&＃xff0c; npm start

注意&＃xff1a;添加逗号&＃xff0c; 指令名自拟

使用

node ./src/js/main.js


我们在这webpack.config.js中配置 ⭐

在这个文件中配置好选项之后&＃xff0c;在命令执行webpack命令就能完成打包。
配置好了以后&＃xff0c;在命令行运行命令&＃xff1a;webpack
默认情况下&＃xff0c;这个命令是运行失败的&＃xff0c;因为从来没有安装过这个命令 - 安装了webpack和webpack-cli两个模块&＃xff0c;命令就从这两个模块中来

但是没有全局包的话&＃xff0c;执行这个命令会报错&＃xff0c;可以在package.json文件中配置命令来解决这个问题&＃xff1a;

"start":"webpack"


以后就可以使用npm start来代替webpack这个命令了

在这个配置文件中&＃xff0c;首先是将所有配置导出&＃xff1a;

module.exports &＃61; {

}


webpack是基于nodejs的打包工具。

webpack打包的原理是将所有内容&＃xff0c;包括js、css、图片等资源统统打包到一个js文件中&＃xff0c;所以在这个配置文件中&＃xff0c;首先要配置的是入口文件和出口文件&＃xff1a;s

const path &＃61; require(&＃39;path&＃39;)
module.exports &＃61; {
// 入口
enter:path.join(__dirname,&＃39;./src/app.js&＃39;), / 这里必须是绝对路径
// 出口
output:{
path:path.join(__dirname,&＃39;./dist&＃39;),
filename:"indexjs" / 自定义出口文件
}
}


在这个打包过程中&＃xff0c;可以将es的模块化&＃xff0c;打包成能用的es的语法。

不错不错&＃xff1a;

如果需要将打包后的文件&＃xff0c;放在一个html中引入使用&＃xff0c;就可以利用一个插件生成一个hml&＃xff1a;

npm i html-webpack-plugin -D


在配置文件中引入&＃xff1a;

const HtmlWebpackPlugin &＃61; require(&＃39;html-webpack-plugin&＃39;)


在配置项中&＃xff0c;多加一个plugins的键&＃xff1a;

const path &＃61; require(&＃39;path&＃39;)
const HtmlWebpackPlugin &＃61; require(&＃39;html-webpack-plugin&＃39;)
module.exports &＃61; {
/ 入口
enter:path.join(__dirname,&＃39;./src/app.js&＃39;), / 这里必须是绝对路径
/ 出口
output:{
path:path.join(__dirname,&＃39;./dist&＃39;),
filename:"indexjs" / 自定义出口文件
}&＃xff0c;
所有插件的配置
plugins:[
/ 有其他插件都写在这里
new HtmlWebpackPlugin({
template:path.join(__dirname,"./public/index.html"),
app:"index.html",
inject:true / 是否将打包后的js注入到指定的模板文件中
}),
]
}


我们指定入口文件的时候&＃xff0c;还可以使用对象的形式指定&＃xff1a;

enter:{
"js/index":&＃39;./src/app.js&＃39;), / 这里可以使用相对路径
}


这里的键&＃xff0c;表示生成以后的文件结构&＃xff0c;但默认没有用&＃xff0c;因为现在的出口文件被指定了&＃xff0c;需要修改出口文件配置&＃xff1a;

output:{
path:path.join(__dirname,&＃39;./dist&＃39;),
filename:"[name].js" / 使用变量&＃xff0c;不固定了
}&＃xff0c;


在打包后的文件夹中&＃xff0c;生成的新文件就是在enter中指定的结构中。

为了避免缓存&＃xff0c;可以在生成的文件名后面&＃xff0c;添加一个hash 值设为6

output:{
path:path.join(__dirname,&＃39;./dist&＃39;),
filename:"[name]-[hash:6].js" / 使用变量&＃xff0c;不固定了
}&＃xff0c;


此时&＃xff0c;当源文件不改变&＃xff0c;不会改变hash&＃xff0c;且只要改变源文件&＃xff0c;会生成新的目标文件&＃xff0c;需要借助一个插件来处理&＃xff1a;

npm i -D clean-webpack-plugin&＃64;2.0.2


导入并使用&＃xff1a; ⭐

const CleanWebpackPlugin&＃61;require("clean-webpack-plugin");
// 在插件配置中&＃xff0c;初始化即可
new CleanWebpackPlugin()


每次打包都会出现一个黄色提示&＃xff0c;这是在提示我们需要在配置文件中&＃xff0c;需要指定是在开发环境还是在生产环境&＃xff0c;这个配置是在选项配置中添加一个键&＃xff1a;

mode:&＃39;development/production&＃39;


然后再次打包的时候就没有提示了。生产环境文件会压缩&＃xff0c;开发环境文件不会压缩。

这个时候&＃xff0c;我们可以在选项中添加一个&＃xff1a;

devtool:"source-map"


如果在我们运行的目标文件中报错了&＃xff0c;可以通过这个文件准确的定位到错误的源文件。
例&＃xff1a; 设置 mode:‘development/production’

开发模式 mode:&＃39;development 不压缩代码

在main.js中设置一个错误

我们运行以后&＃xff1a;

点击错误提示可以跳转到&＃xff1a;

我们可以查看到源代码中具体是哪一个位置错误。

生产模式 &＃xff1a;mode:production’ 压缩代码

会找不到源代码的错误所在&＃xff0c;我们就可以添加 devtool:“source-map” 来解决问题 ⭐⭐

我们在开发过程中&＃xff0c;有些文件是需要拷贝到目标文件夹中的&＃xff0c;因为此时只能打包js文件和html文件&＃xff0c;css和其他js文件是不能进行打包的&＃xff0c;也拷贝不到目标文件夹中 - 静态css&＃xff0c;所以将来打包后的html是会运行报错的&＃xff0c;此时就需要用到另外一个插件&＃xff1a;

npm i copy-webpack-plugin&＃64;6.4.1 -D


导入并使用&＃xff1a;⭐

const CopyPlugin &＃61; require("copy-webpack-plugin");
在插件配置中使用
new CopyPlugin({
插件配置 from从某文件夹复制,可以使用相对路径&＃xff1b;to到某文件夹&＃xff0c;尽量使用绝对路径&＃xff0c;使用相对路径的时候是相对上面设置好的输出目录
patterns: [
{ "from": "./public/img", "to": path.join(__dirname, "./dist/img/") },
{ "from": "./public/css", "to": path.join(__dirname, "./dist/css/") },
{ "from": "./public/js", "to": path.join(__dirname, "./dist/js/") },
{ "from": "./public/fonts", "to": path.join(__dirname, "./dist/fonts/") }
]
}),


css文件可以在一个js中&＃xff0c;通过js引入使用&＃xff1a;

import "./css/a.css"


但是在打包的时候报错了&＃xff0c;其实es6的模块化规范中&＃xff0c;是可以通过js导入css的&＃xff0c;所以我们需要在配置中&＃xff0c;添加模块化的配置&＃xff1a;

module: {
rules: [
//配置CSS文件的import引入和解析 - 必须先style-loader然后再css-loader&＃xff0c;跟顺序有关
{ test: /\\.css$/i,use: ["style-loader", "css-loader"] }
]
},


这个配置中&＃xff0c;依赖两个插件&＃xff1a;

npm i style-loader css-loader -D


为了方便访问我们打包以后的目标文件&＃xff0c;所以webpack提供了一个服务器&＃xff1a;

npm i webpack-dev-server&＃64;3.11.2 -D


导入并使用&＃xff1a;

devServer:{
// 配置服务器根目录
contentBase: path.join(__dirname, "./dist"),
port:9527 // 配置端口号 - 可选项
}


要启动服务器需要在package.json中配置命令&＃xff1a;⭐

"dev":"webpack-dev-server"


执行&＃xff1a;

npm run dev


服务器启动成功&＃xff1a;

就能默认打包并刷新浏览器了。

注意:如果修改了配置文件就需要重新执行webpack命令&＃xff0c;如果修改静态资源文件&＃xff0c;就不需要重新执行&＃xff0c;服务器会自动重新打包

在这个服务器中&＃xff0c;可以配置代理&＃xff1a;

proxy:{
"/api":{
target:"http://localhost:3000"
}
}


代理可以配置多个。

⭐⭐⭐参考手册&＃xff1a;https://webpack.docschina.org/configuration/dev-server/#devserverproxy

你以为这就结束了嘛&＃xff1f;

其实是博主肝不动了&＃xff0c;更多详情待更吧…

CSDN技术交流群&＃xff1a; 不限萌新大佬&＃xff0c;欢迎加入我们的技术圈。

⭐微信交流群&＃xff1a;

觉得博主总结的不错的&＃xff0c;可以收藏支持一波~