webpack3----html-webpack-plugin、loader、url-loader

上节，我们把一个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 开始配置

{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader'}

这时，图片就可以正常加载了！

好了 本节课已完成，我们继续下节···