Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to convert webpack pictures into base64, the content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Download url-loader yarn add-D url-loadermodule: {rules: [{test: /\. (jpeg | jpg | png | svg | gif) $/, use: {loader: 'url-loader', / / default is es6 module options: {/ / configure esModule: false, / / use common.js specification outputPath:' images' / / output file directory name: 'images/ [contenthash: 4] .[ ext]', limit: 20cm 1024 / / convert from 20k to base64}]}

You can see that the small picture has been converted to base64.

The complete code / / webpack is based on node, so use module.exportsconst path = require ("path"); let HtmlWebpackPlugin = require ("html-webpack-plugin"); / / generate html template const {CleanWebpackPlugin} = require ("clean-webpack-plugin"); / / clear distconst MiniCssExtractPlugin = require ("mini-css-extract-plugin") before each package / / merge css// const OptimizeCssAssetsWebpackPlugin = require ("optimize-css-assets-webpack-plugin") / / compress cssconst CssMinimizerWebpackPlugin = require ("css-minimizer-webpack-plugin"); / / latest compress cssconst TerserWebpackPlugin = require ("terser-webpack-plugin"); / / compress js instead of uglify because uglifyjs does not support es6 syntax, so use terser-webpack-plugin instead of uglifyjs-webpack-pluginconst webpack = require ("webpack") / / there is a ProvidePlugin inside, which can provide the global variable const commonCssConfig = [/ / Public css configuration MiniCssExtractPlugin.loader, "css-loader", {loader: "postcss-loader", options: {/ / css compatibility configuration postcssOptions: {plugins: [[require ("postcss-preset-env") ()]],},] / / Public babel transcoder configuration const babelConfig = {loader: 'babel-loader', options: {presets: ["@ babel/preset-env"], "plugins": [["@ babel/plugin-proposal-decorators", {"legacy": true}] ["@ babel/plugin-proposal-class-properties"]}} / / Public plugin plug-in configuration const commonPlugin = [/ / html-webpack-plugin new HtmlWebpackPlugin ({template: ". / src/index.html", / / specify template filename: "index.html", / / specify output file name}), / / new HtmlWebpackPlugin ({/ / multiple templates / / template:'. / src/index.html') / / specify the template / / filename: 'main.html', / / specify the file name of the output / /}), / / clean-webpack-plugin new CleanWebpackPlugin (), / / use this plug-in before each dist directory is generated Delete the dist directory / / mini-css-extract-plugin new MiniCssExtractPlugin ({/ / extract the css and put it in the public folder filename: "css/ [name]. [hash: 4] .css", / / merge the public files of css}), / / css-minimizer-webpack-plugin new CssMinimizerWebpackPlugin () / / the new version of compressed css / / terser-webpack-plugin new TerserWebpackPlugin ({/ / compressed js test: /\ .js (\?. *)? $/ I, / matches the file participating in the compression parallel: true, / / uses multiple processes to run concurrently terserOptions: {/ / Terser compression configuration output: {comments: false}, compress: {/ / pure_funcs: ["console.log"] / / remove console.log},}, extractComments: true, / / split comments into a separate file}), / / inject global variables For global use, there is no need to introduce new webpack.ProvidePlugin ({$: "jquery"})] module.exports = {/ / old compressed css / / optimization: {/ / minimizer: [new OptimizeCssAssetsWebpackPlugin] / /}, / / portal configuration entry: ". / src/index.js", / / mode configuration mode: "production", / / specify mode, default is production mode The development mode makes it easy to view the code / / export configuration output: {path: path.resolve (_ _ dirname, "dist"), / / _ _ dirname represents the root directory M:\ 47-webpack-study\ 01-webpack\ dist filename: "js/ [name]. [hash: 4] .js", / / specify the output file name / / [name] is the dynamic name, plus the hash value To avoid caching, the default is 20-bit hash value / * hash: for example, when the file is first packaged, the file will be cached by the browser and the second time it is packaged. If the file name remains the same, the browser will not download the latest code, so hash is useful. Hash is also called content hash value. As long as the content changes, hash will change and will not be cached. Keep updated status at all times * /}, / / webpack-dev-server configure devServer: {host: "localhost", / / host port: "9527", / / port open: true, / / automatically open historyApiFallback: true, / / cannot find page default jump index.html compress: true, / / all services enable gzip compression hot: true / / launch hot update proxy: {/ / Agent configuration "/ api": {target: "http:localhost:5000", changeOrigin: true,}, / / Loader configuration module: {rules: [{test: /\ .html $/, use: 'html-withimg-loader' / / use plug-ins for pictures in html}, {test: /\ .js $/, use: babelConfig / / babel transcoder configuration}, {test: /\ .css $/, use: [... commonCssConfig], / / css order is from right to left From bottom to top}, {test: /\ .less $/, use: [... commonCssConfig,'less-loader'], / / less is from right to left, bottom to top}, {test: /\ .scss $/, use: [. CommonCssConfig, "sass-loader"], / / sass is from right to left From bottom to top}, / / {/ / test: /\. (jpeg | jpg | png | svg | gif) $/, / use: {/ / loader: 'file-loader', / / default is es6 module / / options: {/ / configure / / esModule: false, / / use common.js specification / / outputPath:' images' / / output file directory / / name: 'images/ [contenthash: 4] .[ ext], / /} / /} {test: /\. (jpeg | jpg | png | gif) $/, use: {loader:' url-loader' / / default is es6 module options: {/ / configure esModule: false, / / use common.js specification outputPath: 'images', / / output file directory name:' images/ [contenthash: 4] .[ ext]' Limit: 20cm 1024 / / convert to base64 < 20k}],}, / / plug-in configuration plugins: [... commonPlugin], / / exclude third-party package externals: {jquery:'$',}} The picture is not formatted in base64 in Webpack.

In the development process, pictures into base64 is a common thing, such as uploading pictures, but in some cases do not want to convert pictures into base64, because converted into base64 pictures are not easy to distinguish, it is not possible to do some other operations according to the picture name, so how to prohibit pictures in Webpack to convert to base64?

In fact, it is very simple, you only need to modify the configuration file webpack.base.conf.js of Webpack, and change the limit of options for image processing in rules under module to 1, as shown in the following figure.

On how to achieve webpack pictures into base64 to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.