webpack打包html,htmlmain标签作用

webpack打包html,htmlmain标签作用

使用webpack打包html文件需要在plugin中配置，npm下载html-webpack-plugin 插件，随后引入等操作/*loader: 1. 下载2. 使用(配置loader) plugins: 1. 下载1.3 打包结果说明通过webpack命令打包会发现打包后的index.html是一个空的html文件，没有其他结构内容因为插件html-webpack-plugin是自动创建一个新的html文

＋▂＋ 其实我们通过html-webpack-plugin插件也可以完成html打包首先安装插件npm install --save-dev html-webpack-plugin 在webpack.config.js中配置html-webpack-plugin //引入htwebpack-plugin //默认会创建一个空的html文件，引入打包输出的所有资源(JS/CSS) //需求：需要有结构的html文件new HtmlWebpackPlugin({ //复制'./src/index.html'文件，并自动引入所

html-webpack-plugin 插件也允许我们使用html模板，这样我们就可以在html文件中定义自己喜欢的内容了。要使用html 模板其实也很简单，只需要在webpack.config.js 配置文件的HtmlWebpackPlugin output:{filename:"bundle.js",path: resolve(__dirname,"dist")},module: {rules:[{test: /\.css$/,use:["style-loader","css-loader"]}]},// 配置插件plugins:[// 配置处理html

今天我们主要来看一看webpack如何对html文件进行打包首先，既然是通过插件打包，那么我们就应该先安装插件，1:安装插件：html-webpack-plugin -D 只在开发的时候用2:在webpack运行webpack -v 报错，则以管理员身份运行webstorm 或vscode ,终端运行set-ExecutionPolicy RemoteSigned,以后可以不需管理员身份打开项目了。安装html-webp

webpack 1 我们在终端打包6.打包完成生成一个index文件7.在文件中写入其他内容但是当我们需要写入别的东西时我们还是需要在自己的src下面创建一个index.html里面也可以看到我们1.上面讲了打包js文件，这些打包出来的js文件需要引入到html文件中，如果一个个都需要我们手动在html中加入script标签来引用就麻烦了。这里用webpack打包html的