webpack配置与使用

webpack 打包工具

webpack 是什么

一个 Js 应用程序的静态模块打包工具

如何工作

将项目当成一个整体，通过给定的入口(entry)，从该入口文件找到项目中所有的依赖
经过模块依赖加载，分析，打包三个流程，最终打包成可以直接运行的一个或多个 bundle

安装

npm i webpack webpack-cli -D

无配置文件打包

在 package.json 中的 scripts 属性里添加”start”:”webpack index.js”
在项目的根目录中使用

npm start

打包成功后显示的信息

• hash：打包成功产生的唯一 hash 值
• version：webpack 的版本号
• time：打包耗时
• built at：打包时间
• Asset： 打包生成的静态文件
• Size： 静态文件的大小
• Chunks： 代码块
• Chunk Names： chunk 对应的名称

默认在项目根目录下生成一个 dist 文件夹，里面有一个 main.js 文件，该文件就是打包压缩后的文件

常用选项

• mode 指定打包的模式(development,production)
• config 指定一个 webpack 的配置文件
• watch 开启监听模式
• hot 开启模块热更新
• progress 显示打包进度

配置文件 webpack.config.js

四个核心概念

entry

表示入口文件，从某个文件开始查找直接或间接的依赖并打包

可以接收的参数：字符串，字符串数组，对象

entry:'path'
    以提供的文件为入口
entry:['path1','path2',...]
    多个文件为入口，最终打包成一个文件
entry:{
    chunName:'path1',
    chunName:'path2'
}
    多个文件入口，打包生成多个文件，文件名就是chunkName

output

指定打包生成文件的保存路径

3 个常用的属性

• path：指定 bundle 输出的存放路径(默认 dist)

  path.resolve(__dirname,'文件夹名称')

• filename：指定生成的 bundle 的名称(默认 main.js)
• publicPath：指定一个在浏览器中引用的 url

注：如果入口文件有多个，最终生成多个 bundles

• 如果没有设置 filename，则最终生成的 bundle 名就是对应的 chunkName
• 如果设置了 filename 具体的文件名，则报错，可以使用占位符来代替
  • [name]：对应的是 entry 设置的 key(chunkName)
  • [hash]：对应的是每次打包完成时，产生的唯一的 hash 值，可以指定长度 [hash:6]
  • [Chunkhash]：chunk 对应生成的 hash，根据 chunkName 生成的对应的 hash，只要 entry 中的入口没有变化，chunkhash 就不会变化
  • [contenthash]：把 css 样式从 js 中抽离出来，就可以使用 contenthash 来命名

loader(加载器)

webpack 将每一个文件当成一个模块，模块可以是任意的静态资源文件，但是 webpack 只认识 js，不认识其他类型的资源文件
loader 就是用来帮助 webpack 处理 js 以外的任意静态资源文件
处理不同类型的静态资源文件需要使用不同的 loader，例如：

• css-loader 让 webpack 认识 css 文件
• style-loader 将样式内联到页面中
• less-loader 认识 less 文件

loader 需要单独安装、配置

配置参数

• test: 使用正则匹配文件类型(后缀名)
• use: 使用哪个或哪些 loader

将 css 打包成一个单独的文件

mini-css-extract-plugin

css 的模块化

css 的模块化就是将 js 的模块化思想带入到 css 中
所有的类名都只作用于当前模块，这样就不担心在不同模块中具有相同的类名造成的覆盖问题

多页面配置

html-webpack-plugin

注：每 new 一个实例就会创建一个对应的 html 页面

webpack 的扩展配置

resolve：帮助 webpack 快速查找依赖，通过配置：

• extensions：后缀名，省略不写
• alies：别名，简化引用的路径

静态资源文件的处理

静态资源文件指前端中的图片，字体文件，音频视频等等，webpack 也会将这类文件当成模块来进行打包处理

file-loader 解决图片引用路径问题

url-loader 将图片装换为base64DataURL格式直接打包到js中

plugins 插件

plugins 是 webpack 中的重要组成部分，可以解决 loader 解决不了的问题

html-webpack-plugin 使用html模板生成一个简单的HTML页面

clean-webpack-plugin 清除上一次打包的内容

babel 配置

babel 是 js 的编译器，通过 babel 可以将 ES6 的语法转换成浏览器可识别的语法

babel 的基本安装包和插件

• @babel/core babel 的核心代码
• @babel/cli babel 命令行，执行 babel 命令
• @babel/preset-env 预设，这是个预设组合插件，包含了所有的语法转换插件
• @babel/plugin-transform-runtime 可以重复使用 babel 注入的程序，提供一个统一的模块化应用

配置文件 .babelrc

"presets": [
    "@babel/preset-env"
]

polyfill(垫片)

babel 只负责语法的转换，但是新的 API 是转换不了的，比如 promise，Object.assign()，这时候就需要使用 polyfill
babel 的 polyfill 为当前环境提供一个垫片，用来垫平不同浏览器或不同环境下的差异
babel 的编译过程就是将语法统一，通常是将高版本的语法转化成低版本的语法
polyfill 让所有的浏览器支持所有的特性

npm i -S @babel/polyfill

存在的问题

• 会直接修改内置的原型，造成全局污染
• 无法按需引入，加载所有的 polyfill 会导致打包文件太大

问题解决

使用 babel-runtime

npm i -S @babel/runtime
npm i -S core-js@3

.babelrc 文件

{
    "presets": [
        [
            "@babel/preset-env",
            {
                // 配置浏览器的polyfill
                "useBuiltIns":"usage",
                "corejs":3
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}

webpack-dev-server 搭建一个本地开发环境

webpack 提供了一个本地开发环境，这个本地服务是基于 express 创建的

npm i -D webpack-dev-server

提供的功能

• reloading：触发浏览器自动刷新的功能
• 浏览器提示错误
• 模块热更新，在不刷新页面的情况下更新代码
• 接口的代理，请求代理

devServer:{
    // 在内存中的路径
    contentBase:__dirname + '/dist',
    host:'localhost',
    port:4001,
    open:true,// 自动打开浏览器
    overlay:{
        errors:true //出错时显示错误到页面
    },
    hot:true, //开启热加载
    proxy:{}//请求代理
}

source-map 代码调试

cheap-module-eval-source-map 开发模式

source-map 生产模式

vue 的处理

npm i -D vue-loader vue-template-compiler vue-style-loader
npm i -S vue

环境的拆分

在 webpack 中为了方便开发调试和上线，一般会设置两个 webpack 配置文件
将 webpack.config.js 配置文件拆分为 3 部分：

• webpack.base.js：基础配置
• webpack.dev.js：开发环境的配置
• webpack.pro.js：生产环境的配置

判断当前环境是开发还是生产环境

npm i -D cross-env

配置文件的合并

npm i -D webpack-merge