Webpack打包常用资源的小结
一、概述
它是一种前端资源构建工具，一个 静态模块打包器 。能根据模块（module）的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。
将资源引入以后形成块（chunk）再处理块（打包），处理好后形成包（bundle）
二、五个核心概念
Entry
入口，指示 webpack 以那个文件为入口起点开始打包，分析构建内部依赖图。
Output
输出，知识打包后的资源 bundles 输出到哪里去，以及如何命名。
Loader
让 Webpack 能去处理非 js 文件（如css ，img文件）
Plugins
插件，可用于执行范围更广的任务。如，打包优化和压缩、重新定义环境中的变量等。
Mode
- 开发模式：development，能让代码本地调试运行的环境
- 生产模式：production，能让代码优化上线运行的环境。
三、初识 Webpack
- Hash: 命令行的打包信息中的值后面可以利用其作为文件命名的方式。
- 修改代码后要重新打包，打包后的文件会覆盖以前的。
- Webpack 可以自己处理 js / json 资源，不能处理 css img 等资源，但可以通过其他方式对这些资源进行打包处理。
- 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
- 生产环境比开发环境多一个压缩 js 文件
- 下包要统一下载在一个文件夹下面，不能内外都下包，否则会报错
- 引入less资源要下载多个资源，包括’less’， ‘less-loader’，‘css-loader’，‘style-loader’
- 打包之前先初始化 npm init --yes，选择好下包位置，提前安装好webpack
四、打包html资源
- 一般在当前待打包的文件夹下新建一个src文件。放打包入口文件，在src文件的同一级新建一个 webpack.config.js 文件，在这个文件里面写打包的相关代码。
（ 注意：这个 build 文件夹是放出口文件的，可以通过在配置文件中写代码直接创建，不需要手动创建 ）
- 配置文件代码格式：
const {
resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: '入口文件（.js文件）的相对路径', // 以这个文件为入口文件开始打包
output: {
// 出口，以下面这个文件名，将打包好的文件存储在相应的路径下
filename: 'built.js' // 出口文件名
//出口文件的绝对路径 这里需要使用路径的resolve方法提前调用
// __dirname是 nodejs 的变量，代表当前文件的绝对路径
path: resolve(__direname, 'build')
},
module: {
rules: [
// loader的配置放在这里
]
},
plugins: [
// plugins的配置放在这里
// 在这里因为要打包html资源所以要下载html-webpack-plugin
// 默认会创建一个空的HTML（无结构），引入打包输出的所有资源（JS/CSS）使用这个对象需要预先定义
new HtmlWebpackPlugin({
// 复制这个路径的HTML文件 引入打包输出的所有资源（JS/CSS）
template: '.html文件的相对路径'
})
],
mode: "development" // 选择开发模式 测试都选择这个模式
}
-
webpack.config.js配置文件的作用：
指示webpack是干什么的（当运行webpack指令时，会加载里面的配置）
-
需要注意的是在使用webpack时所有的构建工具都是基于 nodejs 平台运行的，模块化默认采用 commonjs ，因此打包时需要使用的 nodejs 的相关指令
五、打包样式资源
打包样式资源的方式和打包html资源的方式类似，只需要在loader的配置中添加相关内容。
module: {
rules: [
{
// 匹配的文件
test: /\.css$/,
// 使用那些 loader 进行处理
use: [
// 这个数组里面loader的执行顺序为从右向左（或者说是从下到上）
// 创建 style 标签，将js中的样式资源进行引入，插入到 head 标签中生效
'style-loader',
// 将 css 文件变成 commonjs 模块加载到 js 中，里面的内容是样式字符串
'css-loader'
]
}
]
}
六、打包图片资源
loader 配置和 plugins 配置信息如下：
module: {
rule: [
{
// 这里使用less写样式文件，所以要引入less的loader
test: /\.less$/,
// 使用多个 loader 用数组
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
{
// 处理图片资源
test: /\.(jpg|png|gif)$/,
// 虽然这里只写了一个 url-loader,但是使用 npm 下载的时候还要下载 file-loader
// 使用一个loader 直接用 loader 就可以
loader: 'url-loader',
options: {
// 意思是图片大小小于 8kb，就会被base64处理
// base64处理的优点： 减少请求的数量从而减轻服务器的压力
// 缺点：图片的体积会变大导致文件请求速度更慢
limit: 8 * 1024
// 只使用上述代码存在的问题： 因为 url-loader 默认使用es6模块化解析，而 html-loader 引入的图片是commonjs，因此解析时会出现 [object Module]
// 解决：关闭 url-loader的es6模块，使用commonjs解析
esModule: false,
// 打包后的图片会使用一个很长的hash码作为图片名，可以给图片重命名
name: '[hash:10].[ext]'
// [hash:10]意思是取图片的 hash 的前10位
// [ext]的意思是取文件原来的扩展名，作为现在文件的扩展名
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'html资源的相对路径'
})
]
==注意：==上面的方式默认处理不了 html 中的 img 图片（即不能处理 ），只能处理样式文件中使用 background: url(….)引入的图片文件
解决方案：在 module 的 rule 规则里再添加一个对象
{test: /\.html$/,loader: 'html-loader'}
它负责引入 img 从而能被 url-loader处理。
七、打包其他资源
在rules中写：exclude: /.\(css|js|html)$/,loader :'file-loader'