webpack入门和使用
来源:互联网 发布:java虚拟机教程 编辑:程序博客网 时间:2024/06/18 02:18
1、首先安装node(官网都有https://nodejs.org/en/)
2、安装完node直接就安装了npm
3、安装webpack
3.1全局安装命令(
//全局安装npm install -g webpack
)3.2安装到项目路径中(
//安装到你的项目目录npm install --save-dev webpack
)开始操作:
1、npm init(生成package.json文件一直enter);
2、npm install --save-dev webpack ( 建议在本目录安装)
此时项目路径下的文件为
3、然后创建如上图的文件(main.js Greeter.js(app文件中) index.html(public文件中))此处的build.js是使用webpack生成的打包后的文件
index.html中的内容
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Sample Project</title> </head> <body> <div id='root'> </div> <script src="build.js"></script> </body></html>Greeter.js
// Greeter.jsmodule.exports = function() { var greet = document.createElement('div'); greet.textContent = "Hi there and greetings!"; return greet;};
main.js
//main.js const greeter = require('./Greeter.js');document.querySelector("#root").appendChild(greeter());创建完成之后在终端输入webpack app/main.js public/build.js(生成build文件)
终端结果为下图
阅读全文
1 0
- webpack入门和使用
- webpack入门使用
- 轻松入门React和Webpack
- 轻松入门React和Webpack
- webpack快速入门和实战
- 轻松入门React和Webpack
- 轻松入门React和Webpack
- 轻松入门React和Webpack
- 轻松入门React和Webpack
- webpack入门和基础配置
- webpack安装和使用
- webpack入门(二)——webpack使用
- webpack入门(二)——webpack使用
- (二)webpack入门——webpack的使用
- 使用webpack 使用Echarts3简单入门
- webpack入门(四)——webpack loader 和plugin
- webpack入门(四)——webpack loader 和plugin
- webpack使用--loader和插件
- 数字信号处理——卷积
- BoundGeoOperations里面的redis操作
- STL之vector容器详解
- tensorflow placeholder()
- vue引入组件无法下你是且报错[Vue warn]: Do not use built-in or reserved HTML elements as component id: header
- webpack入门和使用
- vi与vim命令
- 第十四周项目1
- java正则表达式简单使用
- CarView简单实用
- 18_张孝祥_多线程_阻塞队列的应用
- 解Bug之路-Druid的Bug
- 错误: 程序包com.***.databinding不存在
- 致远电子IMX283A之点亮扩展板led