前端打包工具-webpack

最新推荐文章于 2024-04-27 17:28:37 发布

12345sdfad

最新推荐文章于 2024-04-27 17:28:37 发布

阅读量290

点赞数

分类专栏：前端文章标签： node.js javascript vue.js

本文链接：https://blog.csdn.net/clyss1234/article/details/120264230

版权

本文介绍了如何使用webpack初始化前端项目，包括安装基本包、配置打包入口和开发环境，以及详细讲解了添加路径别名和服务部署时的配置步骤。

摘要由CSDN通过智能技术生成

文章目录

初始化项目

初始化项目

##webpack安装

创建package.json，执行npm init一路按enter键就搞定了

安装webpack基本包

# `webpack4.x` 必须安装`webapck-cli`，这是一个注意事项
npm install --D webpack webpack-cli webpack-dev-server

新建src/index.js，添加代码如下
```
console.log("hello world")
```
在package.json执行脚本script路径下添加"build":"webpack"
在终端执行npm run build，可以看到在根目录生成了dist/main.js的打包文件，这是webpack4.x打包默认找src/index.js打包入口。

配置`webpack`

新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react demo</title>
</head>
<body>
    <div id