Webpack打包常用资源的小结

一、概述

它是一种前端资源构建工具，一个 静态模块打包器 。能根据模块（module）的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。

将资源引入以后形成块（chunk）再处理块（打包），处理好后形成包（bundle）

二、五个核心概念

Entry

入口，指示 webpack 以那个文件为入口起点开始打包，分析构建内部依赖图。

Output

输出，知识打包后的资源 bundles 输出到哪里去，以及如何命名。

Loader

让 Webpack 能去处理非 js 文件（如css ，img文件）

Plugins

插件，可用于执行范围更广的任务。如，打包优化和压缩、重新定义环境中的变量等。

Mode

1. 开发模式：development，能让代码本地调试运行的环境
2. 生产模式：production，能让代码优化上线运行的环境。

三、初识 Webpack

1. Hash: 命令行的打包信息中的值后面可以利用其作为文件命名的方式。
2. 修改代码后要重新打包，打包后的文件会覆盖以前的。
3. Webpack 可以自己处理 js / json 资源，不能处理 css img 等资源，但可以通过其他方式对这些资源进行打包处理。
4. 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
5. 生产环境比开发环境多一个压缩 js 文件
6. 下包要统一下载在一个文件夹下面，不能内外都下包，否则会报错
7. 引入less资源要下载多个资源，包括’less’， ‘less-loader’，‘css-loader’，‘style-loader’
8. 打包之前先初始化 npm init --yes，选择好下包位置，提前安装好webpack

四、打包html资源

1. 一般在当前待打包的文件夹下新建一个src文件。放打包入口文件，在src文件的同一级新建一个   webpack.config.js  文件，在这个文件里面写打包的相关代码。

（ 注意：这个 build 文件夹是放出口文件的，可以通过在配置文件中写代码直接创建，不需要手动创建 ）

2. 配置文件代码格式：

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" // 选择开发模式 测试都选择这个模式
	
}

3. webpack.config.js配置文件的作用：

   指示webpack是干什么的（当运行webpack指令时，会加载里面的配置）

4. 需要注意的是在使用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 图片（即不能处理 <img src="…” alt="…"/>），只能处理样式文件中使用 background: url(….)引入的图片文件

解决方案：在 module 的 rule 规则里再添加一个对象

{test: /\.html$/,loader: 'html-loader'}

它负责引入 img 从而能被 url-loader处理。

七、打包其他资源

在rules中写：exclude: /.\(css|js|html)$/,loader :'file-loader'