1.【webpack】初识及项目创建

最新推荐文章于 2023-04-22 22:27:49 发布

cc_want

最新推荐文章于 2023-04-22 22:27:49 发布

阅读量519

点赞数

分类专栏：前端文章标签： webpack

本文链接：https://blog.csdn.net/cc_want/article/details/92840712

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

webpack是构建前端html的一个强大的脚手架工具，随着业务的增多，前端功能越来越复杂，单纯的写html已经不能满足我们的日常需要，随后，前端模块化变得越来越重要，但是模块化后，js之间的交互，引用，管理却变得复杂，然而一个好的前端脚手架工具能帮我们处理这些琐事

1.认识package.json

package.json是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等

怎么生成package.json呢?

webpack中文学习网

https://www.webpackjs.com/guides/

首先创建一个文件夹webpack-demo，并使用命令行cd到此目录下，然后执行以下命令

npm init

使用以上命令可以在当前目录生成一个package.json文件，文件内容如下：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2.安装webpack依赖

使用以下命令可以在package.json中添加webpack依赖，学过java的同学应该知道，此时相当于在pom中添加了一个maven依赖库

npm install --save-dev webpack

同时还生成了node_modules，这里不用管它，它就是你项目中所有的依赖项目的源文件，它是一个系统文件夹，一般我们不会去修改它

3.认识scripts

在package.json文件中有一个名字叫test的脚本，我们使用npm run命令来运行一下试试

npm run test

运行结果：

可以看到成功输出了Error: no test specified字符串，这里为我们的后续开启了一个美好的篇章

4.创建index.html文件

在项目的根目录下创建index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <title>demo</title>
  </head>
  <body></body>
</html>

5.使用webpack命令编译

首先我们使用webpack命令来打包测试一下

出现以上错误提示，表示我们现在使用的是webpack4以上的版本，新版本需要安装webpack-cil依赖

npm install --save-dev webpack-cli

安装完成后，在项目的根目录下创建build文件夹，并在此文件夹中新建webpack.config.js文件，文件内容如下:

'use strict'
const webpack = require('webpack')
module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js'
  }
}

然后在项目根目录创建src文件夹，代表我们的项目源码，并在此文件夹下创建index.js文件，文件内容如下:

function hello() {
  alert('hello')
}
hello()

然后我们再使用以下命令打包

webpack --config build/webpack.config.js

输出：

这里看到已经对index.js文件进行了打包，生成的文件默认在当前项目根目录的dist目录下

此时，我们再使用以下命令试试

webpack --config build/webpack.config.js --progress

多运行几次，发现了什么？

在添加了--progress选项后，可以看到打包的进度，哈哈，是不是很有意思呢？

除此之外还有很多选项，我把常用的几个列举出来：

--color 显示颜色

--display-module 显示打包模块

--display-reason 显示打包原因

添加完这些选项后，我们发现这个命令已经很长了，怎么办？

按照第3步中的方法，我们添加一个script，打开package.json文件，编辑内容如下：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config build/webpack.config.js --progress --color --display-module --display-reason"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4"
  }
}

接着，我们执行下面命令试试

npm run dev

结果：

哈哈，到这里是不是很爽呢？

这一篇主要分享webpack的简单使用，从webpack的初始化，项目创建到项目编译，在下一篇中为大家讲解webpack打包html

cc_want

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
1.【webpack】初识及项目创建

webpack是构建前端html的一个强大的脚手架工具，随着业务的增多，前端功能越来越复杂，单纯的写html已经不能满足我们的日常需要，随后，前端模块化变得越来越重要，但是模块化后，js之间的交互，引用，管理却变得复杂，然而一个好的前端脚手架工具能帮我们处理这些琐事目录---------------------------1.【webpack】初识及项目创建2.【webpack】打...
复制链接

扫一扫

专栏目录