禁用 vue-cli webpack 编码图像 base64
Posted
技术标签:
【中文标题】禁用 vue-cli webpack 编码图像 base64【英文标题】:disable vue-cli webpack encoding image base64 【发布时间】:2017-08-16 21:29:22 【问题描述】:我只是尝试使用 webpack 模板的 vuejs,然后我意识到我页面中的每个图像都是用 data:image/png;base64 编码的 .. 出于某种原因,我认为我不想使用该功能
我没有设置.htaccess文件将图像编码为base64,所以我认为问题出在webpack,但我找不到任何与base64图像编码相关的webpack文件
我无法弄清楚如何禁用它,我已经尝试禁用一些我认为与我在 webpack 上的问题相关的组件,但它没有帮助.. 我错过了什么吗?
谁能帮帮我?
webpack.prod.conf.js
var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var htmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: config.build.env
var webpackConfig = merge(baseWebpackConfig,
module:
rules: utils.styleLoaders(
sourceMap: config.build.productionSourceMap,
extract: true
)
,
devtool: config.build.productionSourceMap ? '#source-map' : false,
output:
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
,
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin(
'process.env': env
),
new webpack.optimize.UglifyJsPlugin(
compress:
warnings: false
,
sourceMap: true
),
// extract css into its own file
new ExtractTextPlugin(
filename: utils.assetsPath('css/[name].[contenthash].css')
),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin(
cssProcessorOptions:
safe: true
),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin(
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify:
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
,
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin(
name: 'vendor',
minChunks: function (module, count)
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin(
name: 'manifest',
chunks: ['vendor']
),
// copy custom static assets
new CopyWebpackPlugin([
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
])
]
)
if (config.build.productionGzip)
var CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin(
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
)
)
if (config.build.bundleAnalyzerReport)
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
module.exports = webpackConfig
webpack.base.conf
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir)
return path.join(__dirname, '..', dir)
module.exports =
entry:
app: './src/main.js'
,
output:
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
,
resolve:
extensions: ['.js', '.vue', '.json'],
alias:
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
,
module:
rules: [
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options:
formatter: require('eslint-friendly-formatter')
,
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
,
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
,
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query:
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
,
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query:
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
]
vue-loader.conf
var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'
module.exports =
loaders: utils.cssLoaders(
sourceMap: isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
)
utils.js
var path = require('path')
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
exports.assetsPath = function (_path)
var assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
exports.cssLoaders = function (options)
options = options ||
var cssLoader =
loader: 'css-loader',
options:
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions)
var loaders = [cssLoader]
if (loader)
loaders.push(
loader: loader + '-loader',
options: Object.assign(, loaderOptions,
sourceMap: options.sourceMap
)
)
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract)
return ExtractTextPlugin.extract(
use: loaders,
fallback: 'vue-style-loader'
)
else
return ['vue-style-loader'].concat(loaders)
// http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
return
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', indentedSyntax: true ),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options)
var output = []
var loaders = exports.cssLoaders(options)
for (var extension in loaders)
var loader = loaders[extension]
output.push(
test: new RegExp('\\.' + extension + '$'),
use: loader
)
return output
config.js
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports =
build:
env: require('./prod.env'),
index: path.resolve(__dirname, '../../templates/index.html'),
assetsRoot: path.resolve(__dirname, '../../public'),
assetsSubDirectory: 'asset',
assetsPublicPath: '<?=$path?>',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
,
dev:
env: require('./dev.env'),
port: 8000,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: ,
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
【问题讨论】:
请分享您的 webpack 相关文件。 【参考方案1】:我遇到了同样的问题:我的一些图片是内联的,而另一些则不是。这似乎几乎是随机的。
原来,这是url-loader的一个特性,并不是vue-webpack特有的:
limit: Byte limit to inline files as Data URL
在问题 (webpack.base.conf) 中发布的配置中,url-loader 的限制设置为 10kb 的图像和字体:
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query:
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
,
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query:
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
可以通过将limit
设置为负数来禁用此功能,例如-1
:
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query:
limit: -1,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
,
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query:
limit: -1,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
【讨论】:
其实是完美的解决方案【参考方案2】:与 Phil 的回答类似,但无需替换整个规则,您可以在 vue.config.js 中将其用于 Vue CLI 3
module.exports =
chainWebpack: config =>
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options =>
options.limit = -1
return options
)
【讨论】:
你能解释一下 `options.limit = -1' 的作用吗? 可以通过将limit设置为负数来禁用此功能,例如-1【参考方案3】:这是一个旧线程,但对于 vue-cli 3,你必须处理它有点不同,也许有人正在寻找完全相同的问题。
vue.config.js
module.exports =
chainWebpack: config =>
// clear the existing images module
const imagesRule = config.module.rule('images');
imagesRule.uses.clear();
imagesRule
// you can set whatever you want or remove this line completely
.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
.use('file-loader')
.loader('file-loader')
.tap(options =>
return
...options,
limit: -1 // no limit
;
)
.end();
;
所有装载机https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/config/base.js
【讨论】:
【参考方案4】:您必须在您的 json 配置中尝试这一行
devtool: (process.env.NODE_ENV === 'production') ? 'cheap-module-source-map' : '#eval-source-map'
【讨论】:
以上是关于禁用 vue-cli webpack 编码图像 base64的主要内容,如果未能解决你的问题,请参考以下文章
查找我使用 vue-cli 生成的图像 Webpack-simple 和 Vuejs 的问题