webpack入门——loader
1.安装
npm install file-loader -D
2.webpack.config.js配置
// 引入核心模块
const path = require('path')
const webpack = require('webpack')
module.exports = {
mode: 'production', //打包后是压缩的代码
// mode: 'development', //打包后是不压缩的代码
// entry: './src/index.js', //写法1,打包哪个文件,打包文件入口
entry: {
main:'./src/index.js', //写法2,打包哪个文件,打包文件入口
},
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'file-loader'
}
},{
test: /\.vue$/,
use: {
loader: 'vue-loader'
}
}]
},
output:{
//把打包好的文件
filename:'bundle.js', //打包好的文件叫什么名字
path: path.resolve(__dirname,'dist') //打包好的文件放在哪个文件夹下,要跟一个绝对路径,__dirname代表的是webpack.config.js所在的当前目录的路径
}
}
3.引入要打包的图片
这是我src下放的一张图片,打包后在dist文件夹下的index.html下引入我打包的文件bundle.js便可看到图片
4.进行webpack打包,我在package.json配置的是运行npm run bundle打包,打包之后就可以在页面上看到对应的图片了