Node-Webpack静态模块打包工具

一.概念

什么是 Webpack?

用于javaScript应用程序的静态模块打包工具

静态模块：指的是编写代码过程中的，html，css，js，图片等固定内容的文件

注意：

只有和入口有直接/简介的引入关系的模块，才会被打包

为什么要学 Webpack？

原因：把静态模块内容，压缩，整合，转译等（前端工程化）
把 less / sass 转成 css 代码
把 ES6+ 降级成 ES5
支持多种模块文件类型，多种模块标准语法

二.Webpack入门

使用 Webpack

步骤：
1.新建项目文件夹，初始化包环境
2.新建 src 源代码文件夹（书写代码）
3.下载 webpack webpack-cli 到项目（版本独立）

npm i webpack webpack-cli -D/–save-dev

4.项目中运行工具命令，采用自定义命令的方式（局部命令）

“scripts”: {

​ “build”:“webpack”

}

5.自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）

npm run build

修改 Webpack 打包入口和出口

步骤：
1.项目根目录，新建 webpack.config.js 配置文件
2.导出配置对象，配置入口，出口文件路径

const path = require(‘path’);
module.exports = {
// 配置入口

​ entry: ‘./src/main.js’,
​ // 配置出口

​ output: {
​ path: path.resolve(__dirname, ‘dist’),
​ filename: ‘app.js’,

​ },

}

3.重新打包观察

npm run build

三.自动生成 html 文件

插件 html-webpack-plugin： 在 Webpack 打包时生成 html 文件

步骤：
1.下载 html-webpack-plugin 本地软件包

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

2.配置 webpack.config.js 让 Webpack 拥有插件功能

3.指定以 public/index.html 为模板复制到 dist/index.html，并自动引入其他打包后资源

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const path = require(‘path’);
module.exports = {entry: ‘index.js’,
output: { path: path.resolve(dirname, ‘./dist’),
filename: ‘index_bundle.js’,

​ },
​ // 安装插件

​ plugins: [new HtmlWebpackPlugin({

​ // 指定自动复制的HTML文件
​ template:path.join(dirname,‘public/index.html’)
​ })],

​ };

四.打包 css 模块

加载器 css-loader：解析 css 代码
加载器 style-loader：把解析后的 css 代码插入到 DOM
步骤：
1.准备 css 文件引入到 src/main.js 中（压缩转译处理等）

import ‘./css/index.css’/‘路径’

2.下载 css-loader 和 style-loader 本地软件包

npm install --save-dev css-loader

npm install --save-dev style-loader

3.配置 webpack.config.js 让 Webpack 拥有该加载器功能

module.exports = {

​ module: {
​ rules: [
​ {test: /.css$/i,
​ use: [“style-loader”, “css-loader”],

​ },],

​ },

​ };

4.打包后运行 dist/index.html 观察效果

注意：

Webpack 默认只识别 js 和 json 文件内容

五.打包 less 模块

加载器 less-loader：把 less 代码编译为 css 代码，还需要依赖 less 软件包
步骤：
1.准备 less 样式并引入到 src/main.js 中
2.下载 less 和 less-loader 本地软件包

npm install less less-loader --save-dev

3.配置 webpack.config.js 让 Webpack 拥有功能

rules: [

​ { test: /.less$/i,
​ use: [
​ // compiles Less to CSS
​ ‘style-loader’,
​ ‘css-loader’,
​ ‘less-loader’, ],

​ },

],

4.打包后运行 dist/index.html 观察效果

六.打包图片

资源模块：Webpack5 内置了资源模块的打包，无需下载额外 loader
步骤：
1.准备图片素材到 src/assets 中
2.在 index.less 中给 body 添加背景图

body {

​ //设置背景图

​ background-image: url(…/assets/background.png/路径);

​ }

3.在 main.js 中给 img 标签添加 logo 图片

import imgObj from ‘./assets.logo.png’
document.querySelector(‘.logo-img’).scr = imgObj

4.配置 webpack.config.js 让 Webpack 拥有打包图片功能

rules: [ // 规则列表
// …

​ { // 针对资源模块（图片，字体文件，图标文件等）处理
​ test: /.(png|jpg|jpeg|gif)$/i,type: ‘asset’,
​ generator: { // 输出文件时，路径+名字
​ filename: ‘assets/[hash][ext]’

​ }

​ }

​ ]

5.打包后运行 dist/index.html 观察效果

注意：判断临界值默认为 8KB
小于 8KB 文件会被转成 data URI（base64字符串）
大于 8KB 文件会被复制到 dist 下

七.babel 编译器

babel 定义：是一个 JavaScript 语法编译器，将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中
babel-loader：让 Webpack 可以使用 babel 转译 JavaScript 代码
步骤：
1.下载 babel babel-loader core 本地软件包

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

2.配置 webpack.config.js 让 Webpack 拥有功能

​ { test: /.m?js$/,
​ exclude: /(node_modules|bower_components)/,
​ use: {loader: ‘babel-loader’,
​ options: { presets: [‘@babel/preset-env’] }

​ }

}

3.打包运行后 dist/index.html 观察效果

webpack-dev-server：快速开发应用程序
作用：启动 Web 服务，打包输出源码在内存，并检测代码变化热更新到网页

八.Webpack 开发服务器

步骤：
1.下载 webpack-dev-server 软件包到当前项目

npm i webpack-dev-server -D/–save-dev**

2.配置自定义命令，并设置打包的模式为开发模式

“scripts”: {
“build”: “webpack”,
“dev”: “webpack serve --mode=development”
},

3.使用 npm run dev 来启动开发服务器，试试热更新效果

九.打包模式

打包模式：告知 Webpack 使用相应模式的内置优化

模式名称	模式名字	特点
开发模式	development	调试代码，实时加载，模块热替换等
生产模式	production	压缩代码，资源优化，更轻量等

设置：
方式1：在 webpack.config.js 配置文件设置 mode 选项

module.exports = {

//…

mode:‘production’

}

方式2：在 package.json 命令行设置 mode 参数

“scripts”: {
“build”: “webpack --mode=development/production ",
“dev”: "webpack serve --mode=development/production”
},

注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置

十.开发环境调错 - source map

source map：可以准确追踪 error 和 warning 在原始代码的位置
问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）
设置：webpack.config.js 配置 devtool 选项

module.exports = {

//…

devtool:‘inline-source-map’// 把代码位置信息一起打包

}

inline-source-map 选项：把源码的位置信息一起打包在 js 文件内
注意：source map 仅适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）

十一.解析别名 alias

解析别名：配置模块如何解析，创建 import 或 require 的别名，来确保模块引入变得更简单
配置解析别名：在 webpack.config.js 中设置

module.exports = {
//…
**resolve: { **

​ alias: {
​ Utilities(别名): path.resolve(dirname, ‘src/utilities/’),
​ Templates(别名): path.resolve(dirname, ‘src/templates/’),
​ },

​ },

};