打包圖片資源 · 前端

新建目錄文件 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