我们先在 src/assets/img/ken.png
在 src/components/layer/layer.scss 引入图片
.layer {
height: 100px;
width: 100px;
background: url('../../assets/img/ken.png');
color: #ffffff;
display: flex;
}
现在直接 运行 npm run webpack.app
这时我们需要安装一些处理 图片的 loader
npm install file-loader image-loader url-loader --save-dev
再运行一遍 npm run webppack.app
我们发现已经将图片引入进来了
这个 file-loader 是处理 css样式中的 图片地址,index.html的图片地址相对路径没有问题,但是如果处理 组件中的 图片的相对路径是会有一些问题,需要借助 require()
<img :src="require('../src/bg.png')" />
我们再来处理一下打包之后存放的位置,需要配置一下 webpack.app.config.js
let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
return path.resolve(__dirname, o)
}
module.exports = {
entry: resolve('src/app.js'), // 指定入口文件
output: {
path: resolve('dist'),
// filename: '[name]-[hash].js'
filename: "js/[name].bundle.js",
// publicPath: ''
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: resolve('node_modules'), //指定排除的范围,
include: resolve('src')
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader!postcss-loader'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!postcss-loader!sass-loader'
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!postcss-loader!less-loader'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
query: {
name: "assets/img/[name].[hash].[ext]"
}
}
]
},
plugins: [
new htmlWebpackPlugin({
// filename: "index-[hash].html",
// filename: 'index-[chunkhash].html',
filename: "index.html", // 生成 dist/a.html
template: 'index.html', // 指定根目录下的 index.html
inject: 'body',
})
]
}
运行 npm run webpack.app
嗯,今天图片处理就到此为止吧,接下来,来一篇总结吧。