Webpack学习笔记
前言
学习记录,不断更新
一、利用webpack实现一个项目的简单初始化
首先,建立文件夹webpack_dataStructions,开启命令行工具输入npm init -y初始化项目,生成package.json文件。
PS C:\Users\faker\Desktop\html\webpack_dataStructions> npm init -y
创建源代码文件夹src,在文件夹中创建index.js入口文件以及index.html模板文件, 记得在index.html文件中引入入口文件。
命令行中输入npm install webpack webpack-cli -D进行webpack工具的的局部安装。
PS C:\Users\faker\Desktop\html\webpack_dataStructions> npm i webpack webpack-cli -D
在根目录下创建webpack.config.js文件,配置环境为开发环境。
module.exports = {
mode: 'development',
}
在package.json文件中scripts配置对象下添加如下代码:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack"
},
完成以上步骤后,即可在命令行窗口运行webpack的打包功能
PS C:\Users\faker\Desktop\html\webpack_dataStructions> npm run dev
为实现自动打包功能,还可以安装自动打包工具,更方便地适应项目的频繁更改
PS C:\Users\faker\Desktop\html\webpack_dataStructions> npm i webpack-dev-server -D
安装完自动打包工具之后,记得在package.json文件中更改dev对应的运行脚本为webpack-dev-server:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
另外,在模板文件index.html中要把引用地址改为打包后生成的js文件(默认为main.js)的绝对路径(以项目文件夹为根目录):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>测试页面</title>
<script src="/main.js"></script>
</head>
<body></body>
</html>
重新启动webpack,即可实现自动打包功能:
PS C:\Users\faker\Desktop\html\webpack_dataStructions> npm run dev
打开8080端口页面,检查运行效果
i 「wds」: Project is running at http://localhost:8080/