前言:通过前面的学习,已经知道如何打包js和json文件,也了解了如何配置打包样式文件的loader但是之前我们都是手动的创建html,并且手动的引入打包后的js文件,这样会有一定的不便,因此接下来就一起看看webpack是如何处理html文件的1.安装使用处理html的插件说明:webpack打包html文件资源,不是使用loader而是使用插件使用html-webpack-plugin插件自动生成html文件1.1下载插件yarnaddhtml-webpack-plugin-D1.2配置插件在webpack.config.js中配置插件说明引入下载好的插件在plugins中配置插件代码如下://1.引入处理html插件,constHtmlWebpackPlugin=require(html-webpack-plugin)const{resolve}=require(path);module.exports={entry:./src/main.js,output:{filename:bundle.js,path:resolve(__dirname,dist)},module:{rules:[{test:/\.css$/,use:[style-loader,css-loader]}]},//配置插件plugins:[//配置处理html插件newHtmlWebpackPlugin()],mode:development}1.3打包结果说明通过webpack命令打包会发现打包后的index.html是一个空的html文件,没有其他结构内容因为插件html-webpack-plugin是自动创建一个新的html文件,并自动引入bundle.js因此我们自己开发的index.html内容并没有处理到打包后的html文件中配置代码如下:constHtmlWebpackPlugin=require(html-webpack-plugin)const{resolve}=require(path);module.exports={//...plugins:[newHtmlWebpackPlugin({//配置html打包模板template:./src/main.html})]//...}2.将我们自己写html内容插入打包后的html文件2.1说明src文件夹使我们开发文件夹,因此我们可能会在这个文件夹中开发html文件内容但是html-webpack-plugin会在打包的dist目录中生成新的html文件,新生成的文件中,不包含我们开发的html文件内容如果我们需要将自己开发的html内容也插入到打包后的html文件中,就需要配置2.2在src文件中新建html,并开发内容bodydivHelloWorld/div/body2.3在webpack.config.js配置插件在webpack.config.js的插件html-webpack-plugin中配置html模板将我们开发的html文件中的内容插入到plugin生成的html文件中代码如下:constHtmlWebpackPlugin=require(html-webpack-plugin)const{resolve}=require(path);module.exports={//...plugins:[newHtmlWebpackPlugin({//配置html打包模板template:./src/main.html})]//...}此时,打包后,查看dist目录中index.html文件中就拥有了我们开发的内容3.配置本地webpack3.1为什么需要配置本地webpackwebpack版本的不同,可能会对项目造成影响项目是多人协同开发,如果每一个人电脑都全局安装不同的webpack,会导致项目配置出问题因此需要配置项目本地webpack,以及配置脚本运行webpack命令3.2下载配置本地webpack下载本地webpack$yarnaddwebpackwebpack-cli-D3.3配置脚本命令配置脚本命令使用webpack打包说明在所有的终端里使用webpack命令,默认都是全局安装的webpack项目为了保证统一,需要使用项目本地webpack进行打包脚本中运行的webpack是使用本地webpack命令在package.json中配置脚本命令scripts:{test:echo\Error:notestspecified\exit1,build:webpack},配置完成以后就可以使用npmrunbuild命令来使用本地webpack了
转载请注明：http://www.aierlanlan.com/rzdk/7965.html
