webpack 学习心得(一)
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 学习心得(一)的更多相关文章
- 前端模块化工具--webpack学习心得
话说前头 webpack前段时间有听说一下,现在已经到了3.x的版本,自己没去接触.因为之前使用gulp来作为自己的项目构建工具.现在感觉gulp使用的趋势在减少.现在这段时间去接触了webpack, ...
- PWA学习心得
PWA学习心得 一.什么是PWA Progressive Web App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA ...
- 我的MYSQL学习心得(一) 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(二) 数据类型宽度
我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(三) 查看字段长度
我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(四) 数据类型
我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(五) 运算符
我的MYSQL学习心得(五) 运算符 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...
- 我的MYSQL学习心得(六) 函数
我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...
- 我的MYSQL学习心得(七) 查询
我的MYSQL学习心得(七) 查询 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...
随机推荐
- 转 [ javascript面向对象技术
以下文章来自iteye,作者是 sdcyst ,个人主页 http://www.iteye.com/topic/288813 类变量/类方法/实例变量/实例方法先补充一下以前写过的方法:在javasc ...
- C# 开发系列(三)
参考:http://stackoverflow.com/questions/11248935/passing-values-to-a-put-json-request-in-c-sharp 发送htt ...
- openstack controller ha测试环境搭建记录(十五)——创建实例
# source demo-openrc.sh # ssh-keygenGenerating public/private rsa key pair.Enter file in which to sa ...
- PHP运行方式
原文链接:http://www.cnblogs.com/xia520pi/p/3914964.html 1.运行模式 关于PHP目前比较常见的五大运行模式: 1)CGI(通用网关接口 / Common ...
- PHP操作mysql类
<?php class Mysql{ //数据库连接句柄 private $link; //返回结果集 private $result; //返回查询数据 private $data; //执行 ...
- LPC1788的ADC和DAC使用
#ifndef __ADC1_H_ #define __ADC1_H_ #include "common.h" #include "delay.h" void ...
- iOS开发——代理与block传值
一.代理传值的方法 1.Hehe1ViewController.h中 #import <UIKit/UIKit.h> @protocol Hehe1ViewControllerDelega ...
- Incompatible pointer types assigning to 'id<>' from 'Class'错误
实例变量在类方法中被使用 原因:静态方法访问了非静态变量属性(.h中声明的那些属性),就是类方法访问了成员变量
- iOS Socket第三方开源类库 ----AsyncSocket 分类: ios相关 ios技术 2015-03-11 22:14 59人阅读 评论(0) 收藏
假如你也是一个java程序员,而你又不是很懂Socket. 下面我的这篇文章也许能帮助你一些. http://xiva.iteye.com/blog/993336 首先我们写好上面文章中的server ...
- MongoDB升级教程
1.排序 sort()方法:其中 1 为升序排列,而-1是用于降序排列. db.col.find({},{"title":1,_id:0}).sort({"likes&q ...