1. 根目录下下载以下模块
npm i file-loader url-loader image-webpack-loader -D
2. 要操作的文件：
3. demo
- main.less
body {
background: url(../../static/xiao.jpg);
}
- main.js
require('./less/main.less');
- webpack.config.js
// 因为webpack里面有些路径配置, 必须是绝对路径, 导入这个模块是为了调用方法计算路径
const path = require('path');
const htmlWebapckPlugin = require('html-webpack-plugin');
// 配置文件要求我们必须导出一个配置对象
module.exports = {
// 入口
entry: path.resolve(__dirname, './src/main.js'),
// 输出
output: {
// 路径
path: path.resolve(__dirname, './dist'),
// 打包后js文件名
filename: 'bundle_[chunkhash:8].js'
},
// 插件配置
plugins: [
new htmlWebapckPlugin({
template: './src/index.html', // 要处理的html
filename: 'index.html', // 处理后的html名称
inject: 'body', // 自动注入js到什么地方
minify:{ // 压缩优化HTML页面
collapseWhitespace:true, // 合并空白字符
removeComments:true, // 移除注释
removeAttributeQuotes:true // 移除属性上的引号
}
})
],
// loader的作用是为了让webpack可以打包其他类型的模块
module: {
// 配置loader, 该配置选项是必须的
rules: [
// 打包url文件
{
test: /\.(png|jpg|gif|jpeg|svg)$/,
use: [
// 默认配置全部打包进来
// 'url-loader'
// 指定小于10kb的图片才转为base64编码打包
{loader: 'url-loader', options: {limit: 10240}}
]
}
]
}
};
- 在根目录执行webpack
webpack
