Webpack详解及基础使用

  • 什么是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版本而不是全局的 

 

 配置完映射后使用命令 npm run build 会优先用本地webpack进行打包,没找到再使用全局的。打包成功后打开index.html网页控制台会显示520

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值