欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack踩坑记录

程序员文章站 2022-04-14 09:17:17
...

最近在学习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中的<img src="image.png">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都是安装最新版本的,导致打包后图片的路径变成了<img src="[object Module]"/>
所以此项目用的"url-loader": "^2.1.0","file-loader": "^4.2.0"

点击打开项目github地址

webpack踩坑记录

相关标签: 前端 webpack