峰回路转 一区九折

先看效果:(此效果是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的更多相关文章

  1. window下配置SSH连接GitHub、GitHub配置ssh key

    window下配置SSH连接GitHub.GitHub配置ssh key   此经验分两部分: 第一部分介绍:在windows下通过msysGit(Git for windows.Git Bash)配 ...

  2. window下 配置gitlab ssh非端口22端口

    git config --global user.name "jack" git config --global user.email "jackluo@xxx.com& ...

  3. Window下配置NodeJs环境详解

        今年打算学习Web这块,所以就买了本Node.js+MongoDb+AngularJS这本书,这周天也比较忙,想着录视频(拍小片,不是AV,不要误会,是在线课程)的事情,这周又将Asp.Net ...

  4. window 下配置wamp 环境

    PHP下载 下载php压缩包,几点注意:这里我安装的事apache 所以在 php官方下载页时不是随便下载的,不然可能配置不了apache! 注意我以下图片标注

  5. GIt -- Window下配置 git

    全局配置  git config --global user.name "账户名"  git config --global use r.email '账户邮箱' 生成ssh,命令 ...

  6. webpack window dev-server配置

    1.安装webpack dev-server npm install --save-dev webpack webpack-dev-server 著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...

  7. 在window下配置laravel开发环境

    1.由于有一点php基础,所以非常想更进一步,就选择据说在国外最流行的php框架来学习了,laravel框架,官网上介绍是为艺术而生,从知乎和一些论坛上看到,laravel学起来并不简单,首先配置问题 ...

  8. window下配置SSH连接GitHub、GitHub配置ssh key(转)

    转自:http://jingyan.baidu.com/article/a65957f4e91ccf24e77f9b11.html 此经验分两部分: 第一部分介绍:在windows下通过msysGit ...

  9. window下配置ssh key

    在windows下通过msysGit(Git for windows.Git Bash)配置SSH Keys连接GitHub. 1.检查本机是否有ssh key设置 $ cd ~/.ssh 或cd . ...

随机推荐

  1. [转]shell脚本每行的执行顺序是怎样

    原文:https://blog.csdn.net/weixin_42609121/article/details/83028000 ---------------------------------- ...

  2. Java-JUC(九):使用Lock替换synchronized,使用Condition的await,singal,singalall替换object的wait,notify,notifyall实现线程间的通信

    Condition: condition接口描述了可能会与锁有关的条件变量.这些用法上与使用object.wait访问隐式监视器类似,但提供了更强大的功能.需要特别指出的是,单个lock可能与多个Co ...

  3. create-react-app时registry的奇怪问题

    用React官方给的NPM脚本 create-react-app my-app 在自动安装module的过程中,在安装registry的组件的时候莫名其妙的挂住不动了.界面显示的信息如下: fetch ...

  4. 【nodejs】理想论坛帖子下载爬虫1.08

    //====================================================== // 理想论坛帖子下载爬虫1.09 // 使用断点续传模式,因为网络传输会因各种原因中 ...

  5. Wifidog初分析

    一.综述 wifidog是搭建无线热点认证系统的解决方案之一,他比nocat.nodog更适合互联网营销思路.常见的使用在openwrt系统上,它实现了路由器和认证服务器的数据交互,在路由器方(客户端 ...

  6. php5.3升级脚本

    在lanmp/wdcp/wdOS的当前版本中,默认的php都是用到5.2.17的版本如需要升级到php5.3的,可使用如下脚本升级(注:此升级无安全漏洞等原因,只为某些追求高版本或应用需求需要高版本, ...

  7. CAD中批量打印

    同事在网上找各种软件来实现CAD图的批量打印,总是问题多多.于是,我想到一个更方便的解决方法,即只要我将一个打印出来,然后就可以用批量处理来实现. 1.在CAD中输入plot命令(或快捷键Ctrl+P ...

  8. Dictionary应用

    using System; using System.Collections.Generic; using System.Data; using System.Web; using System.We ...

  9. ES6...扩展运算符(数组或类数组对象)

    数组和类数组对象定义 数组:[] 类数组对象:只包含使用从零开始,且自然递增的整数做键名,并且定义了length表示元素个数的对象,我们就认为他是类数组对象. 数组使用 let foo_arr = [ ...

  10. oneinstack一键部署linux生产环境那点事(ubuntu)

    http://oneinstack.com/install/ (1)将oneinstack-full.tar.gz最新版安装文件上传至/usr/local/下 (2)解压tar xzvf oneins ...