webpack学习

最新推荐文章于 2024-09-29 17:43:11 发布

一个想做架构师的前端开发学生

最新推荐文章于 2024-09-29 17:43:11 发布

阅读量154

点赞数

分类专栏： webpack 文章标签： webpack 前端

本文链接：https://blog.csdn.net/m_ik_z/article/details/120182184

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

webpack

认识 webpack

什么是 webpack？

从本质上讲，webpack 是一个现代的 JavaScript 应用的静态模块打包工具。
- 其中可以抽出两个关键词：模块和打包。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6EOQ6ktO-1631088042224)(D:\笔记\image\webpack.png)]

模块

前端模块化：
- 见 Vue 组件笔记前端模块化
- 在 webpack 中支持所有前端模块化的方案：AMD、CMD、CommonJS、ES6。
- 在 ES6 以前，我们想要进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。
- 并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。
- 而 webpack 其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。
- 而且不仅仅是 JavaScript 文件，CSS、图片、json 文件等等在 webpack 中都可以被当作模块来使用。
- 这就是 webpack 中模块化的概念。
打包
- 理解了 webpack 可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就非常好理解了。
- 就是将 webpack 中的各种资源模块进行打包合并成一个或多个包（Bundle）。
- 并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将 scss 转成 css ，将 ES6 语法转成 ES5 语法，将 TypeScript 转成 JavaScript 等等操作。
- 但是打包的操作 grunt/gulp 也可以完成，他们有什么不同呢？

和 grunt/gulp 的对比

grunt/gulp 的核心是Task。
- 我们可以配置一系列的 task ，并且定义 task 要处理的事务（例如ES6、ts转化，图片压缩，scss 转成 css ）。
- 之后让 grunt/gulp 来依次执行这些 task ，而且让整个流程自动化。
- 所以 grunt/gulp 也被称为前端自动化任务管理工具。

看一下 gulp 的 task。

const gulp = require('gulp')
const babel = require('gulp-babel')

gulp.task('js',() =>
	gulp.src('src/*.js')
		.pipe(babel({
    		presets:['es2015']
		}))
		.pipe(gulp.dest(dist))
)

上面的 task 就是将 src 下面的所有 js 文件转成 ES5 的语法。
并且最终输出到 dist 文件夹中。

什么时候用 grunt/gulp 呢？
- 如果工程模块依赖非常简单，甚至是没有用到模块化的概念。
- 只需要进行简单的合并、压缩、就使用 grunt/gulp 即可。
- 但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用强大的 webpack 了。
所以，grunt/gulp 和 webpack 有什么不同呢？
- grunt/gulp 更加强调的是前端流程的自动化，模块化并不是它的核心。
- webpack 更加强调模块化开发管理。而文件压缩合并、预处理等功能，是它附带的功能。

webpack 的安装

webpack 为了可以正常运行，必须依赖于 node 环境。
全局安装 webpack （因为 Vue CLI2 依赖3.6.0，所以指定版本为3.6.0）。
```
npm install webpack@3.6.0 -g
```
局部安装 webpack（后续才需要）
- –save-dev`是开发时依赖，项目打包后不需要继续使用的。
```
cd 对应目录
npm install webpack@3.6.0 --save-dev
```
为什么全局安装后，还需要局部安装呢？
- 在终端直接执行 webpack 命令，使用的全局安装的 webpack。
- 当在 package.json 中定义了 script 时，其中包含了 webpack 命令，那么使用的就是局部 webpack。

局部安装 webpack

目前我们使用的是全局的 webpack 。
- 因为一个项目往往依赖特定的 webpack 版本，全局的版本可能和这个项目的 webpack 不一致，导致打包出现问题。
- 所以通常一个项目，都有自己局部的 webpack 。
安装步骤：
- 第一步：项目中需要安装包自己局部的 webpack。
  - 以 webpack 3.6.0 为例。
```
npm install webpack@3.6.0 --save-dev
```
  - Vue CLI3 中已经升级到 webpack4 ，但是它将配置文件隐藏了起来，所以查看起来不方便。
- 第二步，通过 node_modules/.bin/webpack 启动 webpack 打包。
```
node_modules/.bin/webpack
```

package.json 中定义启动

每一次都敲那么长的代码不方便。
- 我们可以在 package.json 的 scripts 中定义自己的执行脚本。
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AuRjBbJw-1631088042226)(D:\笔记\image\webpack执行脚本.png)]
package.json 中的 script 的脚本在执行时，会按照一定的顺序寻找命令对应的位置。
- 首先，会寻找本地的 node_modules/.bin 路径中对应的命令。
- 如果没有找到，会去全局的环境变量中寻找。
- 如何执行设定的 build 指令呢？
```
npm run build
```

webpack 的起步

准备工作

我们创建如下文件和文件夹：
文件和文件夹解析：
- dist 文件夹：用于存放之后打包的文件。
- src 文件夹：用于存放我们写的源文件。
  - main.js ：项目的入口文件。具体内容查看下面详情。
```
function add(num1,num2) {
    return num1 + num2
}

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

module.exports = {
    add,
    mul
}
```
  - mathUtils.js ：定义了一些数学工具函数，可以在其他地方引用，并且使用。具体内容查看下面的详情。
```
const math = requre('./mathUtils')

console.log('hello webpack')	// 控制台输出 hello webpack
console.log(math.add(10,20))	// 控制台输出 30
console.log(math.mul(10,20))	// 控制台输出 200
```
- index.html ：浏览器打开展示的首页HTNL。
- package.json ：通过 npm init 生成的，npm 包管理的文件（暂时没有用上，后面才会用上）。

js文件的打包

现在的 js 文件中使用了模块化的方式进行开发，他们不可以直接使用。
- 因为如果直接在 index.html 引入这两个 js 文件，浏览器并不识别其中的模块化代码。
- 另外，在真实项目中当有许多这样的 js 文件时，一个个引用非常麻烦，并且后期非常不方便管理。
可以使用 webpack 工具，对多个 js 文件进行打包。
- webpack 就是一个模块化的打包工具，所以它支持代码中写模块化，可以对模块化的代码进行处理。
- 如果在处理完所有模块的关系后，将多个 js 打包到一个 js 文件中，引入时，就变得非常方便了。
使用 webpack 的指令即可完成打包：
```
webpack src/main.js dist/bundle.js
```

使用打包后的文件

打包后会在 dist 文件夹下，生成一个 bundle.js 的文件。
- bundle.js 文件是 webpack 处理了项目直接文件依赖后生成的一个 js 文件，只需要将这个 js 文件在 index.html 中引入即可。
```
<script src="./dist/bundle.js"></script>
```

webpack 的配置

入口和出口

如果每次使用 webpack 都需要写上入口和出口作为参数就非常麻烦。

这时可以创建一个 webpack.config.js 文件来解决。

const path = require('path')

module.exports = {
    // 入口：可以是字符串/数组/对象，这里我们入口只有一个，所以写一个字符串即可。
    entry: './src/main.js'
    // 出口：通常是一个对象，里面至少包含两个重要属性，path 和 filename
    output: {
    	path: path.resolve(__dirname,'dist')
        filename: 'bundle.js'
	}
}

loader 的使用

什么是 loader？

loader 是 webpack 中一个非常核心的概念。
webpack 用来做什么呢？
- 在之前的实例中，主要用 webpack 来处理 js 代码，并且 webpack 会自动处理 js 之间相关的依赖。
- 但是，在开发中不仅仅有基本的 js 代码处理，也需要加载 css、图片，也包括一些高级的将 ES6 转成 ES5 代码，将 TypeScript 转成 ES5 代码，将 sass、less转成 css ，将 .jax、.vue文件转成 js 文件。
- 对于webpack 本身的能力来说，对于这些转化是不支持的。
- 给 webpack 扩展对应的 loader 就可以了。
loader 使用过程：
- 步骤一：通过 npm 安装需要使用的 loader。
- 步骤二：在 webpack .config.js 中的 modules 关键字下进行配置。
大部分 loader 我们都可以在 webpack 的官网中找到，并且学习对应的用法。

CSS 文件处理 - 准备工作

项目开发过程中，必然需要添加很多样式，而样式往往写到一个单独的文件中。
- 在 src 目录中，创建一个 css 文件，其中创建一个 normal.css 文件。
- 也可以重新组织文件的目录结构，将零散的 js 文件放在一个 js 文件中。
normal.css 中的代码非常简单，就是将 body 设置为 red 。
但是，这时的 normal.css 中的样式会生效吗？
- 当然不会，因为没有引入。
- webpack 也不可能找到他，因为只有一个入口，webpack 会从入口开始查找其他依赖的文件。

在入口文件中引用：

const math = require('./js/mathUtils')

console.log('hello webpack')
console.log(math.add(10,20))
console.log(math.mul(10,20))

// 必须在这里引用一次 css 文件
require('./css/normal.css')

css-loader 和 style-loader

css-loader 只负责加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码。
style-loader 负责将模块导出的内容作为样式并添加到 DOM 中。
使用多个 loader 时，是从右向左使用的。

下载安装 css-loader 和 style-loader

npm install --save-dev style-loader

less-loder

less 文件处理-准备工作

如果希望在项目中使用 less、scss、stylus来写样式，webpack 也可以处理。

以 less 为例：

先在 css 文件夹中创建一个 less 文件。

安装 less-loader：

npm install --save-dev less-loader less

配置：

// webpack.config.js
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
            }]
        }]
    }
};

less 文件处理——less-loder

在安装 less-loder 的时候，还安装了 less ，因为 webpack 会使用 less 对 less 文件进行编译。
其次，修改对应的配置文件。
- 添加一个 rules 选项，用于处理 .less 文件。

图片加载

url-loder

安装
```
npm install --save-dev url-loder
```
当加载的图片，小于 limit 时，会将图片编译成 base64 字符串形式。
当加载的图片，大于 limit 时，需要使用 file-loder 模块进行加载。
- 安装
```
npm install --save-dev file-loder
```
- 再次打包，就会发现 dist 文件夹下多了一个图片文件。

图片文件处理 - 修改文件名称

在打包完成以后，webpack 自动生成了一个非常长的名字。
- 这是一个32位 hash 值，目的是防止名字重复。
- 但是真实开发中，可能对打包的图片名字有一定的要求。
- 比如将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复。
```
options:{
  limit:8192,
  name:'img/[name].[hash:8].[ext]'
}
```
所以，可以在 option 中添加如上如下选项。
```
// 出口：通常是一个对象，里面至少包含两个重要属性，path 和 filename
output:{
  path: path.resolve(__dirname,'dist'),	// 注意：path 通常是一个绝对路径。
  filename: 'bundle.js',
  publicPath: 'dist/'
}
```
- img：文件要打包到的文件夹。
- name：获取图片原来的名字，放在该位置。
- hash:8 ：为了防止图片名称冲突，依然使用 hash ，但是我们只保留 8 位。
- ext：使用图片原来的扩展名。
但是，我们发现图片并没有显示出来，这是因为图片使用的路径不正确。
- 默认情况下，webpack 会将生成的路径直接返回给使用者。
- 但是，我们整个程序是打包在 dist 文件夹下的，所以我们需要在路径下再添加一个dist/

ES6 语法处理

如果仔细阅读 webpack 打包的 js 文件，发现写的 ES6 语法并没有转成 ES5 ，那么就意味着可能一些对 ES6 还不支持的浏览器没有办法很好的运行我们的代码。
如果希望将 ES6 的语法转成 ES5 ，那么就需要使用 babel。
- 而在 webpack 中，我们直接使用 babel 对应的 loder 就可以了。
```
npm install --save-dev babel-loder@7 babel-core babel-preset-es2015
```

配置 webpack.config.js 文件。

{
  test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['es2015']
    }
  }
}

重新打包，查看 bundle.js 文件，发现其中的内容变成了 ES5 的语法。

webpack 中配置 Vue

引入 Vue.js

后续项目中，会使用 Vue.js 进行开发，而且会以特殊的文件来组织 vue 的组件。
现在希望在项目中使用 Vue.js ，那么必然需要对其有依赖，所以需要先进行安装。
- 因为后续是在实际项目中也会使用 Vue 的，所以并不是开发时依赖。
```
npm install vue --save
```
最后就可以按照之前学习的方式来使用 Vue 了。

打包项目 - 错误信息

Vue 在打包之后会生成两个版本：
- runtime-only：代码中，不可以有任何的 template 。
- runtime-compiler：代码中，可以有 template ，因为有 compiler 可以用于编译 template 。
修改完成后，重新打包，运行程序：
- 打包过程没有任何错误（因为只是多打包了一个 vue 的 js 文件而已）。
- 但是运行程序，没有出现想要的效果，而且浏览器中有报错。
- 这个错误说的是当前使用的是 runtime-only 版本的 Vue 。

解决办法：修改 webpack 的配置，添加如下内容就行：

resolve: {
  // alias: 别名
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
}

el 和 template 区别（一）

正常运行之后，我们来考虑另外一个问题：
- 如果希望将 data 中的数据显示在界面中，就必须是修改 index.html 。
- 如果后面自定义了组件，也必须修改 index.html 来使用组件。
- 但是 html 模板在之后的开发中，并不想手动的来频繁修改，是否可以做到呢？
定义 template 属性：
- 在 Vue 实例中定义了 el 属性，用于和 index.html 中的 #app 进行绑定，让 Vue 实例之后可以管理它其中的内容。
- 这里可以将 div 元素中的 {{message}} 内容删掉，只保留一个基本的 id 为 div 的元素。
- 但是如果依然希望在其中显示 {{message}} 的内容，应该怎么处理呢？
- 我们可以再定义一个 template 属性，代码如下：
```
new Vue({
  el: '#app',
  template: '<div id="app">{{message}}</div>',
  data:{
    message: '你好呀！'
  }
})
```

el 和 template 区别（二）

重新打包运行程序，显示一样的结果和 HTML 代码结构。
el 和 template 模板的关系：
- el 用于指定 Vue 要管理的 DOM ，可以帮助解析其中的指令、事件监听等等。
- 如果在 Vue 实例中同时指定了 template ，那么 template 模板的内容会替换掉挂载的对应 el 模板。
这样做的好处是：不需要在开发中再次操作 index.html ，只需要在 template 中写入对应的标签即可。
但是书写 template 模板非常麻烦，所以会将 template 模板中的内容进行抽离，分成 template 、 script 、 style 三部分进行书写，结构变得非常清晰。

Vue 组件化开发引入

在 Vue 开发过程中，都会采用组件化开发的思想。

那么，怎么做才能采用组件化的形式进行开发呢？

查看下面的代码：

const app = {
  template: '<h2>{{name}}</h2>',
  data() {
    return {
      name: '我是app组件'
    }
  }
}

new Vue({
  el: '#app',
  template: `
		<div id="app">
			{{message}}
			<App/>
		</div>
	`,
  data: {
  	message: 'codewhy'
	},
  components: {
    App
  }
})

也可以将上面的代码抽取到一个 js 文件中，并且导出。

.Vue 文件封装处理

一个组件以一个 js 对象的形式进行组织和使用的时候是非常不方便的。
- 一方面编写 template 模块非常的麻烦。
- 另一方面如果有相同的样式的话，不清楚写在哪里合适。
可以使用一种全新的方式来组织一个 Vue 文件。
但是这个文件可以被正确的加载吗？
- 必然是不可以的，这种特殊的文件以及特殊的格式，必须使用合适的 loader 帮我们处理。
- vue-loder 和 vue-template-compiler 。

安装 vue-loder 和 vue-template-compiler 。

npm install vue-loder vue-template-compiler --save-dev

修改 webpack.config.js 的配置文件。

{
  test: /\.vue$/,
  use: ['vue-loader']
}

plugin 的使用

认识 plugin

plugin 是什么？
- plugin 是插件的意思，通常是对于某个现有的架构进行扩展。
- webpack 中的插件，就是对 webpack 现有功能的各种扩展，比如打包优化，文件压缩等等。
loader 和 plugin 区别：
- loader 主要用于转换某些类型的模块，它是一个转换器。
- plugin 是插件，它是对 webpack 本身的扩展，是一个扩展器。
plugin 的使用过程：
- 步骤一：通过 npm 安装需要使用的 plugins（某些 webpack 已经内置的插件不需要安装）。
- 步骤二：在 webpack.config.js 中的 plugins 中配置插件。
所有的插件都能让 webpack 变得更好用。

添加版权的 Plugin

BannerPlugin：为打包的文件添加版权声明，属于 webpack 自带的插件。

按照下面的方式来修改 webpack.config.js 文件：

const path = require('path')
const webpack = require('webpack')

module.exports = {
  ...
  plugins:[
    new webpack.BannerPlugin('最终解释权归XXX所有')
  ]
}

重新打包程序，查看 bundle.js 文件的头部，看到如下信息：

/*! 最终解释权归XXX所有 */
/******/ (function(modules) { // webpackBootstrap

打包 html 的 plugin

目前，index.html 是存放在根目录下的。
- 但是在真实发布项目的时候，发布的是 dist 文件夹里面的内容，但是 dist 文件夹里面如果没有 index.html 文件，那么打包的 js 等文件也就没有意义了。
- 所以，在打包的时候也需要将 index.html 文件打包到 dist 文件夹中，这个时候就可以使用 HtmlWebpackPlugin 插件。
HtmlWebpackPlugins 插件会帮我们做：
- 自动生成一个 index.html 文件（可以指定模板来生成）。
- 将打包的 js 文件，自动通过 script 标签插入到 body 中。

安装 HtmlWebpackPlugins 插件：

npm install HtmlWebpackPlugin --save-dev

使用插件，修改 webpack.config.js 文件中 plugins 部分的内容如下：
```
plugins:[
  new webpack.BannerPlugin('最终解释权归XXX所有'),
  new htmlWebpackPlugin({
    template: 'index.html'
  })
]
```
- 这里的 template 表示根据什么模板来生成 index.html 。
- 另外，需要在删除之前在 output 中添加的 publicPath 属性。
- 否则插入的 script 标签中的 src 可能会有问题。

js 压缩的 Plugin

在项目发布以前，需要对 js 等文件进行压缩处理。

这里的 js 指的是打包好的 js 。
使用一个第三方插件 uglifyjs-webpack-plugin ，并且版本号指定1.1.1，和 CLI2 保持一致。
```
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
```

修改 webpack.config.js 文件，使用插件：

const path = require('path')
const webpack = require('webpack')
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  ...
  plugins:[
    new webpack.BannerPlugin('最终解释权归XXX所有'),
    new uglifyJsPlugin()
  ]
}

查看打包后的 bundle.js 文件，是已经被压缩过了。

搭建本地服务器

webpack 提供了一个可选的本地开发服务器，这个本地服务器基于 node.js 搭建，内部使用 express 框架，可以实现浏览器自动刷新显示修改后的结果。
不过它是一个单独的模块，在 webpack 中使用之前需要先安装它。
```
npm install --save-dev webpack-dev-server@2.9.1
```
devserver 也是作为 webpack 中的一个选项，选项本身可以设置如下属性：
- contentBase：为哪一个文件夹提供本地服务，默认是根文件，我们这里要填写./dist 。
- port：端口号。
- inline：页面实时刷新。
- historyApiFallback：在 SPA 页面中，依赖 HTML5 的 history 模式。

webpack.config.js 文件配置修改如下：

devServer: {
  contentBase: './dist',
  inline: true
}

可以在配置另外一个 script：
- –open 参数表示直接打开浏览器。
```
"dev": "webpack-dev-server --open"
```

webpack 配置分离

将公共的 script 代码放在一个 js 文件里面，不同的放在另外的 js 文件中。

使用 webpack-merge 将所有的配置文件合并在一起。

// 用法

webpackMerge(baseConfig,{
  ...	// 需要合并的配置
})

直接执行指令会报错，这是需要在 package.json 文件中指定一下需要执行的配置文件。

"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"

一定要注意各个配置文件的路径是否正确。

一个想做架构师的前端开发学生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录