基本介绍导入文件//a.jsrequire('./b.js')require('style-loader!css-loader!./a.css')打包文件//cliwebpackhello.jshello.bundle.js--module-bind'css=style-loader!css-loader!'预览html//htmlwebpack选项参数--watch--progress--display-modules--display-reasons--color--display-error-details基本配置createprojectmkdirwebpack-democdwebpack-demonpminitnpminstallwebpack--save-devmkdirsrcmkdirdistvsc//vscode创建html并引入bundle.js创建webpack.config.js//参考官网配置API//Modularoutputmodule.exports={//entry:'./src/script/main.js',output:{path:'./dist/js',filename:'bundle.js'},}//cliwebpack--configwebpack.dev.config.js//指定config文件为webpack.dev.config.js//详细解释三种类型的entry和outputentry：单个字符串、数组、对象输出根据不同而不同entry[array]main和sub-main被打包成bundlemodule.exports={entry:['./src/script/main.js','./src/script/sub-main.js'],output:{path:'./dist/js',filename:'bundle.js'},}【Object】--多页面应用main，打包成bundlemodule。exports={entry:{page1:'./src/script/main.js',page2:['./src/script/main.js','./src/script/sub-main.js'],},output:{path:'./dist/js',//【placeholder】只有本次chunkhash静态资源变化后hash才会变化filename:'[name]-[hash]-[chunkhash].js'},}使用插件html-wabpack-plugin功能：同步html中引入的js的chunkhash//clinpminstallhtml-wabpack-plugin--save-dev//webpack.config.jsvarhtmlWebpackPlugin=require('html-wabpack-plugin')module.exports={//context的默认环境是脚本当前运行的目录//context:entry:{page1:'./src/script/main.js',page2:['./src/script/main.js','./src/script/sub-main.js'],},output:{path:'./dist',//jsfilename:'js/[name]-[hash]-[chunkhash].js',//线上环境publicPath:'http://m.mi.com/'},//所有插件输出到output.pathplugin:[//初始化插件并传入相关参数newhtmlWebpackPlugin({//上下文环境以根目录html为Templatetemplate:'index.html',filename:'index-[hash].html',inject:'head',//如果不配置，默认放在body标签中//传参给html,//在html中使用<%=htmlWebpackPlugin.options.title%>接收title:'haha',//date:newDate(),//压缩html删除注释和空格minify:{removeComments:true,collapseWhitespace:true}});]}<%for(varkeyinhtmlWebpackPlugin.files){%><%=key%>:<%=JSON.stringify(htmlWebpackPlugin.files[key])%><%}%><%for(varkeyinhtmlWebpackPlugin.options){%><%=key%>:<%=JSON.stringify(htmlWebpackPlugin.files[key])%><%}%>
