Webpack 简书入门教程 (一) 五大核心【entry、output、 mode、loader（正则表达式）、 plugin】、配置文件、插件、处理项目中css和图片
文章目录
总结：
简介+五大核心
在 webpack 中，一切皆module，任何一个文件都可以看成是module。js、css、图片等都是module。
loader
webpack默认只能处理js、json格式的文件，而loader的作用则是将其他格式的文件，转换成webpack能够处理的文件。
正则表达式
/\.xxx$/上式表示匹配后缀名为xxx的文件；
正则匹配规则：
^ 表示字符串的开始位置
$ 表示字符串的结束位置/.xxx$/中的/ /就表示正则表达式自带的。
一般流程
- 使用 npm init 初始化一个项目，并安装webpack
- 将之前新建的三个文件拷贝到项目中
- 在命令行中输入webpack index.js
- 将index.html中引入的index.js文件改为./dist/main.js文件，在浏览器中运行
- 如果不希望代码被压缩，可以在命令后面加上 --mode development，表示以开发模式进行打包（开发模式不会压缩代码
- webpack 打包时会默认将项目根目录下的 webpack.config.js 文件当做配置文件，因此可以通过新建 webpack.config.js 文件来更改webpack的默认配置
npm安装时-S -D作用及区别
-S
即--save（保存） 包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在-D
即--dev（生产） 包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器它们不同于
dependencies，因为它们只需安装在开发机器上，而无需在生产环境中运行代码插件Plugin
- CleanWebpackPlugin：每次打包时自动清除旧的文件，默认清除output.path目录
- HtmlWebpackPlugin：生成一个html文件，自动引入打包后的js文件
- MiniCssExtractPlugin ：将 css 抽离成一个单独的文件，然后通过 link 的方式引入
- OptimizeCssAssetsWebpackPlugin：为了减少文件体积，一般我们会对 css 文件进行压缩
loader处理项目中的样式文件css
- webpack 默认是无法处理 css 文件的，因此需要使用 css-loader 来处理项目中的 css 文件新建 css 文件，在 js 中引入，一定要在 js 中引入（无需在 html 中引入）
- 使用loader需要在webpack配置文件的module.rules中配置
- 步骤
- 安装 css-loader，并在配置文件中添加配置
- 安装 style-loader，继续修改配置
- style-loader 的作用是将 css 插入到 head 里的 style 标签中
- 执行打包命令，在浏览器中打开 index.html 文件
loader处理项目中的照片
- file-loader
- 只有 css 引入的 bg.jpeg 被打包输出，并且引入的图片路径也被替换成了打包后的路径，js 及 html 直接引入的图片皆存在问题
- 对于通过 js 动态添加的图片，我们可以使用 require() 方法来引入
- 修改 file-loader 参数（解决js引入图片）
- html-loader
- 对于 html 中的图片,我们可以使用 html-loader 或 html-withimg-loader 来处理.
- 所以当 html 中存在 ejs 语法时，我们不能使用 html-loader 来处理图片，而是直接使用 ejs 语法来引入
- 部署
- 目前为止，我们所有的文件都是输出到 dist 目录下的，不便于之后的发布上线
- 例如 css 文件输出到 style 目录，图片输出到 images 目录，js 输出到 js 目录…
- 修改 webpack 配置重新打包
- url-loader
- 使用 url-loader 代替 file-loader，url-loader 会将体积较小的图片进行 base64 编码打包进文件中，减少网络请求次数
- image-webpack-loader
- 对图片进行压缩
一. 基本概念
1. 什么是webpack
Webpack是一个模块化的打包工具，它根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源
2. 理解module、chunk、bundle
在 webpack 中，一切皆module，任何一个文件都可以看成是module。js、css、图片等都是module。
webpack 会将入口文件以及它的依赖引入到一个 chunk （大块）中，然后进过一系列处理打包成bundle（捆绑）。
3. webpack的五大核心
(1) entry
webpack打包的入口，其取值可以是字符串，数组或者一个对象
// 单入口单文件
entry: "./src/index.js"
// 单入口多文件
entry: ["./ src/index.js", "./src/common.js"] // 若index.js与common.js没有依赖关系，可以通过此方式将它们打包在一起
// 多入口
entry: {
page1: "./src/page1.js", //page1和page2即为key值
page2: "./src/page2.js"
}
(2) output
webpack打包的输出，常用配置如下
output: {
path: path.resolve(__dirname, "./dist"),
// 单入口时（默认）
// filename: "main.js",
// filename: "js/main.js", // filename也可以写路径，表示输出到 dist/js 目录下
// 多入口时，由于会有多个输出，因此文件名不能写死
filename: "[name].js", // name表示chunk的名称，此处为entry中的key值
chunkFilename: "[name].js", // 按需加载的模块打包后的名称
publicPath: "/" // 项目部署在服务器上的路径，如果在根路径则为 /
}
(3) mode
webpack打包分为两种模式，开发模式（development）与生产模式（production），默认为生产模式
| 选项 | 描述 |
|---|---|
| development | 会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。 |
| production | 会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin. |
(4) loader
webpack默认只能处理js、json格式的文件，而loader的作用则是将其他格式的文件，转换成webpack能够处理的文件
使用loader需要在webpack配置文件的module.rules中配置
module.exports = {
entry: ...,
output: ...,
module: {
noParse: /node_modules/, //忽略解析 node_modules 中的文件
rules: [
{
test: /\.xxx$/, // 匹配后缀名为xxx的文件；正则匹配规则：^ 表示字符串的开始位置
//$ 表示字符串的结束位置,/\.xxx$/中的/ /就表示正则表达式自带的
// 单个loader
// loader: "xxx-loader",
// options: {},
// 多个loader，loader的处理顺序为从后往前，因此需要优先处理的loader放在数组最后面
// use: ["xxxx-loader", "xxx-loader"],
// 如果某个loader需要配置，写成下面的格式
use
最低0.47元/天 解锁文章
扫一扫
1163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
