第一节：webpack打包、压缩及兼容性处理

最新推荐文章于 2024-07-19 09:55:37 发布

AhuntSun

最新推荐文章于 2024-07-19 09:55:37 发布

阅读量127

点赞数 1

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/qq_43425487/article/details/133004960

版权

一.前言

当我们使用vue-cli3创建项目时，会自动生成相应的webpack配置，不过明白webpack的原理和基本设置方法对我们局部修改某些webpack配置还是很有必要的；

二.为什么需要构建工具？

转换ES6语法；
转换JSX；
CSS前缀补全/预处理器；
压缩混淆；
图片压缩；

官方文档

三.Webpack五个核心概念

1.入口(Entry)

入口(Entry)指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图；

2.出口(Output)

输出(Output)指示Webpack打包后的资源bundles输出到哪里去，以及如何命名；

3.Loader

Loader让Webpack能够去处理那些非JavaScript文件(Webpack自身只理解JavaScript)

4.插件(Plugins)

插件(Plugins)可以用于执行范围更广的任务，插件的作用范围包括，从打包优化和压缩，一直到重新定义环境中的变量等；

5.模式(Mode)

通过设置 mode 参数为 development 或 production 之中的一个，来启用相应模式下 webpack 内置的优化；

module.exports = {
  mode: 'production'
};

development模式：代码本地调试和运行的环境；
production模式：代码优化上线运行的环境；

四.源码仓库

webpack系列中使用到的演示实例源码已上传至该仓库：

webpack-demo

示例：

创建下图所示的文件目录：

其中src表示源文件目录，存储着webpack的入口起点文件，比如index.js；build用于webpack打包处理之后输出的目录，其余文件可通过执行：

可通过下列指令创建一个演示实例：

npm init//生成package.json
webpack_test //文件夹名字

一路回车取默认值生成：

随后执行以下命令全局安装webpack，其中的-g参数表示全局安装，即使已经安装过了，也没关系。该指令会覆盖原来的安装并进行版本更新。

五.npm i 和 npm install 的区别

i为install的缩写；

实际使用的区别点主要如下(windows下)：

用npm i安装的模块无法用npm uninstall删除，用npm uninstall i才卸载掉
npm i会帮助检测与当前node版本最匹配的npm包版本号，并匹配出来相互依赖的npm包应该提升的版本号
部分npm包在当前node版本下无法使用，必须使用建议版本
安装报错时intall肯定会出现npm-debug.log 文件，npm i不一定

npm i webpack webpack-cli -g

然后在本地安装，参数-D为--save-dev的缩写，表示它会将webpack添加到package.json中的开发依赖中：

npm i webpack webpack-cli -D

webpack中下载的所有东西都属于开发依赖，不属于生产依赖，所以都使用-D。

index.js文件内容：

/*
  index.js:webpack入口起点文件

  1.运行指令：
    开发环境指令：webpack ./src/index.js -o ./build/built.js --mode=development
    翻译：webpack会以./src/index.js为入口环境开始打包，打包后输出 ./build/built.js；整体打包环境是开发环境；代码不会被压缩，可以看清楚逻辑；
    
    生产环境指令：webpack ./src/index.js -o ./build/built.js --mode=production
    翻译：webpack会以./src/index.js为入口环境开始打包，打包后输出 ./build/built.js；整体打包环境是生产环境；代码会被压缩，无法看清代码逻辑；
*/

function add(x, y){
  return x + y
}

console.log(add(1, 2));

先进入02-webpack初体验目录，然后打包文件

开发环境指令：

输入下列开发环境指令打包文件：

webpack ./src/index.js -o ./build/built.js --mode=development

输出结果：

其中的Hash值代表打包的结果，每次打包都会生成一个唯一的哈希值，唯一地ID；
其余的有版本，打包时间，资源Asset，打包后的文件built.js的大小等；

此时build目录下会多出一个built.js文件

生产环境指令

输入下列生产环境指令打包文件：

webpack ./src/index.js -o ./build/built.js --mode=production

运行结果：

查看生成的build目录下的built.js文件，发现代码进行了压缩：

这个代码是可执行的：

每次src文件夹中的入口文件index.js引入了新依赖之后，都要重新进行打包，才能看到最新的结果；

也就是说只要指定了入口文件index.js，就可以在index.js中通过import引入很多依赖文件，这样

webpack在打包入口文件index.js的时候就会根据其中引入关系，一起打包index.js的依赖文件；

那么引入其他文件呢？

比如在index.js中引入css文件的时候：

会出现打包错误，打包出来的built.js中的该部分会丢出一个错误：

得出结论：

webpack能处理js/json资源，不能处理css/img等资源；
生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化；
生产环境(production)比开发环境(development)多了一个压缩js代码；

六.打包样式资源

虽然webpack不能直接打包css文件，但是可以借助于各种各样的Loader将webpack不能识别的文件转换成它能识别的格式；

需要在根目录的package.json.js文件中进行配置：

整体配置为：

const { resolve } = require('path')

module.exports= {
  entry: './src/index.js',
   //输出:这是一个对象，里面有两个东西。filename表示输出的文件名,path表示输出的路径,写路径的时候通常会写一个绝对路径，避免出错。绝对路径会引入一个nodejs的path模块
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules:[ 
      {
      //详细loader配置
        //匹配哪些文件
        test: /\.css$/,
        //处理这些文件
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    //详细plugins配置
  ],
  mode: 'development',
  //mode: 'production'
 }

首先， webpack.json.js为webpack的配置文件。作用为：指示webpack干哪些活(当运行webpack指令时，要加载哪些配置)；

所有构建工具都是基于node.js平台运行的，模块化默认采用commonjs。可以看到commonjs会导出一个对象，在该对象中写webpack的配置：

1.入口起点

entry: './src/index.js'

表示打包的入口文件为src目录下的index.js文件；

2.输出

output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
   }

这是一个对象，其中：

filename表示输出的文件名；
path表示输出的路径；
写路径的时候为了避免出错，通常会写一个绝对路径。需要引入一个nodejs的模块path模块：
```
const { resolve } = require('path')
```
其中的resolve是用来拼接绝对路径的方法，格式为：
```
path: resolve(__dirname, 'build')
```
传入两个参数：__dirname和当前的build目录；其中__dirname是nodejs的变量，它代表当前文件(指webpack.config.js)的目录的绝对路径：

该绝对路径就是03-打包样式资源，也就是说__dirname的值就是03-打包样式资源，拼接上build，再加上第一个参数filename指明的built.js一起表示，打包后输出到build目录下的built.js文件中；

3.Loader配置

module: {
  rules: {
  	//详细loader配置
  }
}

4.插件(`plugins`)

plugins: [
    //详细plugins配置
  ],

5.模式

mode: 'development',
  //mode: 'production'

开发模式development和生产模式production两种模式选一种，不能同时写；

6.打包样式资源

可以使用css-loader来翻译css文件：

module: {
    rules: [ 
        {
            //详细loader配置
            //使用正则表示式指定匹配哪些文件
            test: /\.css$/,//该正则表达式表明，匹配以css结尾的文件，\为转义符
            //通过test的正则表达式匹配了文件后，这里指定使用哪些loader进行处理
            use: [
                //需要使用两个loader
                //作用：创建style标签，将js中的样式资源插入进去，添加到head中生效
                'style-loader',
                //将css文件转换成一个commonjs模块并加载到js中，里面内容是样式字符串
                'css-loader'
            ]       
        }
    ]
}

注意：rules属性是一个数组，里面的每一个元素都为对象，每个对象匹配并处理一类文件。并且对象中的use属性也是一个数组，其中loader的执行顺序为：从右到左，从下到上依次执行。为了不用每次都安装同样的依赖文件包，可以在根目录执行下列指令安装这些包，因为子目录中找不到包会依次往根目录找：

npm init //生成package.json
npm i webpack webpack-cli -D //下载webpack包，-D是--save-dev的缩写，表示是开发时依赖
npm i css-loader style-loader -D //下载两个loader，都是开发时依赖

进入03-打包样式资源目录，执行webpack进行打包：

打开打包生成的built.js，可以看到index.css被成功打包了：

在build目录下新建index.html引入生成的打包文件built.js：

最低0.47元/天解锁文章

AhuntSun

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
第一节：webpack打包、压缩及兼容性处理

一.前言当我们使用vue-cli3创建项目时，会自动生成相应的webpack配置，不过明白webpack的原理和基本设置方法对我们局部修改某些webpack配置还是很有必要的；二.为什么需要构建工具？转换ES6语法；转换JSX；CSS前缀补全/预处理器；压缩混淆；图片压缩；官方文档三.Webpack五个核心概念1.入口(Entry)入口(Entry)指示webpack...
复制链接

扫一扫