打包图片资源 · 前端

新建目录文件 mkdir webpack-test ~~~ npm init npm install webpack webpack-cli -g npm install webpack webpack-cli --save-dev ~~~ 安装css-loader style-loader插件 ~~~ npm i css-loader style-loader -D ~~~ 下载less和less-loader插件 ~~~ npm i less less-loader -D ~~~ 下载lhtml-webpack-plugin插件 ~~~ npm i html-webpack-plugin -D ~~~ 下载url-loader、file-loader ``` npm i url-loader file-loader -D ``` 下载html-loader ~~~ npm i html-loader -D 报错document未定义试试下面这个 npm i html-loader@1 -D ~~~ 结构： * src/index.html * src/index.js * src/index.less * src/01.jpg (这个小于8k) * src/02.jpg * src/03.jpg * src/03.jpg src/index.html ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>site title</title> </head> <body> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div>  <img src="./04.jpg"> </body> </html> ``` src/index.css ``` #box1{ width:100px; height:100px; background-image:url('./01.jpg'); background-repeat:no-repeat; background-size:100% 100%; } #box2{ width:200px; height:200px; background-image:url('./02.jpg'); background-repeat:no-repeat; background-size:100% 100%; } #box3{ width:300px; height:300px; background-image:url('./03.jpg'); background-repeat:no-repeat; background-size:100% 100%; } ``` src/index.js ``` import './index.less'; ``` **webpack.config.js** 作用：当运行webpack指令时，会自动加载这里面的配置 ~~~ //引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); //resolve用来解决绝对路径的 const {resolve} = require('path'); module.exports = { mode:'development',//development和production //打包的入口文件 entry: './src/index.js', output: { //输出路径，__dirname是nodejs的变量代表当前文件的目录绝对路径 path: resolve(__dirname, 'dist'), //打包输出的文件名 filename: 'built.js' }, module: { //不同的文件配置不同的loader rules: [ { //匹配less文件 test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } , { //匹配图片资源 test: /\.(jpg|png|gif)$/, //使用一个loader可以使用loader:"url-loader"、use:"url-loader"、use:["url-loader"] //url-loader是依赖file-loader的所以下载时要下载url-loader和file-loader两个包 loader:"url-loader", options: { //图片小于8kb,就会被base64处理，大于8k不处理，优点减少请求数量（base64在客户端本地解码减少服务器压力，如果图片过大海继续采用base64编码会导致cpu调用率上升，网页加载时变卡），缺点图片体积会更大（文件速度会更慢） limit:8*1024, //关闭urlloader的es6模块化，使用commjs解析，以解决打包前html里的<img>在打包后html中图片src="[object moudle]"的问题（新版本已经修复不需要了），原因是url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs esModule:false, //给图片重命名，默认会将图片命名成一个很长的hash字符串.ext后缀 //[hash:10] 取图片hash前10位 //[ext] 取文件原来扩展名 name:'[hash:10].[ext]' } }, { test: /\.html$/, //处理html你里的图片（负责引入img，从而能被url-loader处理） loader:"html-loader", }, ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] }; ~~~ outputPath可以配置放到指定的文件夹图片和页面不在同一路径下有问题：修改publicPath