1、webpack4.0 基础配置
程序员文章站
2022-07-12 19:55:37
...
1.webpack环境的搭建
npm install webpack webpack -D //开发环境受用
我使用的代码编辑工具是VScode，安装code runner插件很方便
2.webpack的默认打包
(1).简历项目文件夹
(2).项目目录结构
|-src
----index.js
|-index.html
(3).初始化项目 npm init -y
在index.js文件夹里面写一些东西，例如
//index.js
console.log('start learning webpack！')接着打开cmd终端进入项目文件（vscode直接按Ctrl+`）
输入：npx webpack
然后就会在项目文件夹上生成一个dist文件夹，里面有main.js。
现在在index.html里面就可以引入这个main.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./dist/main.js"> </script>
</head>
<body>
</body>
</html>3.webpack的基础配置
在项目根目录里面建立一个 webpack.config.js 文件，用来写配置
附上代码：
let path = require('path');
//console.log(path.resolve(__dirname,'dist'))
module.exports ={
mode:'development', //有两种模式，开发模式以及生产模式development production
entry:'./src/index.js', //项目打包的入口文件，告诉webpack从哪个开始打包
output:{ //这里是输出的意思
filename:'main.js', //输出的文件名
path:path.resolve(__dirname,'dist')//输出路径必须是绝对路径，这里使用node自带的path
}
}
第一节学习笔记完毕！
上一篇： 二、webpack4.0配置篇
下一篇： pandas计算的欧式距离矩阵