首页 > 其他分享> 文章详细

webpack(一)——webpack的安装和基本配置

2022-04-25 00:32:12 阅读：202 来源： 互联网

标签：npm 文件配置 js webpack build 安装打包

1. 为什么会出现构建工具包

1.1 前端开发的复杂化

前端开发目前我们遇到什么复杂的问题？

开发过程中我们需要通过模块化的方式开发
使用高级的特性加快开发效率或者安全性，ES6+，TypeScript，通过sass，less等方式来编写css样式代码
我们希望实时地监听文件的变化来反映到浏览器上面，提高开发效率
开发完成之后我们需要将代码进行压缩，合并以及相关的优化

1.2 前端三个框架的脚手架

框架的创建过程我们都是基于脚手架
事实上vue-cli都是基于webpack，帮助我们模块化、less、TypeScript

2. webpack是什么

webpack is a static module bundler for modern JavaScript application.

打包bundler：webpack可以帮助我们进行打包，所以他是一个打包工具
静态的static：我们最终可以将代码打包成最终的静态资源（部署到静态服务器）
模块化module：webpack默认支持各种模块化开发，ES Module，CommonJS，AMD等
现代的modern：正是因为前端开发面临各种各样的问题，才催生了webpack的出现和发展

3. webpack的安装

安装依赖：先安装nodejs，并且安装npm
安装webpack，安装webpack-cli（这个不是必需的）

npm install webpack webpack-cli -D(局部安装)
npm install webpack webpack-cli -g(全局安装)

4. webpack初体验

在编写代码的时候，模块化有很多种方式实现，ES6和commonjs的方式，如果两种方式同时使用的话，浏览器并不能识别，这之后需要用到webpack帮助我们改造打包
进入文件夹中输出webpack，多了一个dist文件夹，是被压缩过的代码，直接在index.html引入dist下的文件，代码在浏览器下可以正常运行
dist文件夹下直接转化出来的是ES6的代码。在weback官方文档中提到，webpack不会更改代码中除了import和export语句以外的部分（没有配置babel的情况下）
直接敲webpack命令的时候，实际执行的是：在src的目录下面找index.js的文件，用这个文件作为入口，之后通过这个入口去看对其他一些文件的引入，再进行转化打包
直接敲webpack的时候，是全局的webpack，但是实际上用的是局部的webpack
由于需要配置好不同的webpack，所以需要在文件中配置package.json的文件，用npm install安装
生成package.json配置文件
```
npm init
```
安装局部的webpack
```
 npm install webpack webpack-cli -D
```
直接敲webpack用的是全局的webpack，需要用局部的webpack

方法一:
```
./node_modules/.bin/webpack
```
方法二：
```
npx webpack
```
方法三：

在package.json里面写命令
```
"scripts": {
    "build": "webpack"
  }
 -> npm run build
```

5. webpack配置文件的使用

指定入口和出口

方法一：

npx webpack --entry ./src/main.js --output-path ./build

方法二：package.json

"scripts": {
    "build": "webpack --entry ./src/main.js --output-path ./build"
  }
 -> npm run build

以上查阅官方文档：文档-API-命令行接口 Flags

应用的时候，在webpack配置：

新建webpack.config.js

const path = require("path");

module.exports = {
    // 单入口
	entry: "./src/main.js",
    // output跟的是对象
    output: {
        // 打包的文件名
        filename: "bundle.js",
        // 这里的路径不能使用相对路径，只能使用绝对路径
        // __dirname这个可以拿到当前文件的绝对路径,拼接上build文件夹
        path: path.resolve(__dirname, "./build")
    }
}

指定配置文件

如果webpack配置文件不叫webpack.config.js的时候，执行命令，相当于执行的时候没有配置webpack的命令。

webpack手动指定配置文件
```
// --config + 文件名
webpack --config wk.config.js
```

6. webpack依赖关系图

src目录下有一个text.js
```
console.log("hello world")
```
在打包的时候没有打包进去，为什么？

因为webpack从入口文件开始进去，寻找用到的文件进行打包，text.js与入口文件没有任何关系，所以没有打包的必要，就没有打进去
那么webpack到底是怎么对我们的项目进行打包的呢？
- 事实上webpack在处理应用程序时，会根据命令或者配置文件找到入口文件
- 从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（js文件，图片，css文件，字体）
- 然后遍历图结构，打包一个个模块
所以说，如果一个东西没有用到的时候，虽然存在在项目内，但是webpack不会对它进行打包

这个就是tree-shaking
需要打包的话，可以通过入口文件引入
```
import "./js/text"
```

标签：npm,文件,配置,js,webpack,build,安装,打包
来源： https://www.cnblogs.com/kihyunBlog/p/16188444.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9