webpack 4.x 基础
webpack 4.x 基础
参考资料：
webpack 中文
webpack 基础篇
webpack 4.x.x 搭建项目完整详解步骤
webpack 初识
webpack 是现代 JavaScript 应用程序的静态模块打包工具。在 webpack 中，一切皆模块，JavaScript、CSS、LESS、SASS、JSON、图片等等在webpack中都是一个模块。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack 在构建项目时通过配置中提供的入口文件，来查找每一个相关的文件或资源，并将它们压缩打包合并成最终的输出。
webpack 概念
- Entry 入口
- Output 出口
- Module 模块
- Loader 编译器
- Plugin 插件
- Mode 模式
- Chunk 代码块
- HMR(Hot Module Replacement) 模块热替换
webpack 初始项目搭建
Talk is cheap, show me the code.
依次敲入如下命令，搭建一个基于 webpack 的项目
-
mkdir webpack-learn -
cd ./webpack-learn -
npm init -
npm i webpack webpack-cli webpack-dev-server -
mkdir config dist src依次创建文件夹，用以 webpack 配置的骨架 -
touch dist/index.html src/index.js创建项目入口 html、js 文件 -
在
package.json>script中配置build的运行命令"build": "webpack", -
npm run build
执行完命令后，dist 文件夹下会多出 main.js，这是 webpack 的默认打包配置生成的产物
webpack 默认打包入口为 src/index.js，默认打包模式为 --model development，打包模式一般分两种：
--model development开发环境--model production生产环境
-
在
package.json>script中配置生产环境命令："build:prod": "webpack --model production",
webpack 配置文件初识
对于一个投入生产的项目，还是需要对 webpack 进行高度配置的，在 config 文件夹中创建配置文件：touch config/webpack.dev.js
配置文件内容：
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装 npm install html-webpack-plugin
const path = require('path'); //node内置path模块，该模块主要集成文件系统路径操作API
const config = {
mode: 'development',
entry: {
main: path.resolve(__dirname, '../src/index.js') // 入口 js 文件
},
output: {
path: path.resolve(__dirname, '../dist'), // 输出位置
filename: 'bundle.js' // 输出文件名
},
module: {
rules: [],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html' }), //根据项目提供HTML模板，生成新页面，并将对应的输出打包压缩输出的js，链接到页面中;
],
devServer: {
contentBase: path.join(__dirname, './dist'), //编译打包文件的位置
publicPath: '/',
port: 8088, //服务器端口号
host: '0.0.0.0',
proxy: {
}, //代理列表
compress: true,
historyApiFallback: true, //开启服务器history重定向模式
}
};
module.exports = config;
配置项介绍：
mode 模式
webpack打包的模式，开发环境 或 生产环境
模式是指webpack通过选择 development 、 production 和 none之中的一个，来进设置webpack编译的方式。我们可以通过设置配置文件中的 mode 字段，来配置webpack的编译模式
entry 入口
项目 js 的入口文件，支持多入口
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的
output 出口
js打包压缩后的出口文件，多入口时对应的配置应做相对变化
output 属性告诉 webpack 在哪里输出它所编译后的文件，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来处理输出的规则
module 模块
模块中的配置项 rules 可以配置loder使用的规则、作用范围、控制输出的名称、位置等；主要作用是编译，解析文件;
*Loader 编译器
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
plugins 插件
通过深入了解 webpack 插件机制的核心 tabpable 可以让我们更好地理解、使用和编写插件。其实质是触发 webpack 自身暴露提供的 钩子 触发编译过程中要执行的任务。
插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
devServer webpack-dev-server 配置
提供各种常用的开发功能，如代理，压缩，刷新资源等；其中比较值得关注的是HMR 模块热替换(HMR - Hot Module Replacement)技术。
webpack 结合配置文件继续开发
-
npm i html-webpack-plugin安装未安装的插件 -
将
dist清空，并在src中添加index.html模板文件<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <div>Hello webpackdiv> body> html> -
在
package.json中添加启用自配置打包的命令："build": "webpack --config config/webpack.dev.js", -
npm run build此时，
dist文件夹中不再是main.js，而是index.html和bundle.js，说明配置生效且可以看到
index.html中插入了：
启动 webpack-dev-server 以启动项目
-
package.json中添加开发启动命令："dev" : "webpack-dev-server --config config/webpack.dev.js --color --progress --hot"--color启用彩色打印--progerss启用进程监测--hot启用热加载 -
npm run dev -
打开
localhost:8088 -
以上，就是 webpack 的基础描述。