webpack html版本号,webpack踩坑记录

最近在学习webpack的一些配置，学习的期望就是通过可以通过webpack给html文件中引用的资源例如css、js、img文件加上版本号，避免由于浏览器的缓存造成线上请求的资源依旧是旧版本的东西。

首先新建一个webpack的项目(默认大家已经安装node的了)npm init

项目中安装webpacknpm webpack --save-dev

npm webpack-cli --save-dev

然后就可以开心的写代码了

首先讲解单个文件的打包配置

在项目的根目录下，新建一个webpack.config.js文件，npm install --save-dev html-webpack-plugin mini-css-extract-plugin

clean-webpack-plugin

现在逐一讲解各个plugin的作用：

html-webpack-plugin

当使用 webpack打包时，创建一个 html 文件，并把 webpack 打包后的静态文件自动插入到这个 html 文件当中，并且可以使用自定义的模版，例如html、pug、ejs，还可配置hash值等一些配置。

具体可配置的参数还是很多的，像title、meta等等，可参考webpack官网mini-css-extract-plugin

webpack 4.0以后，把css样式从js文件中提取到单独的css文件中；

这在项目中的使用场景是把css文件在js文件中import进来，打包的时候该插件会识别到这个css文件，通过配置的路径参数生成一个打包后的css文件。clean-webpack-plugin

是用于在下一次打包时清除之前打包的文件，可参考webpack官网

项目中用到的loader

babel-loader

Babel把用最新标准编写的 JavaScript代码向下编译成可以在今天随处可用的版本html-loader

它默认处理html中的为require("./image.png")，同时需要在你的配置中指定image文件的加载器，比如：url-loader或者file-loaderurl-loader file-loader

用于解决项目中的图片打包问题，把图片资源打包进打包文件中，可修改对应的文件名和路径，url-loader比file-loader多一个可配置的limit属性，通过此参数，可配置若图片大小大于此参数，则用文件资源，小于此参数则用base64格式展示图片；style-loader css-loader

打包css文件并插入到html文件中；单页面打包webpack.config.js的配置const HtmlWebpackPlugin = require("html-webpack-plugin");

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const {

CleanWebpackPlugin

} = require('clean-webpack-plugin');

const path = require("path");

module.exports = {

mode: "development",

entry: path.resolve(__dirname, './src/index.js'),

output: {

filename: "bundle.js",

path: path.resolve(__dirname, 'build'),

// libraryTarget: 'umd'

},

module: {

rules: [{

test: /\.html$/,

use: [{

loader: "html-loader",

options: {

attrs: ['img:src', 'link:href']

}

}]

},

{

test: /\.js$/,

use: {

loader: "babel-loader"

},

include: path.resolve(__dirname, '/src'),

exclude: /node_modules/,

},

{

test: /\.(jpg|png|gif|bmp|jpeg)$/,

use: [{

// loader: 'file-loader',

loader: 'url-loader',

options: {

limit: 8192,

// name: '[name].[ext]',

name: '[name]-[hash:8].[ext]',

outputPath: 'images/',

}

}]

},

{

test: /\.pug$/,

use: {

loader: 'pug-loader'

}

},

{

test: /\.css$/,

use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader']

},

],

},

plugins: [

new CleanWebpackPlugin(),

new HtmlWebpackPlugin({

hash: true,

template: "src/index.html",

// template: "src/index.pug",

filename: "bundle.html",

}),

new MiniCssExtractPlugin({

filename: "bundle.css",

chunkFilename: "index.css"

}),

],

}

多页面

在plugin中，有多个html-webpack-plugin插件的使用，可生成对应的打包后多个html文件多页面打包webpack.config.js的配置const getPath = require('./getPath')

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

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const {

CleanWebpackPlugin

} = require('clean-webpack-plugin');

const path = require("path");

module.exports = {

mode: "development",

entry: {

main: './src/main/main.js',

side: './src/side/side.js',

// ...getPath.jsPathList,

},

output: {

path: path.resolve(__dirname, 'build'),

filename: 'js/[name].js',

publicPath: '../',

},

module: {

rules: [{

test: /\.html$/,

use: [{

loader: "html-loader",

options: {

attrs: ['img:src', 'link:href']

}

}, ]

},

{

test: /\.js$/,

use: [{

loader: "babel-loader",

options: {

presets: ['es2015']

}

}],

include: path.resolve(__dirname, '/src'),

exclude: /node_modules/,

},

{

test: /\.(jpg|png|gif|bmp|jpeg)$/,

use: [{

// loader: 'file-loader',

loader: 'url-loader',

options: {

limit: 8192,

name: '[name]-[hash:8].[ext]',

outputPath: './images', //指定放置目标文件的文件系统路径

publicPath: '../images',//指定目标文件的自定义公共路径

}

}]

},

{

test: /\.pug$/,

use: {

loader: 'pug-loader'

}

},

{

test: /\.css$/,

use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader']

},

]

},

plugins: [

new CleanWebpackPlugin(),

//输出html文件1

new HtmlWebpackPlugin({

hash: true,

template: "./src/main/main.html", //本地html文件模板的地址

filename: "html/main.html",

chunks: ['main'],

}),

new HtmlWebpackPlugin({

hash: true,

template: "./src/side/side.html",

filename: "html/side.html",

chunks: ['side'],

}),

// ...getPath.htmlPathList,

new MiniCssExtractPlugin({

filename: "css/[name].css",

chunkFilename: "./src/[name]/[name].css"

}),

]

}

当然也可以通过函数获取所有需要打包的文件的路径，动态在webpack的配置文件中插入const glob = require("glob");

const path = require("path");

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

/**

*

* @param {string}globPath 文件的路径

* @returns entries

*/

function getPath(globPath) {

let files = glob.sync(globPath);

let entries = {},

entry, dirname, basename, extname;

files.forEach(item => {

entry = item;

dirname = path.dirname(entry); //当前目录

extname = path.extname(entry); //后缀

basename = path.basename(entry, extname); //文件名

//文件路径

if (extname === '.html') {

entries[basename] = entry;

} else if (extname === '.js') {

entries[basename] = entry;

}

});

return entries;

}

const jsPath = getPath('./src/*/*.js');

const htmlPath = getPath('./src/*/*.html');

const jsPathList = {};

const htmlPathList = [];

console.log("jsPath", jsPath)

Object.keys(jsPath).forEach((item) => {

jsPathList[item] = path.resolve(__dirname, jsPath[item])

})

Object.keys(htmlPath).forEach((item) => {

htmlPathList.push(new HtmlWebpackPlugin({

hash: true,

template: htmlPath[item],

filename: `html/${item}.html`,

chunks: [item],

// chunks: [item, 'jquery'],

}))

})

// console.log("htmlPathList", htmlPathList)

module.exports = {

jsPathList,

htmlPathList

}

经过打包之后，某个文件夹下的html、css、jpg文件，会被分别打包放进build文件夹下的html文件夹、css文件夹和images文件夹，并且在html文件中引用的其他资源文件也加上了hash值作为版本号。

坑：刚开始的时候url-loader和file-loader都是安装最新版本的，导致打包后图片的路径变成了

所以此项目用的"url-loader": "^2.1.0","file-loader": "^4.2.0"

原文链接：https://segmentfault.com/a/1190000021159257?utm_source=sf-similar-article