无标题文章

webPack

Webpack是目前比较流行的前端打包工具,它同时支持AMD、CMD两种模块写法,也原生支持npm或者bower安装的模块。它还能给css、scss、less、coffeescript、es6、图片、html以及诸如jade、ejs的模板打包。

webPack

webpack 的优势

官网

初始化

安装

测试

本地安装

示例

webpack 的优势

其优势主要可以归类为如下几个:

支持CommonJS、ES6、AMD、UMD等,(甚至是混合形式)方便旧项目进行代码迁移。

可以打包成一个完整的包,也可以分成多个部分,在运行时异步加载(可以减少初始加载时间)。

依赖在编译时即处理完毕,可以减少运行时包的大小。

Loaders可以使文件在编译时得到预处理,这可以帮我们做很多事情,比如说coffee转换成JavaScript,模板的预编译,图片的base64处理;

开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。

扩展性强,高度模块化插件系统可以适应多变的需求。

官网

http://webpack.github.io/

http://www.jianshu.com/p/f0df52969a5e

初始化

npm init

安装

npm install webpack -g

测试

webpack -V

本地安装

npm install –save webpack

npm install webpack –save-dev

示例

创建空目录Demo文件夹 文件夹中创建app空文件夹

在app文件夹中创建entry.js文件

文件内容如下

app>entry.js

document.write("It works.");

app>index.html

webpack入门

执行命令:

cd Demo/app

webpack ./entry.js bundle.js

该命令会对entry.js文件编译并创建一个bundle.js文件

如果成功的话,它会显示如下:

Hash: ca188ee5789bb780fcec

Version: webpack1.13.0

Time:65ms

Asset    Size  Chunks            Chunk Names

bundle.js1.42kB0[emitted]  main

[0] ./entry.js28bytes {0} [built]

在浏览器中打开index.html 显示 It works.

配置文件webpack.config.js

module.exports = {

context: __dirname +'/app',//上下文

entry:'./index.js',//入口文件

output: {//输出文件

path: __dirname +'/app',

filename:'./bundle.js'

},

module: {

loaders: [//加载器

{test:/\.html$/, loader:'raw'},

{test:/\.css$/, loader:'style!css'},

{test:/\.scss$/, loader:'style!css!sass'},

{test:/\.(png|jpg|ttf)$/, loader:'url?limit=8192'}

]

}

};

基础代码:

varwebpack =require("webpack");

varpath =require("path");

module.exports = {

entry:'./src/main.js',//入口文件,webpack会从入口文件出开始查找依赖递归进行打包

output: {

path: path.join(__dirname,'www'),//打包后的文件位置

filename:'js/bundle.js',//打包后的文件名

},

module: {

loaders: [//配置模块加载器,数组形式

{ test:/\.(js|jsx)$/, loaders: ['babel?presets[]=react,presets[]=es2015'] },//babel加载器用于将es6转化成es5,使用前请先安装babel-loader再引入加载器

],

}

};

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,226评论 7 35
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,710评论 7 110
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,496评论 2 71
  • 学习流程 参考文档:入门Webpack,看这篇就够了Webpack for React 一. 简单使用webpac...
    Jason_Zeng阅读 3,176评论 2 16
  • 上周末跳了2天的五律禅舞,当时没什么感觉,只是觉得人多,自己僵硬,大课让我颇有可抱怨的由头。 这2天,耳畔一直在回...
    妙鱼头阅读 404评论 0 0