01-webpack5安装与使用

等闲'

已于 2022-05-07 13:51:26 修改

阅读量2.8k

点赞数 7

分类专栏： vue 文章标签： vue.js webpack

于 2022-04-27 20:52:30 首次发布

本文链接：https://blog.csdn.net/dream_s_a/article/details/124409152

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

环境：windows10+VSCode（1.66.2）
安装版本
node：16.14.2
npm：8.5.0
webpack：5.72.0
webpack-cli：4.9.2

一、安装

1、node安装教程以及全局配置修改
（这里面按照操作到标题四完）
2.node安装配置淘宝镜像
3.本地安装webpack和webpack-cli
在VSCode终端中分别输入以下命令：

npm init -y  
npm install --save-dev webpack
npm install --save-dev webpack-cli

以上可简写为：

npm init -y  
npm install webpack webpack-cli --save-dev
//webpack-cli是webpack的一个命令行工具，是我们可以在命令行中调用 webpack

注意点：

①这里因为我的nodejs文件夹权限是管理员才能操作，所以需要以管理身份打开VSCode，否则在VSCode终端里进行安装时会出错。
补充：我又发现以管理身份打开VSCode后，不能用Chrome打开网页，而且也不能打开第二个VSCode，暂时没有找到以管理员身份在VSCode中打开Chrome解决方案。我这里都是直接以管理员身份打开cmd，进入到项目文件夹操作的。
②为什么要使用npm init初始化项目？
在node开发中使用npm init会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。
使用npm init初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发送给对方，对方在接受到你的项目之后再执行npm install就可以将项目依赖全部下载到项目里。
③使用 webpack 4+ 版本，还需要安装 CLI
④–save-dev 也可以简写为 -D

二、简单运行

1、安装完webpack和webpack-cli的目录：
在这里插入图片描述
2、创建index.html文件和src文件夹，src文件夹下再创建index.js和hello-world.js文件，如下:

3、先在hello-world.js文件中写入如下代码：
在这里插入图片描述
然后在index.js文件中写入如下代码：

4、把这两个文件打包成一个js文件
在终端中输入：

npx webpack

会自动生成一个dist文件夹，里面有一个main.js文件
5、在index.html中引入main.js
在这里插入图片描述
6、用浏览器打开，可以看到成功打印hello，world！

三、webpack介绍

1、webpack是什么？

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

为什么需要模块化？
项目中会有很多js文件，在很多人合作开发时，并不知道对方在各自开发的js文件中怎么对变量进行命名，如果对方使用了全局变量，就有可能因为变量名相同互相影响，出错时，排错会很困难。所以需要模块化，使变量只会在自己的模块中起作用，然后导入需要的信息，导出需要导出的信息。

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

打包：
将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

2、webpack 五个核心概念

2.1 Entry
入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图
2.2 Output
输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
2.3 Loader
Loader 让 webpack 能够去处理那些非 JavaScript 文件 (webpack 自身只理解 JavaScript)
2.4 Plugins
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

loader和plugin的区别：
loader主要用于转换某些类型的模块，是一个转换器；
plugin是插件，是对webpack本身的扩展，是一个扩展器。
2.5 Mode
在这里插入图片描述

四、webpack配置

在二、简单运行中使用 npx webpack，在默认情况下，入口文件为src/index.js，出口文件为dict/main.js ，当需要自定义入口出口时，就需要配置参数。
1、输入以下指令可以查看webpack各个参数

npx webpack --help

2、webpack.config.js
但是通过以上参数在命令行进行配置很不方便，所以webpack提供了一个配置文件webpack.config.js来让我们自定义文件；由于这个文件是在nodeJs里运行的，所以在里面定义webpack.config.js模块的时候，需要使用nodejs的commonJS模块。
①删除dist下的main.js文件
②在LearnWebpack下创建webpack.config.js文件，添加如下代码：

在这里插入图片描述

③在终端输入npx webpack 命令打包，运行发现打印成功

3、映射
使用本地的包打包需要一层一层找，如输入命令./node_moduls/.bin/webpack,很麻烦。所以我们可以在package.json的scripts中定义自己的执行脚本,做一个映射：
打开package.json——>在的scripts中的test下添加"build": “webpack”，然后npm run build 就可替代以上命令。
在这里插入图片描述
补充：
添加"build": "webpack"有两个好处：
①在终端中使用webpack命令是使用全局的包，当 webpack.config.js命名被修改很长时，输入npx xxx的命令就会变长，不方便，此时我们做一个映射，就可以直接使用npm run build命令；
②package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。优先去寻找本地的node_modules/.bin路径中对应的命令，如果没有找到，会去全局的环境变量中寻找。

五、loader

1、loader介绍

webpack本身的能力来说，对于这些转化是不支持的：将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。给webpack扩展对应的loader就可以啦。
loader使用过程：
步骤一：通过npm安装需要使用的loader
步骤二：在webpack.config.js中的modules关键字下进行配置
（大部分loader我们都可以在webpack的官网中找到，并学习对应的用法。）

2、css-loader的使用

①重新组织文件的目录结构，js文件都放到js文件夹中，css文件都放到css文件夹中，但是要注意入口文件index.js不要移动，就放在src下。
在这里插入图片描述
②在index.js文件中导入css

③安装：分别在终端中输入以下命令：

npm install --save-dev css-loader
npm install style-loader --save-dev

配置：然后在webpack.config.js添加如下代码：
在这里插入图片描述
④npm run build打包，运行，发现样式生效。

3、less-loader的使用

①在css文件夹中创建一个special.css文件并添加如下代码，然后在index.js中导入该样式，并添加一些代码：
在这里插入图片描述

②安装和配置less-loader
安装：在终端中输入如下命令：

npm install --save-dev less-loader less

配置：在webpack.config.js添加如下代码：
（该代码可像css-loader一样在数组里面直接写，也可以写成对象，可以在其中添加其他属性)
在这里插入图片描述
③输入npm run build 命令，打开浏览器运行成功

在这里插入图片描述

4、babel-loader的使用

webpack打包的js文件中的ES6语法并没有转成ES5，有些浏览器不支持ES6语法，而babel将ES6的语法转成ES5。
①安装：

npm install -D babel-loader @babel/core @babel/preset-env webpack

②配置：
在这里插入图片描述
③输入npm run build 打包后我们打开bundle.js文件中查看，可以看到ES6语法已经都转换为ES5.

六、资源模块

资源模块(asset module)是一种模块类型，它允许我们应用Webpack来打包其他资源文件（字体，图标等）而无需配置额外 loader。
在 webpack 5 之前，通常使用：
raw-loader 将文件导入为字符串
url-loader 将文件作为 data URI 内联到 bundle 中
file-loader 将文件发送到输出目录

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些loader：
①asset/resource 将文件发送到输出文件夹，并返回（相对）URL。即发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
②asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
③asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
④asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader和配置资源体积限制实现。

1、asset/resource

发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。即：所有匹配的文件都将被发送到输出目录，并且其路径将被注入到 bundle 中。

1.1、简单使用

①首先，我们在项目中加入两张图片：
一张较小的图片test01.jpg(小于13kb)，一张较大的图片test02.jpeg(大于13kb)
待会儿我们会针对这两张图片进行不同的处理
我们先考虑在css样式中引用图片的情况，所以我更改了normal.css中的样式：
在这里插入图片描述
②配置：在webpack.config.js添加如下代码：

③输入npm run build 命令，在dist文件夹下看到一个jpg文件，且在浏览器打开成功出现图片

1.2、自定义输出文件名-output.assetModuleFilename

默认情况下，asset/resource 模块以 [hash][ext][query] 文件名发送到输出目录。
①可以通过在 webpack.config.js 配置中设置 output.assetModuleFilename 来修改此模板字符串：
在这里插入图片描述
②npm run build 重新打包可以看到：

1.3、自定义输出文件名- generator

另一种自定义输出文件名的方式是generator，可以将某些资源发送到指定目录。使用此配置，所有 png、jpg、gif 文件都将被发送到输出目录中的 images 目录中。
Rule.generator.filename 与 output.assetModuleFilename 相同，并且仅适用于asset 和 asset/resource 模块类型。但Rule.generator.filename 优先级高于output.assetModuleFilename。
①在 webpack.config.js 配置中设置rules.generator.filename：
在这里插入图片描述
②npm run build 重新打包可以看到：

2、asset/inline

导出一个资源的 data URI。之前通过使用 url-loader 实现。即：所有匹配的文件都将作为 data URI 注入到 bundle 中。
①在 webpack.config.js 中配置：
在这里插入图片描述
②打包后可以看到dist文件夹下没有新增资源：

网页打开可以看到图片显示，而且图片是base64。

3、asset/source

导出资源的源代码。之前通过使用 raw-loader 实现。即：所有匹配的文件将原样注入到 bundle 中。

4、asset 通用资源类型

在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

在1、resource中提到，我们有test01(13kb<)和test02(>13kb)这两张图片。
①使用test01图片：
在这里插入图片描述

npm run build 打包后可以看到dist文件夹下没有新增资源，∵小于13kb∴转换为inline资源

②使用test02图片：

npm run build 打包后可以看到dist文件夹下的新增资源，∵大于13kb∴转换为resour资源

总结：webpack 按照默认条件，自动地在 resource 和 inline 之间进行选择：小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
通过在 webpack 配置的 module rule 层级中，可以设置 Rule.parser.dataUrlCondition.maxSize 选项修改此条件，如本案例。

七、webpack配置Vue2

1、安装

npm install vue@2.6.14
npm i vue-template-compiler@2.6.14 -D
npm i vue-loader@14 -D

vue-loader用来加载vue文件，vue-template-compiler用来编译vue，与css那里的相似。
2、测试
①在src下创建App.vue文件，并且添加以下代码：

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!',
    }
  },
}
</script>

<style>
.example {
  color: red;
}
</style>

②配置index.js文件
在这里插入图片描述
③配置index.html文件

④配置webpack.config.js文件

运行后可以在页面上看到：

八、plugin

webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。
plugin的使用过程：
步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二：在webpack.config.js中的plugins中配置插件。

1、HtmlWebpackPlugin

1.1、介绍
我们知道，在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。
所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件。
HtmlWebpackPlugin插件可以为我们做这些事情：
①自动生成一个index.html文件(可以指定模板来生成)
②将打包的js文件，自动通过script标签插入到body中
③修改title
1.2、使用
①安装：在终端中输入以下命令：

npm install --save-dev html-webpack-plugin

记得删除之前的bundle.js文件
②配置并使用：在webpack.config.js添加如下代码：
在这里插入图片描述
③删除index.html中的，npm run build打包后可以看到在dist文件夹中多了一个index.html,运行一下可以看到页面依然成功加载。

九、搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
（使用本地服务器后，打包的文件不会写入磁盘，是暂存在内存里的，所以也会比较快）
1.安装

npm install --save-dev webpack-dev-server@3.11.2

2.配置package.json
在这里插入图片描述
3.在webpack.config.js中的module.exports下添加以下代码：

4.输入命令npm run serve ,点击链接进入网页，在App.vue中修改内容，可以看到浏览器实时刷新

另外：
也能够通过module.exports.watch： true实现类似这样的效果，但是不推荐。
①所有源代码都会重新编译
②每次编译成功之后都需要进行文件读写（）
③不能实现局部刷新

十、webpack配置文件的分离

development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。在开发环境中，我们需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server。
而生产环境目标则转移至其他方面，关注点在于压缩 bundle、更轻量的 source map、资源优化等，通过这些优化方式改善加载时间。由于要遵循逻辑分离，通常建议为每个环境编写彼此独立的 webpack 配置。
1、安装 webpack-merge

npm install --save-dev webpack-merge

2、将webpack.config.js中已经成型的代码进行分离：
①
在这里插入图片描述
②将webpack.config.js中的代码分别复制到这三个文件里，开始删除和修改，最后得到：
webpack.common.js：
注意：
这里之前output.path拼接的dist修改为了’…/dist’，因为__dirname表示config文件当前所在的目录，我们这里需要返回上一级目录LearnWebpack。

const path = require('path')   //从node里面导入的包
const HtmlWebpackPlugin = require('html-webpack-plugin')

//在nodeJs里运行,需要使用nodejs的commonJS
module.exports = {
  entry: './src/index.js',
  output: {
    //path.resolve可以把两个路径拼接，node上下文中的全局变量dirname（保存当前这个文件夹所在路径）
    path: path.resolve(__dirname, '../dist'),      //  绝对路径！且要动态获取,指定打包后的文件放在哪
    filename: 'bundle.js',   //默认打包后的文件名为main.js
    clean: true,  //每次打包的时候清理dist文件夹
    assetModuleFilename: 'img/[name].[hash:8].[ext]' //优先级低于generator.filename
  },
  module: {
    rules: [
      //css,style-loader
      {
        //正则表达式
        test: /\.css$/,
        //css-loader只负责将css文件进行加载
        //style-loader负责将样式添加到Dom中
        //使用多个loader时，加载顺序是从右往左，所以如下顺序是这样的
        use: ['style-loader', 'css-loader']
      },
      //less-loader
      {
        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
        }]
      },
      // {
      //   test: /\.(png|jpg|gif)$/,
      //   type: 'asset/resource',
      //   // 优先级高于 assetModuleFilename
      //   generator: {
      //     filename: 'images/[name].[hash:8].[ext]'
      //   }
      // },
      // {
      //   test: /\.(png|jpg|gif)$/,
      //   type: 'asset/inline'
      // },
      {
        test: /\.(png|jpg|gif)$/,
        type: 'asset',
        //默认是以8kb为界限在resource和inline之间进行转换
        parser: {
          dataUrlCondition: {
            maxSize: 13 * 1024 // 13kb
          }
        }
      },
      //bable
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'test',   //修改默认产生的title名
      template: 'index.html' //指定文件作为模板输出
    })
  ]
}

webpack.dev.js

const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    contentBase: './dist', //为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
    inline: true           //页面实时刷新
    //port：端口号
  }
})

webpack.prod.js

const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')

module.exports = merge(common, {
  mode: 'production'
})

③scripts 重新指向到新配置。让 npm run serve使用 webpack.dev.js, 而让 npm run build使用 webpack.prod.js:
在这里插入图片描述
④输入npm run build打包后：

④输入npm run serve打包后：

这里dist为空，是因为跑在本地服务器时，打包后的文件是暂存在内存里的，没有读入物理磁盘，所以为空。