博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
webpack配置(第四步:html篇(基础篇))
阅读量:7223 次
发布时间:2019-06-29

本文共 1236 字,大约阅读时间需要 4 分钟。

hot3.png

关于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配置(第一步:配置前提):

webpack配置(第二步:入门篇):

webpack配置(第三步:ES6篇):

webpack配置(第四步:html篇(基础篇)):

webpack配置(第四步:html篇(进阶篇)):

webpack配置(第四步:html篇(模板篇)):

webpack配置(第五步:less/css篇(基础篇)):

webpack配置(第五步:less/css篇(进阶篇)):

webpack配置(第五步:less/css篇(url图片篇)):

 

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

你可能感兴趣的文章
duilib 设计界面 初体验(附超链接开发)
查看>>
jvm内存区域
查看>>
IOS--常用控件--UIScrollView
查看>>
能够使开发和调试更为方便的java日志框架
查看>>
冷门Javascript API——element.insertAdjacentHTML
查看>>
绘制希尔伯特曲线
查看>>
LOJ 572 「LibreOJ Round #11」Misaka Network 与求和——min_25筛
查看>>
test
查看>>
[精华][推荐]CAS SSO单点登录服务端客户端实例
查看>>
「hadoop」ssh
查看>>
pulseaudio备注
查看>>
PAT1064 Complete Binary Search Tree (30)(BST)
查看>>
FPGA负数的右移 计算
查看>>
ti processor sdk linux am335x evm /bin/create-sdcard.sh hacking
查看>>
转 Redis 总结精讲 看一篇成高手系统-4
查看>>
第一节:神经网络和深度学习
查看>>
HTML5_1
查看>>
node-webkit连接mysql
查看>>
HDU 1003:Max Sum
查看>>
【Spring】application.xml文件配置
查看>>