Webpack详解及基础使用

最新推荐文章于 2024-04-20 18:55:08 发布

A_lexzanda

最新推荐文章于 2024-04-20 18:55:08 发布

阅读量181

点赞数

分类专栏： vue学习笔记文章标签： webpack javascript node.js vue

本文链接：https://blog.csdn.net/a_lexzanda/article/details/122056838

版权

vue学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

什么是Webpack？

webpack是一个现代的JavaScript应用的静态模块打包工具

模块：前端模块化的一些方案有CommonJS，ES6，AMD，CMD；webpack可以作为项目模块化开发提供底层支撑，处理模块之间的相互依赖（JavaScript文件，CSS，图片，json文件等都可以被当作模块来使用）并将其进行整合处理成浏览器可识别的代码。

打包：将webpack中的各种资源模块进行打包合并成一个或多个包（Bundle），并且在打包过程中可以对资源进行优化和处理：TypeScript转换成JavaScript；将scss转化成css；将ES6语法转换成ES5等。

和grunt/gulp的对比

1. grunt/gulp的核心是Task

我们可以配置一系列的task，并且定义task要处理的事务（如ES6、ts转化，scss转化成css，图片压缩）；之后让grunt/gulp来依次执行这些task，并且让整个流程自动化。所以grunt/gulp也被称为前端自动化管理工具。

2. grunt/gulp和webpack的不同

grunt/gulp强调的是前端流程的自动化，通常只进行简单的合并和压缩，模块化不是核心

webpack强调模块化开发管理，能应对模块相互依赖非常强的情况，而问价压缩预处理等功能只是附带的功能

webpack安装

安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm（Node packages manager）使用 npm 进行安装，--save-dev是开发时依赖，项目打包后不需要继续使用

npm install webpack@3.6.0 --save-dev //windows

sudo npm install webpack@3.6.0 --save-dev // mac系统，需输入开机密码

webpack安装踩坑：

安装完后，编译器提示找不到webpack命令 zsh: command not found: webpack

解决方案：

//在终端先输入

echo 'export PATH="./node_modules/.bin:$PATH"' >> ~/.zshrc

//回车后再输入

source ~/.zshrc

webpack的使用

新建一个项目，创建dist文件夹和src文件夹，src下创建main.js文件（入口文件），index.html文件，和 js文件夹；js文件夹中放入依赖js文件mathUtils.js文件。在项目终端运行 npm init 会生成依赖包的管理文件package.json。目标：使用webpack将main.js和mathUtils.js依赖模块打包成bundle.js并存放在dist文件夹中。

mathUtils.js 内容：

function add(num1,num2){
  return num1 + num2
}
export {add}

main.js 内容：

import {add} from "./js/mathUtils.js"

console.log(add(500,20));

index.html 内容：

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<script src="../dist/bundle.js"></script>
</body>
</html>

1. 直接打包

在终端中输入webpack打包命令

webpack ./src/main.js ./dist/bundle.js // webpack + 入口 + 出口

打包成功时可以看到dist文件夹多出了bundle.js文件，终端会显示：

2. webpack.config.js配置打包

在项目的最外层新建webpack.config.js 文件，并配置打包的入口entry和出口output：

const path = require('path') //node包里找路径

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname, 'dist'), //动态获取绝对路径
    filename:'bundle.js', //打包后的文件
  },
}

此时在项目终端输入 webpack 可以不用写出入口路径直接打包。

在package.json文件中配置build映射后，打包时会优先依赖本地的webpack版本而不是全局的