webpack自学笔记 -- 2 打包css\js\html\图片资源

本章箴言：打包其他资源配置

　　注意：loader：下载、使用（配置loader）

　　　　　plugins: 下载、引入、使用（可能还需要与package.json配合）

打包html、css、less文件：

　　例如：文件分布

 

 

 html:

 

 

css:

　　

 

 

 我们主要学习的就是webpack.config.js的配置

　　const { resolve } = require("path");

　　const HtmlWebpackPlugin = require("html-webpack-plugin");

　　module.exports = {

　　　　entry:"./src/index.js",　　　　　　　　　　　　　　　　　　　　// 打包的入口文件

　　　　output:{

　　　　　　filename:"built.js",　　　　　　　　　　　　　　　　　　　//打包出来的文件名

　　　　　　path:resolve(__dirname,"build") 　　　　　　　　　　　　 //打包路径，__dirname是node.js里面的属性：表示当前执行脚本所在的目录

　　　　}，

　　　　//loader

　　　　module:{

　　　　　　rules:[

　　　　　　　　{

　　　　　　　　　　test:/\.css$/,

　　　　　　　　　　use:["style-loader","css-loader"]

　　　　　　　　},

　　　　　　　　{

　　　　　　　　　　test:/\.less$/,

　　　　　　　　　　use:["style-loader","css-loader","less-loader"]　　//需要依赖：less、less-loader、css-loader、style-loader

　　　　　　　　}

　　　　　　]

　　　　},

　　　　plugins:[　　　　　　　　　　　　　　　　　　　　　　　　　　//注意plugins是个数组

　　　　　　new HtmlWebpackPlugin({

　　　　　　　　template:"./src/index.html"　　　　　　　　　　//复制 ./src/index.html 文件并自动引入打包输出的所有资源（本例会引入index.js文件，index.js文件又引入了index.css文件）

　　　　　　})

　　　　],

　　　　mode:"develpment"　　　　　　　　　　　　　　　　　　　　//这里我们使用开发环境，当然你可以使用production：生产环境

　　}

在test1的目录下，执行：webpack就可以打包这些文件了

　　

 

 

 　　打包出来的html文件自动帮我们引入了js文件，这就是html-webpack-plugin依赖的作用：默认会创建一个空的html文件，自动引入打包输出的所有资源（包括css/js/...）

　　复制template对应路径的html，并把打包出的所有资源引入

 

 打包图片资源

　　前面的配置不重复写了，直接写loader的配置

　　//loader

　　module:{

　　　　rules:[

　　　　　　{

　　　　　　　　test:/\.(png|jpg|gif)$/,　　//处理以png|jpg|gif 结尾的图片；但是默认不处理html文件中的img图片

　　　　　　　　loader:"url-loader",　　　//使用url-loader需要两个依赖：url-loader、file-loader

　　　　　　　　options:{

　　　　　　　　　　limit: 8 * 1024　　　//当图片大小小于8kb,就会被base64处理，变成base64编码的图片；

　　　　　　　　　　　　　　　　　　　 //优点：减少请求数量（减轻服务器压力）；缺点：图片体积更大（文件请求速度更慢）；

　　　　　　　　　　esModule:false,　   //问题：因为url-loader默认使用es6模块化解析，而html-laoder引入图片是commonJS解析，所以在解析时会出问题，所以关闭url-loader的ES6模块化，　　　　　　　　　　　　　　　　　　　　　　　　　　使用commonJS解析

　　　　　　　　　　outputPath:"imgs", //输出图片存放的文件夹

　　　　　　　　　　name:"[hash:10].[ext]",　//图片重命名；[hash:10]取图片的hash值的前10位(防止前缀太长)；[ext]取文件原本扩展名

　　　　　　　　}

　　　　　　},

　　　　　　{

　　　　　　　　test:/\.html$/,

　　　　　　　　loader:"html-laoder",　　//负责处理html文件的img图片（负责引入img，从而能被url-loader进行处理）

　　　　　　　　options:{

　　　　　　　　　　esModule:false

　　　　　　　　}

　　　　　　}

　　　　]

　　}