Day25——webpack的使用

最新推荐文章于 2024-06-07 17:03:35 发布

Android_la

最新推荐文章于 2024-06-07 17:03:35 发布

阅读量236

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_40634846/article/details/107614757

版权

Vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

一. 回顾

前面学习了Day24——前端模块化，今天学习webpack的使用

二. webpack的使用

2.1 什么是webpack

从本质上讲，它是一个JavaScript应用的静态模块打包工具

那么什么是静态模块打包呢？

2.2 前端模块化

前端模块化有比较多的解决方案，目前主流常见的有CommonJS，ES6，AMD，CMD。

通过模块开发完成项目后，需要处理模块之间的各种依赖，并且要将他们整合打包。

webpack的其中一个核心就是帮助我们处理模块间的依赖关系。不仅仅是JS文件，CSS、图片、json文件等等在webpack中都可以被当作模块来使用。后面会详细阐述。

2.3 打包

总结一句就是讲webpack中的各种资源模块进行打包合并成一个或多个包（Bundle）

打包的过程中，可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法（有些应用不支持ES6，所以要降级使用），将TypeScript转成JavaScript等等。

从上面了解webpack的打包功能，那么似乎用grunt/gulp也可以完成目的。有什么不同呢？

2.4 和grunt/gulp对比

grunt/gulp 更加强调前端流程的自动化，模块化不是它的核心
webpack 更加强调模块化开发管理，而文件压缩合并、预处理等功能，是它附带的功能。

2.5 webpack与node的关系

在这里插入图片描述

2.6 安装webpack

安装webpack首先要安装Node.js，Node.js自带了软件包管理工具npm
查看自己的node版本：node -v
使用npm install webpack@3.6.0 -g指定全局安装的webpack，版本是3.6.0，因为vue cli2依赖该版本。
局部安装webpack。（后续才需要用到）–save-dev是开发时依赖，项目打包后不需要继续使用

cd 对应目录
npm install webpack@3.6.0 --save-dev

2.7 webpack的基本使用

构建目录如下：
在这里插入图片描述

注意代码中的注释，很重要，代码如下：

info.js

//ES6导出规范
export const name = 'why';
export const age = 18;
export const height = 1.88;

mathUtils.js

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

function mul(num1, num2) {
  return num1 * num2;
}


//commonJs的模块化规范
module.exports = {
  add,
  mul,
}

main.js

//1.commonjs的模块化规范
const {add, mul} = require('./mathUtils.js');

console.log(add(20, 30));
console.log(mul(20, 30));

//2。ES6的模块化规范
import {name, age, height} from "./info";

console.log(name);
console.log(age);
console.log(height);

index.html

<body>

<!--不能这样直接引用main.js,因为main.js里面有commonjs的规范，所以html这里不能识别出来。-->
<!--只能由webpack打包，将其自动解析commonjs成浏览器能识别的代码，-->
<!--我们再引入这个打好的包就可以-->
<!--<script src="./src/main.js"></script>-->

<!--使用webpack将main.js打包好后，就可以引入了-->
<script src="./dist/bundle.js"></script>
</body>

打包的命令：cd 进文件夹，然后webpack 需要打包的文件打包好的文件的存储位置，如下：

cd 01-webpack的起步

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

效果如下：

在这里插入图片描述

2.8 webpack的配置

2.8.1 问题背景

webpack的指令要求输入被打包的文件以及存储位置，有时候经常用到webpack打包的话会很麻烦，所以我们可以配置这个被打包的文件路径以及存储位置。

2.8.2 如何配置简单的webpack命令

首先我们重新copy刚才的工程，然后创建一个名为webpack.config.js的文件，名字是固定的不能改。如下：
在这里插入图片描述

webpack.config.js文件如下：

//要动态获取path路径，就要用到node语法
const path = require('path');//path文件无需自己写，但是要用npm init命令初始化

//通过commonjs模块化规范导出一些东西
module.exports = {
  entry: './src/main.js',//入口
  output: { //output是出口，要求是一个对象，有path路径属性以及filename文件名属性
    //__dirname是node上下文全局变量
    path: path.resolve(__dirname, 'dist'), //path要求使用绝对路径，所以要动态获取路径,resolve()函数会将__dirname和’dist‘拼接起来
    filename: 'bundle.js',
  }
}

在这里插入图片描述
这样就成功配置了。

2.8.3 配置webpack映射为npm run

2.8.3.1 问题背景

有时候需要使用局部的webpack，而不是全局的webpack，那么怎么办？
答：对webpack做配置

2.8.3.2 实现npm run build代替webpack

在刚刚生成的package.json中，配置如下
在这里插入图片描述
然后我们安装局部的webpack，代码如下：

npm install webpack@3.6.0 --save-dev

2.8.3.3 使用npm run build的好处

npm run 会优先使用局部安装的webpack，而webpack是使用全局使用的webpack。有时候实际需要是webpack的某些版本，那么自己可以配置本地的webpack。

2.9 webpack的loader

2.9.1 什么是loader

有时候我们不仅要对js做处理，还要对css、图片、typscript等等做处理，但是webpack本身是不支持的，但是加入loader后，就能完成这些处理。

2.9.2 loader的使用过程

通过npm安装需要使用的loader
在webpack.config.js文件中的modules关键字下进行配置

注：大部分的loader都可以在webpack官网找到，并且学习对应的用法

2.9.3 步骤

首先去webpack找对应的loader，如下：
在这里插入图片描述

如下：

下面贴出代码：
webpack.config.js

//要动态获取path路径，就要用到node语法
const path = require('path');//path文件无需自己写，但是要用npm init命令初始化

//通过commonjs模块化规范导出一些东西
module.exports = {
  entry: './src/main.js',//入口
  output: { //output是出口，要求是一个对象，有path路径属性以及filename文件名属性
    path: path.resolve(__dirname, 'dist'), //path要求使用绝对路径，所以要动态获取路径,resolve()函数会将__dirname和’dist‘拼接起来
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,//这是正则表达式，匹配所有css文件
        //css-loader只负责加载，不负责解析，所以没有css效果展示在浏览器
        //style-loader负责将样式添加到DOM中生效
        //使用多个loader时，是从右向左读取的，所以先加载css-loader，才到style-loader
        use: ['style-loader', 'css-loader' ]
      }
    ]
  }
}