快速使用WebPack打包工具

最新推荐文章于 2024-02-23 13:41:07 发布

a Fang

最新推荐文章于 2024-02-23 13:41:07 发布

阅读量363

点赞数 2

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

本文链接：https://blog.csdn.net/qq_46258465/article/details/119962923

版权

前端框架专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文介绍了webpack作为前端模块化打包工具的使用，包括其对模块化支持、与grunt和glup的区别，详细阐述了webpack的安装过程，包括全局和本地安装的注意事项，以及如何配置和运行webpack，帮助读者掌握webpack的基础操作。

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

webpack

webpack是一个JS静态资源打包工具

1 前端模块化

1.2 模块化

模块

AMD
CMD
CommonJS
ES6
…

webpack支持模块化开发
可以帮助处理模块之间的关系
不仅js可以被看做模块，在webpack中图片、json文件、CSS均可被看做模块使用

1.3 grunt与glup的对比

grunt、glup的核心是Task
grunt、glup是前端自动化工具
过程：首先我们定义一系列task让glup和grunt依次执行task，使流程自动化。

1.4 Glup的task案例

task将src夹下的所有js文件转为ES6语法然后在，在dist文件夹中输出。

1.5 使用

工程依赖度低，并且模块化概念呢用的少只需要使用grunt、glunpjiukeyi；
如果说是整个项目用了模块化管理，并且相互依赖强，就使用更加强大的webpack

1.6 不同点

grunt与glup强调流程zhidonghua，模块化不是核心
webpack具有grunt与glup的功能，但是更加强调的是模块化

2 webpack安装

2.1 注意

npm包关机工具，其中node依赖这个npm这个包，才可以正常使用。

node首先需要安装好才可以使用webpack建议node8.9版本以上

2.2 安装webpack

2.2.1 查看node版本

2.2.2 安装webpack

在cmd命令中输入

全局安装：

等待一会儿装3.6.0版本的尽量和脚手架版本一致
```
npm install webpack@3.6.0 -g
```
webpack -v查看一下是不是已经安装好了
局部安装：

安装在相应的文件空间里面

2 Vue CLI

2.1文件架构

2.2 webpack打包

因为有很多js文件不方便管理所有我们需要使用webpack对我们的文件进行打包

2.2.1 操作

现在我们只有两个文件还好，但是一旦出现一个大项目，有很多js那么代码编写以及管理，那我们按照之前一个个应用就不方便，所以我们需要使用webpack。

源码：

a.js

const add ="11111";
export default add;

main.js

import add from "./a.js";
console.log(add);

webpack详解.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  webpack-->
</head>
<body>
<script src="./dist/bundle.js"></script>
<script src="../vue.js"></script>

</body>
</html>

打包

webpack ./src/main.js ./dist/bundle.js

运行一下：

可以看到我们的效果出来了，打印出了111，在这里我是使用ES6模块化写的，当然你们也可以使用其他模块化编写方式。

2.2 webpack配置

2.2.1 创建一个配置文件

webpack.config.js

让它自动导出到我们指定的的一个路径成为一个指定文件。

const path =require('path')
module.exports={
    entry: './src/main.js',
    output:{
        path:path.resolve( __dirname,'dist'),
        filename:'bundle.js'
    },
}

2.2.2 初始化npm环境

npm init

回车第一个文件名字改一下，其他的默认选项回车即可，最后选择yes我们就可以了

这个时候我们就会发现我们多了一个配置文件打开看看：

查看配置文件详情：

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