webpack教程之webpack.config.js配置文件
更新时间：2017年07月05日 14:45:31 作者：herozhou工巧
本篇文章主要介绍了webpack教程之webpack.config.js配置文件 ，具有一定的参考价值，有兴趣的可以了解一席
首先我们需要安装一个webpack插件html-webpack-plugin,该插件的作用是帮助我们生成创建html入口文件。执行如下命令
npm install html-webpack-plugin --save-dev
在项目app目录下建立component.js文件,写入如下代码
export default (text='hello world')=>{
const element=document.createElement('div');
element.innerHTML=text;
return element;
}
在根目录下创建webpack.config.js文件
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const PATHS={
app:path.join(__dirname,'app'),
build:path.join(__dirname,'build'),
};
module.exports = {
entry: {
app:PATHS.app,
},
output: {
path:PATHS.build,
filename: "[name].js"
},
plugins: [
new HtmlWebpackPlugin({
title: 'webpack demo',
})
]
};
打开命令行，切换到项目目录下，执行webpack命令。
这就代表着打包成功，看下我们多出的index.html文件。
首先我们需要安装一个webpack插件html-webpack-plugin,该插件的作用是帮助我们生成创建html入口文件。执行如下命令
npm install html-webpack-plugin --save-dev
在项目app目录下建立component.js文件,写入如下代码
export default (text='hello world')=>{
const element=document.createElement('div');
element.innerHTML=text;
return element;
}
在根目录下创建webpack.config.js文件
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const PATHS={
app:path.join(__dirname,'app'),
build:path.join(__dirname,'build'),
};
module.exports = {
entry: {
app:PATHS.app,
},
output: {
path:PATHS.build,
filename: "[name].js"
},
plugins: [
new HtmlWebpackPlugin({
title: 'webpack demo',
})
]
};
打开命令行，切换到项目目录下，执行webpack命令。
这就代表着打包成功，看下我们多出的index.html文件。
看下我们的build/app.js
可以看到我们的index.js代码和component.js经过了webpack特殊的处理。
用浏览器打开index.html可以看到如下效果
即为成功。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要详细介绍了JS合并两个数组的方法，文中有详细的代码示例，对我们学习JS有一定的帮助，感兴趣的同学可以参考一下2023-06-06
FireFox中textNode分片的问题...2007-04-04
Javascript函数缓存是一种提高网页性能的重要技术,通过将函数结果存储在缓存中,避免重复计算,从而提高页面加载速度和响应速度,本文主要介绍了Javascript函数缓存的实现及应用场景,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了微信小程序弹幕纯编码实现,这种效果是非视频底，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
JAVASCRIPT style 中visibility和display之间的区别
visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示（visible表示显示，hidden表示隐藏）。2010-01-01
这篇文章主要介绍了js如何操作localstorage，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
对于生成缩略图一般做法是通过后端语言php等来生成，但是为了给服务器减压，我们或许可以从前端来着手，先生成好不同尺寸的缩略图，传给后端，而后端只需要将前端传过来的图片进行存储就好了2020-10-10
但是最近由于开发人手不够,一个人开启全栈,一边写接口一边写页面,刚好项目中有一个需求,所以尝试使用自定义组件开发这块,下面这篇文章主要给大家介绍了关于微信小程序学习之常用的视图组件的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了JS实现点击链接切换显示隐藏内容的方法,涉及javascript鼠标事件响应及页面元素属性动态变换相关操作技巧,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了JS+DIV实现的卷帘效果,结合具体实例形式对比分析了javascript响应鼠标事件动态操作页面元素属性实现展开与折叠效果的相关操作技巧,需要的朋友可以参考下2017-03-03
最新评论