写本记时(2018-06-25)的各版本
"webpack": "^4.6.0" //可直接使用4x以上的开发模式,刷新很快
"webpack-dev-server": "^3.1.4" //当天安装
"html-webpack-plugin": "^3.2.0", //当天安装
如果要使用es6,先看其它教程安装好babel,这里主要记录基于html-webpack-plugin的多页面配置
首先装好html-webpack-plugin
在webpack.config.js 配置2个入口文件,和滤镜中2个出口文件(即生成2个页面)
entry : { index : __dirname + '/src/index.js', main : __dirname + '/src/main.js' }, plugins:[ new HtmlWebpackPlugin({ template: __dirname + "/index.html", filename:'index.html', //引入打包后的js的script标签所在的位置,这里表示放在head标签中,默认放文件尾部 inject:'head', //指定html中title标签,要先在html中配置变量 title:'哈哈', //指定上面entry中的js入口块 chunks:['index'], //上线时减小html代码的规格,压缩代码 minify:true }), new HtmlWebpackPlugin({ template: __dirname + "/main.html", filename:'main.html', title:'嘿嘿', chunks:['main'] }) ]
打包命令:webpack
关于webpack 4.x以上的开发模式(快速自动刷新)
在package.json里面script中加入一条:
"dev": "webpack-dev-server --mode development",
然后运行cnpm run dev