一、webpack介绍
1、由来
由于前端之前js、css、图片文件需要单独进行压缩和打包，这样团队人员处理很繁琐，然后 Instagram 团队就想让这些工作自动化，然后webpack应运而生。
2、介绍
webpack是一个模块打包器（module bundler），webpack视HTML，JS，CSS，图片等文件都是一种 资源 ，每个资源文件都是一个模块（module）文件，webpack就是根据每个模块文件之间的依赖关系将所有的模块打包（bundle）起来。
3、作用
- 对 CommonJS 、 AMD 、ES6的语法做了兼容
- 对js、css、图片等资源文件都支持打包（适合团队化开发）
- 比方你写一个js文件，另外一个人也写一个js文件，需要合并很麻烦，现在交给webpack合并很简单
- 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对 CoffeeScript、ES6的支持；
- 有独立的配置文件webpack.config.js
- 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
- 支持 SourceUrls 和 SourceMaps，易于调试；
- 具有强大的Plugin（插件）接口，大多是内部插件，使用起来比较灵活
- webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快。
- ……
在Webpack的世界里有两个最核心的概念：
1. 一切皆模块
正如js文件可以是一个“模块（module）”一样，其他的（如css、image或html）文件也可视作模 块。因此，你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。
2. 按需加载
传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边，“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件，而且异步加载部分代码以实现按需加载。
二、webpack安装
前提条件
在开始之前，请确保安装了 Node.js 的最新版本。推荐使用 Node.js 最新的长期支持版本(LTS - Long Term Support)。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。
本地安装
要安装最新版本或特定版本，请运行以下命令之一：
npm install --save-dev webpack
npm install --save-dev webpack@<version>
如果你使用 webpack 4+ 版本，你还需要安装 CLI。
npm install --save-dev webpack-cli
对于大多数项目，建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。
全局安装
以下的 NPM 安装方式，将使 webpack 在全局环境下可用：
npm install --global webpack
不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。
打包js文件
我们安装好webpack后就可以对js文件进行打包了
运行以下命令
npx webpack index.js
注意: index.js就是需要打包的文件
打包之后的文件会放到dist目录中, 名称叫做main.js
三、Webpack核心概念
Webpack 本质上是一个打包工具，它会根据代码的内容解析模块依赖，帮助我们把多个模块的代码打包。下面是Webpack官网给的一个说明图。
如上图，webpack 会把项目中使用到的多个代码模块（可以是不同文件类型），打包构建成项目运行仅需要的几个静态文件（如.js、.css等）。
从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在webpack中有四个核心概念：
入口(entry)
输出(output)
loader
插件(plugins)
1、入口
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
入口使用 entry 字段来进行配置，可以是个字符串或数组或者是对象；如果是数组，数组中的所有文件会打包生成一个filename文件；如果是对象，可以将不同的文件构建成不同的文件。例如：
module.exports = {
entry: './src/index.js' }
// 上述配置等同于
module.exports = {
entry: {
main: './src/index.js'
}
}
// 或者配置多个入口
module.exports = {
entry: {
foo: './src/page-foo.js',
bar: './src/page-bar.js',
// ...
}
}
// 使用数组来对多个文件进行打包
module.exports = {
entry: {
main: ['./src/foo.js', './src/bar.js']
}
}
2、输出
webpack 的输出即指 webpack 最终构建出来的静态文件，即打包构建成项目运行仅需要的几个静态文件。输出使用output进行设置。
module.exports = {
// ...
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
}
// 或者多个入口生成不同文件
module.exports = {
entry: {
foo: './src/foo.js',
bar: './src/bar.js',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
}
// 路径中使用 hash，每次构建时会有一个不同 hash 值，避免发布新版本时线上使用浏览器缓存
module.exports = {
// ...
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
}
3、loader
webpack 中提供一种处理多种文件格式的机制，便是使用 loader。我们可以把 loader 理解为是一个转换器，负责把某种文件格式的内容转换成 webpack 可以支持打包的模块。(webpack 自身只理解 JavaScript)
在webpack中JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，图片等静态文件都是模块，不同模块的加载是通过模块加载器（webpack-loader）来统一管理的当我们需要使用不同的 loader 来解析处理不同类型的文件时，我们可以在 module.rules 字段下来配置相关的规则。例如使用 Babel 来处理 .js 文件。
module: {
// ...
rules: [
{
test: /\.jsx?/, // 匹配文件路径的正则表达式，通常我们都是匹配文件类型后缀
include: [
path.resolve(__dirname, 'src') // 指定哪些路径下的文件需要经过 loader 处理
],
use: 'babel-loader', // 指定使用的 loader
},
],
}
以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。
重要的是要记得，在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules。然而，在定义错误时 webpack 会给出严重的警告。
loader 是 webpack 中比较复杂的一块内容，它支撑着 webpack 来处理文件的多样性。并且webpack 2.x 之后 module.loaders改成了module.rules。
4、插件
在 webpack 的构建流程中，plugin 用于处理更多其他的一些构建任务。可以这么理解，模块代码转换的工作由 loader 来处理，除此之外的其他任何工作都可以交由 plugin 来完成。
webpack提供了“丰富的组件”来满足我们不同的需求，当然也可以自行实现一个组件来满足特定的需求。在webpack中，可以通过 plugins 字段来添加新的 plugin 。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
例如:
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
常用的插件有：
-
HotModuleReplacementPlugin –开启全局的模块热替换(HMR)；
-
NamedModulesPlugin –当模块热替换(HMR)时在浏览器控制台输出对用户更友好的模块名字信息；
-
CommonsChunkPlugin –提取chunk公共部分；
-
ExtractTextPlugin –独立生成css文件，以外链的形式加载；
-
UglifyJsPlugin –压缩js；
-
HtmlWebpackPlugin –使用模版生成html。
理论上plugin可以干涉 webpack 的整个构建流程，可以在流程的每一个步骤中定制自己的构建需求。
webpack 提供许多开箱可用的插件！查阅插件列表获取更多信息。
四、webpack配置
什么是webpack配置文件?
我们在打包JS文件的时候需要输入: npx webpack index.js
这句指令的含义是: 利用webpack将index.js和它依赖的模块打包到一个文件中
其实在webpack指令中除了可以通过命令行的方式告诉webpack需要打包哪个文件以外,
还可以通过配置文件的方式告诉webpack需要打包哪个文件
如何配置webpack文件
在根目录下手动创建一个webpack.config.js的文件, 在这个文件中进行webpack相关配置
webpack.config.js
const path = require("path");
module.exports = {
// 监听打包文件变化，当它们修改后会重新编译打包
watch: true,
watchOptions: {
aggregateTimeout: 300, // 防抖, 和函数防抖一样, 改变过程中不重新打包, 只有改变完成指定时间后才打包
poll: 1000, // 每隔多少时间检查一次变动
ignored: /node_modules/ // 排除一些巨大的文件夹, 不需要监控的文件夹
},
/*
mode: 指定打包的模式, 模式有两种
一种是开发模式(development): 不会对打包的JS代码进行压缩
另一种是上线模式(production), 会对打包的JS代码进行压缩
* */
mode: "development", // "production" | "development" | "none"
/*
entry: 指定需要打包的文件
* */
entry: "./index.js", // string | object | array
/*
output: 指定打包之后的文件输出路径和输出的文件名称
* */
output: {
/*
filename: 指定打包之后的JS文件名称
* */
filename: "bundle.js",
/*
path: 指定打包之后的文件存储到什么地方
* */
path: path.resolve(__dirname, "bundle")
}
};
配置好后就可以直接执行npx webpack打包, 后面不需要加上文件名称
注意
配置文件的名称必须叫做: webpack.config.js, 否则直接输入 npx webpack打包会出错
如果要使用其它名称, 那么在输入打包命令时候必须通过 --config 指定配置文件名称
npx webpack --config 配置文件名称
每次输入npx webpack --config xxx来打包文件会有一点麻烦, 所以我们可以通过npm script来简化这个操作
找到package.json文件的script节点
"script": {
"test": "npx webpack --config 配置文件名称"
}
配置好后只需要执行npm run test即可
参考:
webpack中文文档: https://www.webpackjs.com/
Webpack简介与基本概念: https://juejin.im/entry/5b060d136fb9a07ac90d9675
网友评论