你直接用vue的脚手架,看看有没有问题,vue的脚手架这些都配置好了,如果vue的没有问题,你就可以对着vue那些配置,看看你哪里写错了。
这个问题困扰好几个月了,没解决,就因为这个问题没解决,webpack放弃学下去了。
现在问题是: webpack在页面中用img标签引入图片,打包后图片路径 还是没变,原样输出了(<img src="./src/common/img/test.jpg" alt=""> 因为打包后不存在src目录 ,所以出错)
我把代码打包上传,你们下载后 先npm install ,安装依赖,然后启动用 npm start , 打包用 npm run dev,
index.html:
<p>我是直接在页面中用img标签加入的图片</p>
<img src="./src/common/img/test.jpg" alt="">
<div class="box" id='root'></div>
webpack.config.js 如下:
const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: "static/js/main.js",
//所有资源的基础路径,而且一定要以 / 结尾
publicPath: ""
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html'
}),
new cleanWebpackPlugin(['dist']),
new ExtractTextPlugin({
filename: 'static/css/[name]-[hash:4].css'
}),
new UglifyJSPlugin() //js压缩
],
module: {
rules: [{
test: /\.js$/,
use: [{
loader: 'babel-loader'
}],
exclude: [path.resolve(__dirname, 'node_modules')]
},
/*{
test: /\.css$/,
use: ['style-loader','css-loader']
},*/
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
minimize: false //css压缩
}
}]
})
},
{
test: /\.(jpg|png|gif|jpeg)$/,
use: [{
loader: 'url-loader',
options: {
//大于10KB的图片将被生成base64
//loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于10000字节的图片正常打包,小于10000字节的图片以 base64 的方式引用。
limit: 10000,
name: 'static/img/[name]_[hash:8].[ext]'
}
}]
},
{
test: /\.(ttf|eot|woff|woff2|svg)$/,
use: ['file-loader']
}
/*{
test: /\.(html)$/,
use: [{
loader: 'html-loader',
options: {
attrs: ['img:src', 'img:data-src']
}
}]
}*/
]
},
devServer: {
open: true,
port: 8080,
publicPath: '/'
}
};
麻烦你们把代码 下载下来,把项目跑起来,看下问题吧, 我照着视频写的,却不行,我知道 解析页面中的图片,加这个配置:
{
test: /\.(html)$/,
use: [{
loader: 'html-loader',
options: {
attrs: ['img:src', 'img:data-src']
}
}]
}
但是我一加上去,就报错,如下:
我暂且 把这段配置注释掉了,我QQ是 595979939,如果有描述不清楚的,请加我Q找我, 跪求 大神们帮忙解决下,非常感谢!!!???
你直接用vue的脚手架,看看有没有问题,vue的脚手架这些都配置好了,如果vue的没有问题,你就可以对着vue那些配置,看看你哪里写错了。
看你的文件层级应该是路径没写对而已. 你确定路径是 './src/common/img/test.jpg' 而不是'./common/img/test.jpg'
Flowke 2018-03-05 18:12发表的内容:
看你的文件层级应该是路径没写对而已. 你确定路径是 './src/common/img/test.jpg' 而不是'./common/img/test.jpg'
juntaoshuai 2018-03-05 20:15发表的内容:
html 的图片引入路径改成'./common/img/test.jpg', 然后 webpack.config.js 的 html-loader 不要注释掉, 这个 loader 需要在 html-webpack-plugin 分析模板的时候用到这个 loader.
改完之后是能正常运行的.
这个样式里 背景图 路径不对, 打开后路径是这样:http://localhost:8085/static/css/static/img/test_6f1e514d.jpg
显示 不对, 请问下 要怎么改才正确?????还想问下 路径 怎么时候用相对路径,什么时候用绝对路径(从src目录)???
Flowke 2018-03-06 09:34发表的内容:
html 的图片引入路径改成'./common/img/test.jpg', 然后 webpack.config.js 的 html-loader 不要注释掉, 这个 loader 需要在 html-webpack-plugin 分析模板的时候用到这个 loader.
改完之后是能正常运行的.
juntaoshuai 2018-03-06 11:06发表的内容:
css里背景图路径 不对,要怎么写才可以????非常感谢
Flowke 2018-03-07 15:04发表的内容:
css 的图片不需要额外的语法引入, 使用正常的 css 语法. css-loader 会帮你正确引入的.Flowke 2018-03-07 15:04发表的内容:
css 的图片不需要额外的语法引入, 使用正常的 css 语法. css-loader 会帮你正确引入的.Flowke 2018-03-07 15:04发表的内容:
css 的图片不需要额外的语法引入, 使用正常的 css 语法. css-loader 会帮你正确引入的.Flowke 2018-03-07 15:04发表的内容:
css 的图片不需要额外的语法引入, 使用正常的 css 语法. css-loader 会帮你正确引入的.Flowke 2018-03-07 15:04发表的内容:
css 的图片不需要额外的语法引入, 使用正常的 css 语法. css-loader 会帮你正确引入的.Flowke 2018-03-07 15:04发表的内容:
css 的图片不需要额外的语法引入, 使用正常的 css 语法. css-loader 会帮你正确引入的.解决了,加了个publicPath 配置,完美解决,如下:
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
minimize: false //css压缩
}
}],
publicPath: '/'
})
}