webpack笔记

最新推荐文章于 2024-09-05 12:11:21 发布

weixin_44293370

最新推荐文章于 2024-09-05 12:11:21 发布

阅读量52

点赞数

分类专栏：学习笔记文章标签： webpack

本文链接：https://blog.csdn.net/weixin_44293370/article/details/113748186

版权

学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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/

weixin_44293370

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack笔记

Webpack学习笔记目录Webpack学习笔记前言一、利用webpack实现一个项目的简单初始化前言学习记录，不断更新一、利用webpack实现一个项目的简单初始化首先，建立文件夹webpack_dataStructions,开启命令行工具输入npm init -y初始化项目，生成package.json文件。PS C:\Users\faker\Desktop\html\webpack_dataStructions> npm init -y 创建源代码文件夹src,在文
复制链接

扫一扫