webpack配置（第四步：html篇（基础篇））

2019独角兽企业重金招聘Python工程师标准>>>

关于webpack的项目文件：https://gitee.com/codeFarmerPen/webpack

第一步：下载插件

$ cnpm install html-webpack-plugin --save-dev

第二步：配置webpack.config.js

const path = require('path');
let htmlwebpackplugin = require('html-webpack-plugin');//引入html-webpack-plugin插件 
let export_html= {
    entry:  {
    	main:__dirname+"/app/js/main.js",//入口文件
    },
    output: {
        path: __dirname+"/_build/",
        filename: "js/[name].js",//产出文件，name根据entry的入口文件键名定
    },
    module: {
        loaders: [
			{
			    test: /(\.jsx|\.js)$/,
			    loader: 'babel-loader',
			    query: {
			      presets: ['es2015']
			    }
			},
        ]
    }
    ,
 	plugins: [
 		//new一个模板出来
　　		new htmlwebpackplugin({
	        template: './app/home.html',//入口文件
	        filename:  'home.html',//产出文件
		})
 	]
    
};
module.exports=export_html;	

测试：打开cmd到项目目录输入：webpack

app下的home.html,在_build下也生成了一个home.html

app/home.html:

_build/home.html:

可以看到，生成的文件多了一个引入main.js的script；

这是因为没有对产出文件做限制的话，它会引入所有产出的JS文件。这个可以在entry入口多引入一个js文件测试。

 

下面是我关于webpack配置的所有链接

webpack配置（第一步：配置前提）：https://my.oschina.net/u/3797834/blog/1648528

webpack配置（第二步：入门篇）：https://my.oschina.net/u/3797834/blog/1648578

webpack配置（第三步：ES6篇）：https://my.oschina.net/u/3797834/blog/1649033

webpack配置（第四步：html篇（基础篇））：https://my.oschina.net/u/3797834/blog/1649157

webpack配置（第四步：html篇（进阶篇））：https://my.oschina.net/u/3797834/blog/1649196

webpack配置（第四步：html篇（模板篇））：https://my.oschina.net/u/3797834/blog/1649246

webpack配置（第五步：less/css篇（基础篇））：https://my.oschina.net/u/3797834/blog/1649270

webpack配置（第五步：less/css篇（进阶篇））：https://my.oschina.net/u/3797834/blog/1649288

webpack配置（第五步：less/css篇（url图片篇））：https://my.oschina.net/u/3797834/blog/1649302

 

转载于:https://my.oschina.net/u/3797834/blog/1649157