Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

因为本人也正在学习webpack ,所以此篇文章比较入门。

首先你想使用webpack 需要安装node,推荐最好使用的是4.0以上(为了避免依赖安装错误)

npm install -g webpack

安装 webpack

你可以手动创建相应文件,也可以这样

mkdir webpackdemo
cd webpackdemo

创建 webpackdemo 文件夹 进入当前目录

我们需要一个 package.json 文件记录我们的使用依赖以及一些 demo 信息

这个我们通过

npm  init

输入名称 ,描述...(以为这个demo所以无所谓,可以一直回车)完成后,在当前文件夹下 会生成 package.json 文件

此时我们需要手动创建一个配置文件 webpack.config.js (我们每次编译文件时,会自动查找该文件)

var webpack = require('webpack');
  var Promise = require('es6-promise').Promise;

module.exports = {
entry:{
init:'./mySuc/index'
},
output:{
path:'./build',
publicPath: 'build/',
filename:'[name].js'
},
module:{
loaders:[{
test:/\.css$/,
loaders:['style','css']
},{
test: /\.(png|jpg)$/,
loader: 'url?limit=1200&name=[hash].[ext]' }
]
},
// resolve.extensions
// 用于指明程序自动补全识别哪些后缀, 注意一下,
// extensions 第一个是空字符串! 对应不需要后缀的情况.
resolve: {
extensions: ['', '.coffee', '.js']
}
}
entry  目标文件入口 在这里我命名的是 index.js 内容为
console.log("ok!"); 
output 输出设置
path 当前输出路径
publicPath 服务器输出路径
filename 文件输出名字

现在我们可以在当前目录 新建一个html ,引入编译后的 文件 init.js

现在我们在 用 webpack 编译,刷新页面 在控制台可以 看到 ok!
module 是我门加载文件使用的 依赖配置 我这里用的 css模块依赖 和图片 模块依赖

在加载配置前,我们需要在安装模块

加载css 模块(页面嵌入模式)

npm install css-loader style-loader --save-dev

加载图片打包模块

npm install url-loader --save-dev

着这里有一个bug 就是 node 版本是 5.7 的时候,加在css 模块是会出现一个错误

在此感谢群友的帮助 (雨神),解决的方式如下

npm install es6-promise@3.1.

安装后在配置文件里面添加

var Promise = require('es6-promise').Promise;
 
到此一个简单的webpack demo 就完成了。

 

webpack 学习心得(一)的更多相关文章

  1. 前端模块化工具--webpack学习心得

    话说前头 webpack前段时间有听说一下,现在已经到了3.x的版本,自己没去接触.因为之前使用gulp来作为自己的项目构建工具.现在感觉gulp使用的趋势在减少.现在这段时间去接触了webpack, ...

  2. PWA学习心得

    PWA学习心得 一.什么是PWA Progressive  Web  App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA ...

  3. 我的MYSQL学习心得(一) 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  4. 我的MYSQL学习心得(二) 数据类型宽度

    我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  5. 我的MYSQL学习心得(三) 查看字段长度

    我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  6. 我的MYSQL学习心得(四) 数据类型

    我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(五) 运 ...

  7. 我的MYSQL学习心得(五) 运算符

    我的MYSQL学习心得(五) 运算符 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  8. 我的MYSQL学习心得(六) 函数

    我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

  9. 我的MYSQL学习心得(七) 查询

    我的MYSQL学习心得(七) 查询 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

随机推荐

  1. 转 [ javascript面向对象技术

    以下文章来自iteye,作者是 sdcyst ,个人主页 http://www.iteye.com/topic/288813 类变量/类方法/实例变量/实例方法先补充一下以前写过的方法:在javasc ...

  2. C# 开发系列(三)

    参考:http://stackoverflow.com/questions/11248935/passing-values-to-a-put-json-request-in-c-sharp 发送htt ...

  3. openstack controller ha测试环境搭建记录(十五)——创建实例

    # source demo-openrc.sh # ssh-keygenGenerating public/private rsa key pair.Enter file in which to sa ...

  4. PHP运行方式

    原文链接:http://www.cnblogs.com/xia520pi/p/3914964.html 1.运行模式 关于PHP目前比较常见的五大运行模式: 1)CGI(通用网关接口 / Common ...

  5. PHP操作mysql类

    <?php class Mysql{ //数据库连接句柄 private $link; //返回结果集 private $result; //返回查询数据 private $data; //执行 ...

  6. LPC1788的ADC和DAC使用

    #ifndef __ADC1_H_ #define __ADC1_H_ #include "common.h" #include "delay.h" void ...

  7. iOS开发——代理与block传值

    一.代理传值的方法 1.Hehe1ViewController.h中 #import <UIKit/UIKit.h> @protocol Hehe1ViewControllerDelega ...

  8. Incompatible pointer types assigning to 'id<>' from 'Class'错误

    实例变量在类方法中被使用 原因:静态方法访问了非静态变量属性(.h中声明的那些属性),就是类方法访问了成员变量

  9. iOS Socket第三方开源类库 ----AsyncSocket 分类: ios相关 ios技术 2015-03-11 22:14 59人阅读 评论(0) 收藏

    假如你也是一个java程序员,而你又不是很懂Socket. 下面我的这篇文章也许能帮助你一些. http://xiva.iteye.com/blog/993336 首先我们写好上面文章中的server ...

  10. MongoDB升级教程

    1.排序 sort()方法:其中 1 为升序排列,而-1是用于降序排列. db.col.find({},{"title":1,_id:0}).sort({"likes&q ...