Webpack

名字是乱打的

发布于 2021-12-23 17:24:11

1K0

发布于 2021-12-23 17:24:11

文章被收录于专栏：软件工程

本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。关键词:静态模块,打包为什么要用Webpack呢,我们直接将静态资源放那,浏览器用就直接加载渲染不行吗? 不可以,因为有些模块必须经过Webpack做一定处理,处理成浏览器可以用的才行,比如一些CommonJS浏览器就不能直接识别.

内容

一. 对模块化进行解释 二. 对打包的理解 三. 关于webpack和node和npm的关系 四.关于Webpack的一个简单应用 五.webpack.config.js配置和package.json配置 六.webpack中使用css文件的配置

一. 对模块化进行解释

前端模块化：为什么前端需要模块化不需要再说了。

目前使用前端模块化的一些方案：AMD.CMD.CommonJS，ES6
在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。
并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。
而webpack其中一个核心就是让我们可能进行模块化开发并且会帮助我们处理模块间的依赖关系。
而且不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用。
这就是webpack中模块化的概念。

二. 对打包的理解

理解了webpack可以帮助我们进行模块化，并目处理模块间的各种复杂关系后，打包的概念就非常好理解了。
打包就是将webpack中的各种资源模块进行打包合并成一个或多个包（Bundle）。
并且在打包的过程中，还可以对资源进行处理比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

三. 关于webpack和node和npm的关系

webpack是静态模块资源打包工具,我们需要依赖于node.js,node环境为了可以正常的执行很多代码，必须其中包含各种依赖的包,npm工具（node packages manager）可以对包做一些管理.

四.关于Webpack的一个简单应用

如下面的例子,我们在model.js做了两个小工具,用Commonjs模块化规范写的,这样是无法直接在html代码中加载的

于是乎我们用webpack进行一个打包webpack ./src/main.js ./dist/bundle.js,将main.js打包到./dist/bundle.js,这其中我们在main.js导入的内容也会被自动打包

其内部会做组件内容做一定处理,我们可以直接引用和使用打包后的内容

五.webpack.config.js配置和package.json配置

有的时候我们想要更智能一些,输入一个webpack就可以进行自动的打包,那么我们就可以使用webpack.config.js 如下所示我们用Commonjs语法写了一个入口和出口,另外这里有个path需要定制,这里出口要指定一个绝对路径而不是相对路径(代码中是错误的),但是直接黏贴肯定不好,不方便,而且回头更改位置也会出错,因此我们可以用package.json

module.exports={
    entry:'./src/main.js',
    output:{
        path:'./dist',
        filename:'bundle.js'
    }
}

package.json

package.json定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。

我们可以利用npm init 初始化一个package.json,用于定义或者描述该项目
npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境

name-包名

version-包的版本号。

description-包的描述。

homepage-包的官网URL。

author-包的作者，它的值是你在https://npmjs.orq网站的有效账户名，遵循"账户名<邮件>"的规则
例如：zhangsan <zhangsang163.com）。

contributors-包的其他贡献者。

dependencies/devDependencies-生产/开发环境依赖包列表。它们将会被安装在node-module目录下。

repository-包代码的Repo信息，包括type和URL，type可以是git或svn，URL则是包的Repo地址。

main-main字段指定了程序的主入口文件，require（'moduleName'）就会加载这个文件。
这个字段的默认值是模块根目录下面的index.js keywords-关键字

我们用npm init创建好packagejson后,就可以如下面这样编写了,首先导入了一个path模块,这个创建好package.json就有了,我们可以调用path.resolve(__dirname,'dist'),其中__dirname前面是双下划线,它是一个全局变量可以拿到我们package.json文件所在的绝对路径,path.resolve(__dirname,'dist')可以将他们拼接在一起构成一个完成的绝对路径.

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

这样就可以了,我们通过一个webpack命令即可完成打包

整个流程,创建package.json->输入webpack->从本目录webpack.config.js找到入口和出口进行自动化的打包

我们开发时候一般用npm run build这个命令进行构建打包,那么如何将npm run build和我们刚刚配置的webpack等价呢?查看package.json发现这里实际上存储了一些自定义的脚本,比如这个test,如果我们执行npm run test就会执行echo \"Error: no test specified\" && exit 1

因此我们可以在scripts里加一段"build":"webpack" 这样我们执行npm run build 就会执行webpack了

六.webpack中使用css文件的配置

在说使用css文件之前我们要说一些webpack的能力问题以及loader概念

webpack用来做什么呢？

在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。
但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss.less转成css，将jsx..vue文件转成js文件等等。
对于webpack本身的能力来说，对于这些转化是不支持的。口那怎么办呢？给webpack扩展对应的loader就可以啦。

loader是webpack中一个非常核心的概念,他负责对webpack打包功能做拓展。

loader的使用

步骤一：通过npm安装需要使用的loader
步骤二：在webpack.config.js中的module关键字下进行配置
ps :大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法。https://www.webpackjs.com/loaders/

比如安装一个css-loadernpm install --save-dev css-loader

注意：这里我们发现style-loader放在css-loader的前面。这是因为style依赖于css而且最主要原因是因为webpack在读取使用的loader的过程中，是按照从右向左的顺序读取的。我们既然用到了style.loader那么我们一样需要安装style.loader

目前，webpack.config.js的配置如下：

关于入口entry：可以是字符串/数组/对象，这里我们入口只有一个，所以写一个字符串即可

出口：通常是一个对象，里面至少包含两个重要属性，path和filename

注意：path通常是一个绝对路径

有的时候我们开发某个项目需要特定版本的webpack,那么我们可以在该项目包下执行npm install webpack,这样就在项目内安装了一个本地webpack,但是如果我们还用的cmd终端的话肯定还是用的全局webpack,如果想用局部的应该使用node_modules/.bin/webpack