标签：jpg ade end dev 文件的 file span web img
webpack4.x
│ package.json │ webpack.config.js │ yarn.lock │ ├─dist │ 1f871aa58.png │ bundle.js │ index.html │ ├─node_modules └─src ├─img │ 1.png │ └─js app.js
//创建img标签，并使用引入的图片文件 let src = require(‘../img/1.png‘); let img = new Image(); img.src = src; img = document.querySelector("body").appendChild(img);
package.json
{ "name": "file", "version": "1.0.0", "main": "index.js", "license": "MIT", "devDependencies": { "file-loader": "^4.0.0", "webpack": "^4.33.0", "webpack-cli": "^3.3.3" } }
webpack.config.js
const path = require(‘path‘); module.exports = { entry: { app: ‘./src/js/app.js‘ }, output: { filename: ‘bundle.js‘, path: path.join(path.resolve(__dirname), ‘dist‘) }, mode: ‘development‘, module: { rules: [{ test: /\.(jpg|png|gif)$/, use: { loader: ‘file-loader‘, options: { name: ‘[name][hash:8].[ext]‘ } } }] } };
package.json
{ "name": "file", "version": "1.0.0", "main": "index.js", "license": "MIT", "devDependencies": { "file-loader": "^4.0.0", "url-loader": "^2.0.0", "webpack": "^4.33.0", "webpack-cli": "^3.3.3" } }
webpack.config.js
const path = require(‘path‘);
module.exports = {
entry: {
app: ‘./src/js/app.js‘
},
output: {
filename: ‘bundle.js‘,
path: path.join(path.resolve(__dirname), ‘dist‘)
},
mode: ‘development‘,
module: {
rules: [
{
test: /\.(jpg|png|gif)$/,
use : {
loader : ‘url-loader‘,
options : {
limit : 2 * 1024,
name: ‘[name][hash:8].[ext]‘
}
}
}]
}
};
npx webpack
标签：jpg ade end dev 文件的 file span web img
原文地址：https://www.cnblogs.com/heidekeyi/p/10991213.html
