webpack踩坑记录
最近在学习webpack的一些配置，学习的期望就是通过可以通过webpack给html文件中引用的资源例如css、js、img文件加上版本号，避免由于浏览器的缓存造成线上请求的资源依旧是旧版本的东西。
首先新建一个webpack的项目(默认大家已经安装node的了)
npm init
项目中安装webpack
npm 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-loader
- url-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"
点击打开项目github地址
