webpack基础打包安装分享
一、创建webpack-first文件夹作为站点，创建app文件夹存放js原始模块（main.js 和 Greeter.js） 创建 public文件夹存放index.html和打包后的bundle.js文件
1、找到自己项目的目录
npm install -g webpack //全局安装webpack
2、初始化package.json文件
npm init
3、站点下安装webpack建立依赖
npm install --save-dev webpack
4、编写Greeter.js文件
module.exports=function(){
var greet = document.createElement("div");
greet.textContent = "Hi there and greetings";
return greet;
}
//module.exports将函数作为返回值，成为一个共享的模块，只要引入Greeter文件就能使用
5、编写main.js文件
var greeter = require("./Greeter.js");
document.getElementById("root").appendChild(greeter());
//引入require()----Greeter.js模块
//获取html-dom元素将 调用的方法返回值 放在dom元素中
6、执行命令进行打包，
webpack app/main.js public/bundle.js
//全局安装webpack之后可以这样写， app/main.js是入口主文件 public/bundle.js是将该命 名空
间的文件打包到public中，也就是和html在一个目录下。
html文件代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个webpack练习</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script>
//调用的是打包后的bundle文件
</body>
</html>
二、像以上的方式方法 如果模块比较多的话会很不方便，然后我们每次都需要执行入口文件，出口打包目录，很容 易出错。有没有什么简单的方式，让我们每次打包都执行一个单词或者更简单，一下便是方法：
定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，可以把所有的与构建相关的信息放在 里面。
还是继续上面的例子来说明如何写这个配置文件，在当前练习文件夹的根目录下新建一个名为 webpack.config.js的文件，并在其中进行最最简单的配置，如下所示，它包含入口文件路径和存放打包后文件的地
方的路径。
1、在webpack.config.js下这样配置
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。（如果该配置文件在app下那么指向app文件夹）
webpack基础打包安装分享的更多相关文章
- 二、Electron + Webpack + Vue 搭建开发环境及打包安装
目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack 搭建开发环境及打包安装 ------- 打包主进程 Electron + ...
- 一、Electron + Webpack + Vue 搭建开发环境及打包安装
目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack 搭建开发环境及打包安装 ------- 打包主进程 Electron + ...
- nodejs+gulp+webpack基础知识
nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- webpack独立打包与缓存处理
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpa ...
- 【webpack】---模块打包机webpack基础使用---【巷子】
001.什么是webpack? 作用有哪些? WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,Ty ...
- webpack基础知识
一.基础 1 安装 npm i -g webpack webpack-cli // 推荐安装至本地 npm i -D webpack webpack-cli 2 webpck基础使用 2.1 webp ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- 搭建webpack基础配置
搭建webpack基础步骤: 1.去官方网站下载node.js(根据自己电脑的系统类型选择) 2.安装node.js完成后打开cmd命令提示符: 出现版本号证明安装成功 3.cd到工程目录下 npm ...
随机推荐
- .NET Core容器化@Docker
温馨提示:本文适合动手演练,效果更佳. 1. 引言 我们知道. NET Core最大的特性之一就是跨平台,而对于跨平台,似乎大家印象中就是可以在非Windows系统上部署运行.而至于如何操作,可能就 ...
- 项目实战12.1—企业级监控工具应用实战-zabbix安装与基础操作
无监控,不运维.好了,废话不多说,下面都是干货. 警告:流量党勿入,图片太多!!! 项目实战系列,总架构图 http://www.cnblogs.com/along21/p/8000812.html ...
- WCF实现长连接
由于WCF的机制,连接池会在连接建立一定时间后超时,即使设置了超时时间非常长,也可能被服务端系统主动回收.之前做项目时碰到了这个问题,所以项目上考虑采用长连接,自动管理连接池,当连接超时后,自动重建, ...
- linux根目录扩容
原来在ucloud上面买了一个服务器,结果根目录上面只有20G,/data挂载点下面有500G,没多久/根目录存储空间用完了,所以要扩展 linux的文件模式分为lvm模式和普通的非lvm模式,云服务 ...
- 利用GDAL进行工具开源化改造
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 为利于项目实施,团队用AE写过一个插件式的工具集,主要包括了数 ...
- 轨迹系列——Socket总结及实现基于TCP或UDP的809协议方法
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 在上一篇博客中我详细介绍了809协议的内容.809协议规范了通 ...
- 安装卸载selenium
安装: C:\Users\xiongjiawei>pip install selenium==2.48.0 Collecting selenium==2.48.0 Retrying (Retry ...
- java 学习笔记之 流、文件的操作
ava 学习笔记之 流.文件的操作 对于一些基础的知识,这里不再过多的解释, 简单的文件查询过滤操作 package com.wfu.ch08; import java.io.File; import ...
- 程序员的自我救赎---11.1：RPC接口使用规范
<前言> (一) Winner2.0 框架基础分析 (二)PLSQL报表系统 (三)SSO单点登录 (四) 短信中心与消息中心 (五)钱包系统 (六)GPU支付中心 (七)权限系统 (八) ...
- jquery通过ajax查询数据动态添加到select
function addSelectData() { //select的id为selectId //清空select中的数据 $("#selectId").empty(); $.a ...