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'}


这时,图片就可以正常加载了!


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容