Webpack的基本使用

Webpack的基本使用

nrm的安装（环境）

• 可以在有node.js环境的命令行中运行npm install nrm -g进行全局安装
• 安装成功后可以使用nrm ls命令查看镜像地址列表
• 使用nrm use 镜像地址的名称命令切换使用的镜像地址，例如：nrm use taobao
• nrm只是提供了下载包的地址，并能在地址之间切换，但安装包的工具依旧是npm
  • nrm中的cnpm只是地址，而npm install cnpm -g安装命令之后运行的cnpm install jquery -g命令中的cnpm是一个安装包的工具
• 使用npm list -g --depth 0可查看全局安装的模块，使用npm ls可查看局部安装的模块

Webpack的认识

• 网页中的常见静态资源：
  • js(.js、.jsx、.coffee、.ts(TypeScript))
  • css(.css、.less、.sass( => .scss))
  • Images(.jpg、.png、.gif、.bmp、.svg)
  • fonts(.svg、.ttf、.eot、.woff、.woff2)
  • 模板文件(.ejs、.jade、.vue)
• 网页加载慢，可能是因为网页发起二次请求，去请求各种静态资源
• 解决二次请求以及资源间的依赖关系
  • 合并（减少请求）、压缩（提高速度）、精灵图、base64编码图片
  • 使用Webpack可解决资源的依赖
• Webpack是前端的项目构建工具，基于node.js开发的工具
• 可以使用npm install webpack -g命令进行全局安装webpack
  • 也可以使用npm install webpack --save-dev命令进行局部安装

项目目录

• 使用webpack构建的项目目录：
  • /src文件夹 : 存放源码
    • /src/css文件夹 : 存放css源码文件
    • /src/js文件夹 : 存放js源码文件
    • /src/images文件夹 : 存放images源码文件
    • index.html : 网页文件
    • index.js : 项目的js入口文件
  • /dist文件夹 : 存放编译打包发布的文件
  • /package.json : 使用npm init [-y]命令初始化项目时用于存放项目信息的文件
  • /node_modules : 存放通过npm工具下载的依赖包
• 不直接在页面中引用js源码文件，因为js源码文件可能使用了ES6的语法，导致浏览器解析失败
• 不直接在页面中引用依赖的文件，避免二次请求和依赖复杂
• 可以在js的入口源码文件中引用所依赖的文件，再经编译打包发布后，页面再引用
  • 在js入口源码文件的中的开始位置使用import 别名 from '依赖的包名';语句进行依赖的引入
    • import 别名 from '模块名';是ES6中导入模块的方法

使用Webpack

• 使用webpack 源码文件 打包文件进行打包并编译发布到打包文件的目录中
  • 若有错误，可能版本不同，最新版本使用时在源码文件和打包文件之间加上-o即可
• 可以将打包相关信息存放在一个配置文件中
  • 在项目根目录下创建一个名为webpack.config.js的配置文件
  • 在配置文件中通过使用module.exports = {}向外导出配置一个配置对象
  • 配置对象中使用entry属性表示webpack要打包的文件
  • 配置对象中使用output属性表示webpack要打包发布的文件信息对象
    • 该对象的path属性表示发布的目录路径
    • 该对象的filename属性表示发布的文件名称
  • 通过配置文件方式打包时，可以直接运行webpack 命令
    例如：

const path = require('path')
module.exports = {
    entry: path.join(__dirname,'./src/index.js'),
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    }
}

webpack插件

webpack-dev-server

• webpack-dev-server是一个用于自动编译打包的工具
• 使用npm install webpack-dev-server -D命令将工具安装到项目本地开发依赖
• 由于是本地安装，故此无法将其当作脚本命令直接使用（全局安装的则可以）
  • 可以将其配置在pakeage.json的script中
  • 可以带参数--open，即自动编译打包后直接打开浏览器
  • 还可以带参数--port 端口号指定打开浏览器后访问的端口
  • 还可以带参数--contentBase 文件目录指定打开浏览器后访问的文件的目录
  • 若带参数运行则可不进行配置插件
    例如：webpack-dev-server --open --port 3000 --contentBase src
• 运行该工具时必须本地安装webpack
• 该工具将入口js脚本打包到内存中

html-webpack-plugin

• 使用cnpm install html-webpack-plugin -D或npm install html-webpack-plugin -D进行本地安装
• 将安装到本地的html-webpack-plugin包导入到webpack.config.js配置文件中
• 该插件会将页面拷贝到内存中，并自动导入打包到内存的js脚本

配置插件

• 可以在webpack.config.js配置文件导出的配置对象中使用plugins属性指定一个插件配置的数组
• 使用new htmlWebpackPlugins()构造函数构造一个插件对象并放入插件配置的数组中
• 使用new htmlWebpackPlugins()构造函数时传入一个配置对象
  • 配置对象中的template属性用于指定页面的模板文件路径
  • 配置对象中的filename属性用于指定生成到内存的页面文件名

导入样式

• 在js的入口文件中使用import 文件路径即可向其中导入文件
  • 通过路径的形式引入node_modules中的文件，则可省略路径前面的node_modules目录，直接使用包名后跟路径
  • 路径中没有，默认在node_modules目录中查找
• webpack默认只能打包处理js类型文件，无法处理非js类型的文件
• 如果处理非js类型文件，需要手动安装合适的第三方loader加载器
  • 打包处理css文件，需使用cnpm install style-loader css-loader -D命令安装相应的loader
  • 在webpack.config.js配置文件中新增配置节点module，该节点对应一个对象
    • module对象有rules属性表示所有的第三方文件匹配及处理规则的数组
    • 每个匹配规则即为一个对象，对象中有一个test属用于指定匹配的正则表达式
    • 对象中的use属性用于指定处理的loader
      • 在调用loader时是从后向前调用的
      • 最后一个loader调用完会将处理结果直接交给webpack进行打包合并
    • css文件对应style-loader、css-loader
    • less文件对应less-loader，但less-loader依赖less
    • scss文件对应sass-loader，但sass-loader依赖sass、node-sass、fibers
    • scss文件对应sass-loader，但sass-loader依赖sass、node-sass、fibers
  • webpack默认无法处理css文件中的url地址（包括图片、字体库路径）
    • 使用url-loader即可处理，但url-loader依赖file-loader
    • loader可以通过url形式传参
    • 在url-loader后通过?传参，参数limit对应的参数值为图片进行base64编码的阈值
      • 当图片的大小（单位：字节byte）不超过阈值时，则进行base64编码
      • 当图片的大小（单位：字节byte）超过阈值时，则不进行base64编码，并重命名
        • 此处重命名是由于所有图片都被托管到根路径，需避免不同目录中的同名文件在根路径下的重名
    • 为避免图片重名，可以使用name参数设置重命名
      • 传入的[name]表示原文件名
      • 传入的[ext]表示文件的扩展名
      • 传入的[hash: [int] ]表示原文件唯一的标识，其中的[int]表示hash值的位数
  • 若导入诸如BootStrap等前端框架，则其中可能存在字体文件
    • 字体文件的扩展名有：.eot、.svg、.ttf、woff、woff2
    • 字体文件的loader也是url-loader
  • 所有loader以及其所依赖都需使用npm install 包名 -D或cnpm install 包名 -D命令下载
    webpack.config.js示例如下：

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: path.join(__dirname,'./src/index.js'),
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname,'./src/index.html'),
            filename: "index.html"
        })
    ],
    module: {
        rules: [
            {test: /\.css$/, use: ['style-loader','css-loader']},
            {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
            {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: ['url-loader?limit=2739&name=./images/[hash:8]-[name].[ext]']}
        ]
    }
}

Babel处理部分高级语法

在webpack中默认只能处理一部分ES6新语法，有一部分处理不了
在webpack中处理不了的语法，需借助第三方loader处理

• 在webpack中可以运行两套命令，安装两套包（包含Babel相关loader）
  • 第一套：运行cnpm install @babel/core babel-loader @babel/plugin-transform-runtime -D
  • 第二套：运行cnpm install @babel/preset-env @babel/plugin-proposal-function-bind @babel/plugin-proposal-class-properties -D
• 在webpack.config.js配置文件的配置节点module中的处理规则rules数组中添加一个新的匹配规则
  • 需处理的ES6语法放于js文件中，故此新的匹配规则的test属性应使用正则表达式匹配js文件
  • 由于node_modules目录中存在大量的js文件，并且这些js文件可能已经痛过了编译打包
  • 对于已经编译打包的js文件就没必要再通过webpack进行编译打包
    • 可以在新的匹配规则对象中使用exclude属性指定排除的路径
• 在根目录中新建一个.babelrc的Babel配置文件，该配置文件属于JSON格式（无注释，字符串必须双引）
  例如：

{
  "presets" : ["@babel/preset-env"],
  "plugins" : ["@babel/plugin-transform-runtime","@babel/plugin-proposal-function-bind","@babel/plugin-proposal-class-properties"]
}

异常和错误

• 在.json文件中不能有注释
• 若遇到问题或因网络问题下载缓慢可以将node_modules文件夹删除，然后重新通过npm install命令进行安装