上节,我们把一个js文件放到了内存加载,那么我们想把HTML也放在里面加载怎么办?这时,就需要用到一个新的插件html-webpack-glugin
本地安装 cnpm i html-webpack-plugin -D
安装好之后 webpack.config.js 导入这个插件
const htmlWebpackPlugin=require('html-webpack-plugin')
plugins:[
new htmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html'
})
],
88去掉
然后npm run dev
这时打开的HTML就是内存中的HTML了,而且我们也不用引入js文件了,插件已经自动帮我们吧就是插入到HTML中了。
2.css文件我们也不用在HTML直接引入,该怎么让webpack识别呢?
先在css文件夹建立一个index.css文件,然后在main.js 我们把样式表引入
import './css/index.css'
安装cnpm i style-loader css-loader -D
安装好之后,webpack.config.js 开始配置
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']}
]
}
npm run dev刷新 这回可以看到样式应用上去了。
3.我们的一些图片无法正常引入怎么办?这时就需要另外的插件了
安装 cnpm i url-loader file-loader -D
安装好之后,webpack.config.js 开始配置