찾다

집 >웹 프론트엔드 >프런트엔드 Q&A >webpack 패키지를 볼 수 있는 파일은 무엇입니까?

webpack 패키지를 볼 수 있는 파일은 무엇입니까?

青灯夜游
青灯夜游원래의
2022-12-20 19:44:122539검색

vue에서 webpack은 js, css, picture, json 및 기타 파일을 브라우저 사용에 적합한 형식으로 패키징할 수 있습니다. webpack에서는 js, css, picture, json 및 기타 파일 형식을 모듈로 사용할 수 있습니다. webpack에 포함된 다양한 모듈 리소스를 하나 이상의 패키지로 패키징하여 병합할 수 있으며 패키징 과정에서 이미지 압축, scss를 css로 변환, ES6 구문을 ES5로 변환 등의 리소스 처리가 가능합니다. HTML 파일 형식으로 인식됩니다.

webpack 패키지를 볼 수 있는 파일은 무엇입니까?

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

1. webpack이란 무엇인가요? webpack 공식 웹사이트에서 제공하는 정의는

기본적으로 webpack은 최신 JavaScript 애플리케이션을 위한 정적 모듈 번들러입니다. webpack은 애플리케이션을 처리할 때 애플리케이션에 필요한 모든 모듈을 포함하는 종속성 그래프를 반복적으로 구축한 다음 이러한 모든 모듈을 하나 이상의 번들로 패키징합니다.

위 그림과 같이: 가운데 파란색 블록은 webpack입니다. 왼쪽의 다양한 파일을 오른쪽의 HTML로 구문 분석할 수 있는 파일로 패키징합니다. 정적 패키지 모듈입니다. webpack 패키지를 볼 수 있는 파일은 무엇입니까?

여기에는

Packaging 및 Module

  • 1. 모듈이란 무엇입니까?

    모듈화에 대한 많은 사양, commonJs 사양, AMD 사양, CMD 사양이 있습니다. , ES6 사양 잠깐만요 ES6 이전에는 모듈 개발을 하려면 다른 도구를 사용해야 하고, 개발이 완료된 후에는 다양한 종속성을 처리하고 이를 통합하고 패키징해야 합니다.

    • webpack을 사용하면 가능합니다.
Webpack은 결국 js, css, 이미지, json 및 기타 파일을 브라우저 사용에 적합한 형식으로 패키징하는 데 도움이 됩니다.

2. 패키징이란?


웹팩의 다양한 모듈 리소스를 하나 이상의 패키지로 패키징하고 병합하는 것입니다. 이미지 압축, scss를 css로 변환, ES6 구문을 HTML에서 인식할 수 있는 기타 파일 형식으로 변환



2. webpack 패키징 도구 설치

webpack 패키징 도구 nodejs 환경에 의존합니다. npm을 사용하여 관리하는 다양한 패키지 npm은 node에서 다양한 패키지를 관리하는 데 사용됩니다. 다음으로 webpack 설치 방법을 살펴보겠습니다.

첫 번째 단계: nodejs를 설치하세요

공식 홈페이지 : https://nodejs.org/zh-cn/ 설치 후 nodejs 버전을 확인할 수 있습니다

node -v

현재 버전은 v12.16.2

기본적으로 설치되어 있습니다. nodejs를 사용하면 npm이 설치됩니다. 자동으로 실행되므로 npm을 별도로 설치할 필요가 없습니다2단계: webpack 설치

제가 사용하는 webpack 버전은 3.6.0입니다. 현재 사용하고 있는 vue 버전이 webpack 버전인 2이기 때문입니다. vue2는 3.6.0에 의존합니다

먼저 webpack이 머신에 설치되어 있는지 확인하고 명령을 사용하여 쿼리

 webpack --version

설치되어 있지 않으면 전역 webpack을 설치하세요

npm install webpack@3.6.0 -g

-g:表示的是global  全局的意思

webpack需要全局安装, 也需要局部安装. 

我们在终端或者IDE的terminal中使用webpack都是使用的全局的webpack,当我们在项目下使用package.json scripts webpacks, 这时候使用的是局部安装的.

那什么是全局webpack ,什么是本地webpack呢?

我们通常都会安装两个webpack, 一个是全局的一个是本地的.
全局的指的是电脑上安装的webpack包, 所有项目都可以使用
本地webpack是指当前项目的webpack包. 通常全局webpack版本会比较高, 而我的项目是老项目, 使用的是老版本的
webpack打包的, 这时如果使用全局的webpack打包就会报错, 所以, 需要安装一个和项目匹配的本地的webpack包

在这里, 我们先值安装全局的, 后面使用到本地的了, 再来安装本地的webpack.

三. webpack的基本使用

webpack下通常包含两个文件夹， 一个是src， 一个是dist

  • src下都会有一个main.js, 作为主js文件.
  • dist存放打包后的文件

webpack 패키지를 볼 수 있는 파일은 무엇입니까?

在webpack中,我们会使用两种类型的模板来定义: 分别是commonJs语法, 和ES6语法.

  • 在main.js引用mathUtil.js, 使用commonjs语法
  • 在main.js引用dataUtil.js, 使用ES6语法

 下面, 我们创建一个mathUtil.js 和 dataUtil.js两个js文件, 分别使用commonJs语法和ES6语法来创建.

  • - 在main.js引用mathUtil.js, 使用commonJs语法

  • - 在main.js引用dataUtil.js, 使用ES6语法

项目结构如下:

webpack 패키지를 볼 수 있는 파일은 무엇입니까?

1)  使用commonJs语法

第一步: 在mathUtil.js中export, 使用commonJs模块的写法 : module.exports ={add, sub}

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


function sub(num1, num2) {
    return num1 - num2
}

// 使用commonJs导出模块
module.exports={add, sub}

这里使用的是commonJs的语法导出方法

第二步: 在main.js中引用mathUtil.js中导出的变量 const {add, sub} = require("文件名")

const{add, sub} = require("./mathUtil.js")

console.log(add(10, 20))
console.log(sub(20, 10))

第三步: 使用webpack语句打包 : webpack ./src/main.js ./dist/bundle.js

首先进入到当前项目的根目录下, 然后输入命令

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

意思是: 将src目录下的main.js进行打包, 打包好的文件放在dist目录下, 并命名为bundle.js

webpack是自动打包工具, 所以, 我们只需要打包main.js, 他会自动检查main.js是否引用了其他文件. 如果有自动将其打包.

webpack 패키지를 볼 수 있는 파일은 무엇입니까?

打包以后, 会生成一个bundle.js.  

第四步: 在index.html中引入bundle.js文件

 76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    b2386ffb911b14667cb8f0f91ea547a7Title6e916e0f7d1e588d4f442bf645aedb2f
    4ad21d37d5bbd1ca1803208df3e7e6732cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

引入以后, 就是普通的html代码了, 我们可以向访问其他html一样,访问这个页面.

2) 使用ES6语法

第一步: 在dateUtil.js中导出, 使用ES6写法: export {var1, var2}

function priceUnit(price) {
    return "$" + price.toFixed(2)
}

export {priceUnit}

第二步: 在main.js中引用dateUtil.js中导出的变量 import {var1, var2} from "文件地址"

import {priceUnit} from "./dataUtil"console.log(priceUnit(25))

第三步: 使用webpack语句打包 :  webpack ./src/main.js ./dist/bundle.js

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

第四步: 在index中引用bundle.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./dist/bundle.js" ></script>
</head>
<body>

</body>
</html>

四. webpack配置文件

1. 如何使用webpack命令直接打包

刚刚我们打包的时候, 使用的是

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

那么, 如果在项目下, 可不可以直接使用webpack, 而不用每次都指定文件呢? 这样可以方便很多
当然是可以的, 我们需要在项目根目录下创建一个文件: webpack.config.js 这个名字是固定的

这个js就是要告诉我们哪里是webpack的入口, 哪个是webpack的出口

webpack.config.jsmodule.export={
    entry: &#39;./src/main.js&#39;,
    output: {
        path: &#39;/dist&#39;,
        filename: &#39;/bundle.js&#39;
    }
}
  • entry用来指定入口, 指定一个路径
  • output用来指定出口. 需要注意的是: 出口是一个对象, 由两部分组成: path和filename

然后我们在终端输入webpack打包. 打包会报错, 报错信息提示很明确: 

The provide value "./dist" is not an absolute path!

意思是说path应该是已经绝对路径. 也就是dist的绝对路径

思考: 我们能直接写一个绝对路径么? 比如: /Users/workspace/vue-study/webpack的配置/src/main.js 这样可以么?
这样肯定不太好, 因为我一旦将文件文在其他目录下, 这个地址就变了.

webpack可以帮助我们获取当前项目的绝对路径
我们const path = require("path")来获取相对目录. 可是当前目录下没有path的包,  path是node下东西, 需要通过npm init来初始化,

2. 初始化项目npm init

初始化命令

npm init

初始化完成以后, 就会创建一个叫package.json的文件

通常, 我们需要使用node的东西, 或者单独依赖node环境的话, 都会执行npm init, 生成package.json

3. 安装模块

如果package.json里面依赖其他模块, 需要使用npm install的安装一下, 然后就会在当前文件夹中安装一些东西

npm install
  • const path = require("path")这里的path就是node给我们生成的, 我们可以直接使用.

然后我们的output中path就可以这么写: 

path.resovle(__dirname, "dist")
  • _dirname是一个全局变量, resolve是一个函数, 可以将两个部分的内容拼在一块, 这样生成以后就是一个绝对路径

4. 使用npm run来启动项目

下面来看一下package.json

{
  "name": "meet",
  "version": "1.0.0",
  "description": "刚刚我们打包的时候, 使用的是webpack ./src/main.js ./dist/bundle.js 那么, 如果在项目下, 可不可以直接使用webpack, 而不用每次都指定文件呢? 可以的, 我们需要在项目根目录下创建一个文件, webpack.config.js 这个名字是固定的 这个js就是要告诉我们哪个是webpac的入口, 哪个是webpack的出口 通过module.export={     entry: &#39;./src/main.js&#39;,     output: {         path: &#39;/dist&#39;,         filename: &#39;/bundle.js&#39;     } } 来告诉我们入口和出口在哪里. entry用来指定入口, 指定一个路径 output用来指定出口. 出口是一个对象",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

通常我们启动项的时候会使用npm run serve启动项目, npm run build构建项目. 当执行这个命令的时候, 就会去package.json中的script标签中找build命令和serve命令.

执行npm run build让其执行webpack打包就可以在script中增加"build":"webpack"

{
  "name": "meet",
  "version": "1.0.0",
  "description": "刚刚我们打包的时候, 使用的是webpack ./src/main.js ./dist/bundle.js 那么, 如果在项目下, 可不可以直接使用webpack, 而不用每次都指定文件呢? 可以的, 我们需要在项目根目录下创建一个文件, webpack.config.js 这个名字是固定的 这个js就是要告诉我们哪个是webpac的入口, 哪个是webpack的出口 通过module.export={     entry: &#39;./src/main.js&#39;,     output: {         path: &#39;/dist&#39;,         filename: &#39;/bundle.js&#39;     } } 来告诉我们入口和出口在哪里. entry用来指定入口, 指定一个路径 output用来指定出口. 出口是一个对象",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"
}

然后就可以使用npm run webpack来打包了. 但是这里打包是全局打包. 因为我们之前只安装了一个全局的webpack.
但如果项目使用的版本和全局的不一样, 怎么办呢? 我们还可以使用局部的wenpack打包.

5. 全局webpack和局部webpack有什么区别呢?

我们通常都会安装两个webpack,

  • 一个是全局的
  • 一个是本地的.

全局的指的是电脑上安装的webpack包, 所有项目都可以使用
本地webpack是指当前项目的webpack包.

通常全局webpack版本会比较高, 而我的项目是老项目, 使用的是老版本的
webpack打包的, 这时如果使用全局的webpack打包就会报错, 所以, 需要安装一个和项目匹配的本地的webpack包

6. 安装本地webpack命令

npm install webpack@3.6.0 --save-dev
  • --save-dev: 这个参数的含义表示开发时依赖.

这里有两个概念:

  • 1. 开发时依赖
  • 2. 运行时依赖

对于打包来说, 我们只有在开发环境才会打包, 开发好以后要上线了会将其构建成html代码, 放到服务器上运行,
放到服务器以后, 就不需要打包了, 所以, 打包只需要在开发时使用, 是一个开发时依赖

本地webpack安装好以后, 会在package.json中看到devDependencies属性, 这就是开发时依赖

本地webpack安装好以后, 使用npm run build进行打包. 那是使用的全局webpack打包的还是本地webpack打包的呢?
本地安装好webpack以后会多出一个文件夹node_modules, 这里是默认在本地装的包, 其中有一个是webpack, 使用这里面的webpack
就表示使用的局部webpack打包. 而当我们在终端, 或者ide的terminal中执行webpack命令都是全局的


如果想要使用局部webpack打包, 可以使用npm run build. 这时就是去package.json的script脚本中找build命令了.

package.json中脚本命令执行的顺序:

  • 首先, 在本地的路径中找命令
  • 然后, 本地没有, 再去全局中找命令

在这里首先回去本地找有没有这个命令, 如果没有就去全局找

五.使用webpack打包css文件

webpack主要是用来打包的, 我们之前都是打包了js代码文件, 那如果还有css, 图片, 或者一些高级转换,如将ES6转换成ES5,将scss, less转成css, 将.vue文件转换成js文件怎么办呢?

webpack单独是不能完成转换的,需要借助loader.

1. 什么是绍loader?

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。

loader是webpack中一个非常核心的概念, loader有很多种, 不同的内容需要使用不同的loader来加载.

2. loader的使用

我们首先来创建一个css文件, 然后将css文件引入到项目中

第一步: 创建main.css文件

body{
    background-color: #085e7d;
}

第二步: 将main.css文件引入到main.js中

require("./css/main.css")

这是使用commonJs的写法引入的. 引入css以后, 不需要任何返回值, 所以, 我们可以不用写成  "let 变量名 = require(文件路径)"

第三步: 执行npm run build, 会报异常

webpack 패키지를 볼 수 있는 파일은 무엇입니까?                        

 这个异常的意思是, 缺少合适的loader. 因为我们引入了css, 但是还没有引入解析css的loader.

css需要两个loader :

  • 一个是css-loader
  • 另一个是style-loader

css-loader: 只负责加载css文件, style-loader: 负责将样式加载到Dom中

第四步: 通过npm安装loader

我们的目标是安装loader, 可以去官网找到对应的loader. css文件对应的loader.

官网地址: www.webpackjs.com

webpack 패키지를 볼 수 있는 파일은 무엇입니까?

 找到css-loader的用法

webpack 패키지를 볼 수 있는 파일은 무엇입니까?

安装命令

npm install --save-dev css-loader

第五步: 在webpack.config.js中的modules关键字下配置

　　module: {
        rules: [    
            {
                test: /\.css$/,
                use: [&#39;css-loader&#39;]
            }

        ]
    }

第六步: 安装style-loader

安装方法和css是一样的.  可以通过查询官网找到方法

安装style-loader命令

npm install --save-dev style-loader

然后在将style-loader放在css-loader的前面

module: {
    rules: [
        {
            test: /\.css$/,
            // css-loader: 只负责加载css文件
            // style-loader: 负责将样式加载到Dom中
            // 注意: 使用loader加载的时候, 是从右向左加载的. 所以, 先加载css-loader, 在加载style-loader
            use: [&#39;style-loader&#39;,&#39;css-loader&#39; ]
        }

    ]
}

为什么需要将style-loader放在前面呢? 

其实在解析css的过程中, 先用到的是css-loader, 然后使用到的是style-loader. 但是webpack.config.js在解析的时候, 是从右往左解析的. 

第七步: 打包

npm run build

打包以后报错: 

css (node:93638) UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function

遇到这个问题, 说明版本不合适, 我们使用的webpack是3.6.0的版本, 打包的时候, 我们需要重新制定一下css-loader和style-loader的版本号

打开package.json, 找到devDependencies

"devDependencies": {
    "css-loader": "^2.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^3.6.0",
  }

指定css-loader和style-loader的版本号分别是2.1.1和2.0.0

再次打包, 成功!

六. webpack打包less文件

 其实我们知道如何打包css文件了, 那么打包less文件方法是类似的 

第一步: 定义一个less文件

我们定义一个less文件, 起个名字common.less

@fontsize: 24px;
@fontcolor: #5112b8;

body {
  font-size: @fontsize;
  color: @fontcolor;
}

第二步: 将less文件import引入到main.js中

require("./css/special.less")

第三步: 安装less组件, 应该安装哪些组件呢? 可以看https://cn.vuejs.org/v2/guide/

查询官网: www.webpackjs.com

webpack 패키지를 볼 수 있는 파일은 무엇입니까?

安装组件命令

npm install --save-dev less-loader less

添加规则

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

注意: 顺序不能改变

第四步: 重新打包.

npm run build

七. webpack打包图片文件

下面来看看webapck是如何打包图片的

第一步: 在css中引入一个图片文件

比如: 我引入了一个背景图

webpack 패키지를 볼 수 있는 파일은 무엇입니까?

然后将图片作为背景引入到main.css中

body{
    background: url("../img/123.jpeg");
}

第二步: 将main.css文件通过import引入到main.js中

require("./css/main.less")

 我们知道webpack是自动打包工具, 在打包main.js的时候, 他会看里面都引入了哪些内容. 他发现引入了main.css, 就是去自动加载并解析css对应的模块. 在css中引入了图片, 就会去自动加载并解析图片对应的模块. 

第三步: 安装解析图片的组件

查询官网: www.webpackjs.com

我们看到background是通过url引入的, 首先需要url-loader模块. 

安装组件命令

npm install --save-dev url-loader

添加规则

{
    test: /\.(png|jpg|gif|jpeg)$/,
    use: [ {        loader: &#39;url-loader&#39;,
        options: {
            limit: 8000,
        }
    }]
}

我们发现这次引入的时候有一个options参数, 这个参数限制了图片的大小. 

注意: 

  • 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式. --- 不需要文件, 因为他是一个base64字符串
  • 当加载的图片, 大于limit是, 需要使用file-loader模块来加载. --- 当文件来处理, 就需要打包成文件, 需要file-loader

当以文件的形式加载的时候, 需要指定一个打包路径. 否则加载的文件目录是根目录, 结果会找不到文件, 因为我们的文件最终打包到dist下面了.

module.exports={
    // 入口
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, &#39;dist&#39;),
        filename: "bundle.js",        publicPath:"dist/"
    }
...
}

我们可以在output位置增加publicPath:"dist/" 以后, 所有的路径类的文件在打包编译的时候, 都会打包到这个路径下面

八. webpack打包--将ES6打包成ES5 

 为什么需要将es6打包成es5呢? 因为上述方式的webpack打包后, 并没有将ES6的语法转换成ES5的, 比如:

webpack 패키지를 볼 수 있는 파일은 무엇입니까?

 这会有什么问题呢?

有些浏览器可能不认识. 因为不是所有的浏览器都兼容ES6, 但基本所有的浏览器都兼容ES5的语法. 因此我们需要将ES6的语法转换成ES5的语法

 方法和上面是一样的.

 第一步: 安装组件

打包ES6到ES5需要的组件是bebal

查询官网需要安装哪些组件: www.webpackjs.com

webpack 패키지를 볼 수 있는 파일은 무엇입니까?

 安装命令:

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

我们这里安装的是babel-loader的7的版本. babel-preset的版本是es2015

 第二步: 配置babel-loader组件

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: &#39;babel-loader&#39;,
        options: {
          presets: [&#39;es2015&#39;]
        }
      }
    }
  ]
}

这个配置里面指定了exclude, 排除哪些目录: 这里排除了node_modules目录, 因为这个目录下的文件我们不需要打包. 是node编译需要的内容. 

presets属性,用来指定将es6转换成es5需要的版本. 我们这里直接填es2015就可以了.

第三步: 打包

npm run build

这次在去看bundle.js文件, 里面就没有es6的语法了

【相关推荐：vuejs视频教程、web前端开发】

위 내용은 webpack 패키지를 볼 수 있는 파일은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Vue 템플릿 사전 컴파일이란 무엇입니까?다음 기사：Vue 템플릿 사전 컴파일이란 무엇입니까?

관련 기사

더보기