webpack window下配置的hello world
峰回路转 一区九折
先看效果:(此效果是webpack执行完之后会生成build文件夹已经它下面的index.html,点击index.html就是下图的效果)
安装
先装好node和npm,因为webpack是一个基于node的项目。然后
npm install -g webpack
总览
官网对webpack的定义是MODULE BUNDLER,他的目的就是把有依赖关系的各种文件打包成一系列的静态资源。 请看下图
webpack简单点来说就就是一个配置文件,所有的魔力都是在这一个文件中发生的。 这个配置文件主要分为三大块
entry 入口文件 让webpack用哪个文件作为项目的入口
output 出口 让webpack把处理完成的文件放在哪里
module 模块 要用什么不同的模块来处理各种类型的文件
下面我们就一步一步来新建一个简单的项目
建立项目
建一个文件夹,然后新建一个package.json的文件在项目根目录下
mkdir webpack
cd webpack
npm init
# 一直点回车 如果懒得填一些信息
如果你使用git管理你的这个项目的话,建议你新建一个.gitignore文件,不要让git提交一些node依赖的模块, 你也可以参考github的例子 gitignore/Node.gitignore at master · github/gitignore · GitHub
我们这里就简单一点
node_modules
项目结构
现在项目里面就有一个package.json, 我们多加一点东西,慢慢丰富它的内容。
/app
index.js
sub.js
package.json
webpack.config.js
添加了两个js文件,添加了最重要的webpack的配置文件,我们还是从非常简单的hello world开始玩起,webpack原生直接支持AMD和CommonJS两种格式,如果你想使用ES6的风格,这点以后再提。
JS代码
sub.js
//我们这里使用CommonJS的风格
function generateText() {
var element = document.createElement('h2');
element.innerHTML = "Hello h2 world";
return element;
}
module.exports = generateText;
index.js
var sub = require('./sub');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(sub());
document.body.appendChild(app);
代码写完了,完成一个很简单的功能,新建一个单独的module,并且在另外一个module里面引用他,最后会在页面里面输出两个标题。
配置Webpack
现在开始配置webpack,目标是把这两个js文件合并成一个文件. 我们可以自己在build文件夹里面手动建一个index.html文件夹,然后再把合并以后的js引用在里面,但是这样有些麻烦,所以我们这里安装一个plugin,可以自动快速的帮我们生成HTML。
npm install html-webpack-plugin --save-dev
好 有了这个插件 开始写config文件
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
module.exports = {
//项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
entry: APP_PATH,
//输出的文件名 合并以后的js会命名为bundle.js
output: {
path: BUILD_PATH,
filename: 'bundle.js'
},
//添加我们的插件 会自动生成一个html文件
plugins: [
new HtmlwebpackPlugin({
title: 'Hello World app'
})
]
};
然后在项目根目录运行
webpack
终端显示一堆信息,然后告诉你成功了。
很想说句:操你大爷,终于把你征服了!!!
中途你会碰到问题:Cannot find module 'webpack/lib/node/NodeTemplatePlugin”;
解决方案:http://www.cnblogs.com/meij/p/5208214.html
webpack window下配置的hello world的更多相关文章
- window下配置SSH连接GitHub、GitHub配置ssh key
window下配置SSH连接GitHub.GitHub配置ssh key 此经验分两部分: 第一部分介绍:在windows下通过msysGit(Git for windows.Git Bash)配 ...
- window下 配置gitlab ssh非端口22端口
git config --global user.name "jack" git config --global user.email "jackluo@xxx.com& ...
- Window下配置NodeJs环境详解
今年打算学习Web这块,所以就买了本Node.js+MongoDb+AngularJS这本书,这周天也比较忙,想着录视频(拍小片,不是AV,不要误会,是在线课程)的事情,这周又将Asp.Net ...
- window 下配置wamp 环境
PHP下载 下载php压缩包,几点注意:这里我安装的事apache 所以在 php官方下载页时不是随便下载的,不然可能配置不了apache! 注意我以下图片标注
- GIt -- Window下配置 git
全局配置 git config --global user.name "账户名" git config --global use r.email '账户邮箱' 生成ssh,命令 ...
- webpack window dev-server配置
1.安装webpack dev-server npm install --save-dev webpack webpack-dev-server 著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...
- 在window下配置laravel开发环境
1.由于有一点php基础,所以非常想更进一步,就选择据说在国外最流行的php框架来学习了,laravel框架,官网上介绍是为艺术而生,从知乎和一些论坛上看到,laravel学起来并不简单,首先配置问题 ...
- window下配置SSH连接GitHub、GitHub配置ssh key(转)
转自:http://jingyan.baidu.com/article/a65957f4e91ccf24e77f9b11.html 此经验分两部分: 第一部分介绍:在windows下通过msysGit ...
- window下配置ssh key
在windows下通过msysGit(Git for windows.Git Bash)配置SSH Keys连接GitHub. 1.检查本机是否有ssh key设置 $ cd ~/.ssh 或cd . ...
随机推荐
- javascript——select 标签的使用
<% String state = (String) request.getAttribute("state"); String day = (String) request ...
- Medline Plus
提问地址: http://apps2.nlm.nih.gov/medlineplus/contact/index.cfm?lang=en&from=http://www.nlm.nih.gov ...
- 性能测试vs负载测试vs压力测试
下面我们主要介绍性能测试.负载测试和压力测试. 效率作为ISO 9126内部和外部质量的重要质量属性之一,其含义是在规定条件下,相对于所用的资源的数量,软件产品可提供适当性能的能力.资源可能包括其他软 ...
- Centos6.4下安装mysql5.6.10
今天下午捣腾安装mysql和apache.从网上下载mysql5.6.10,http://ishare.iask.sina.com.cn/f/36050990.html,解压后发现没有configur ...
- Kafka:ZK+Kafka+Spark Streaming集群环境搭建(二十八):kafka0.10.1 内置性能测试API用法示例
消费者测试: ./kafka-consumer-perf-test..com.cn:,vm10..com.cn:,vm10..com.cn: --group test-teg1 --messages ...
- OPENGL: WHY IS YOUR CODE PRODUCING A BLACK WINDOW?
Introduction One of the most common problems for novice, and sometimes experienced, OpenGL program ...
- Mybatis拦截器实现SQL性能监控
Mybatis拦截器只能拦截四类对象,分别为:Executor.ParameterHandler.StatementHandler.ResultSetHandler,而SQL数据库的操作都是从Exec ...
- bat脚本禁用和开启本地连接
netsh interface set interface name="本地连接" admin=disabled //禁用本地连接 netsh interface set inte ...
- MongoDB副本集配置系列五:副本集的在线迁移
MongoDB副本集的在线迁移 查看当前集群的状态: { "setName" : "gechongrepl", "setVersion" : ...
- Java之所有对象的公用方法>9.Always override hashCode when you override equals
You must override hashCode in every class that overrides equals.