一，为什么用webpack

1.由于项目中资源的多样性和依赖性

2.js模块规范复杂化

3.开发与线上文件不一致性

二、webpack 特性

1.对CommonJS、AMD、ES6语法兼容

2.对js、css、图片等资源文件都支持打包

3.有独立的配置文件webpack.config.js

5.可以将代码割成不同的chunk，实现按需加载，降低了初始化时间

6.支持SourceUrls 和 SourseMaps，易于调试

7.强大的Plugin接口，大多是内部插件，使用起来比较灵活

8.webpack 使用异步IO并具有多级缓存

9.串联式模块加载器以及插件机制，让其具有更好的灵活性

三、常用的webpack命令

1.webpack------------启动webpack的方法

2.webpack -w   --------------提供watch方法，实时进行打包更新

3.webpack -p  -------------------对打包后的文件进行压缩

4.webpack-d -------------提供source map ，方便调试代码

四、如何使用进行打包压缩

1.首先构建项目结构，文件名自定义，文件夹里新建一个吻文件，可以命名为main.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="src/react.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script src="build/build.js"></script>
</body>

2.新建一个文件夹src，文件夹里面放两个js文件，react.min.js源文件和main.js，main.js文件的主要是你用react组件化的代码

var ContentMode = React.createClass({
    render: function(){
        return (
            <div className="ContentMode">
                <div class="contents">{this.props.contents}</div>
                {this.props.children}
            </div>
        )
    }
});
/* 页面div封装 上面三个模块 */
var Page = React.createClass({
    render: function(){
    return (
        <div className="homepage">
            <ContentMode  contents ="longen">this is one comment</ContentMode >
            <ContentMode  contents ="longen2">this is two comment</ContentMode >
        </div>
    )
    }
});
/* 初始化到content容器内 */
React.render(
React.createElement(Page,null),document.getElementById("content")
);

3、需要在根目录下生成package.json文件，需要进入项目文件的内根目录下执行命令：npm init

根据提示一一回答就行了，最后会在根目录下生成一个名叫package.json文件

4.执行命令：npm install -g webpack 安装全局webpack,在C盘会生成node_modules文件夹中会包含webpack，接着我们就可以执行webpack命令了。

5.每个目录下都必须有一个webpack.config.js文件，它的作用是告诉webpack需要做什么，

接着我们就可以配置webpack.config.js文件了，代码如下：

// entry 是页面中的入口文件，比如我这边的入口文件时main.js

// output: 是指页面通过webpack打包后生成的目标文件放在什么地方去，我这边是在根目录下生成build文件夹，该文件夹内有一个build.js文件；

// resolve: 定义了解析模块路径时的配置，常用的就是extensions; 可以用来指定模块的后缀，这样在引入模块时就不需要写后缀，会自动补全。

// plugins: 定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取公用的部分，生成common.js;

// module.loaders：是文件的加载器，比如我们之前react需要在页面中引入jsx的js源码到页面上来，然后使用该语法，但是通过webpack打包后就不需要再引入JSXTransformer.js；看到上面的加载器；比如jsx-loader加载器就是代表JSXTransformer.js的，还有style-loader和css-loader加载器；因此在使用之前我们需要通过命令把它引入到项目上来；

module.exports = {
    entry:"./src/main.js",
    output:{
        filename:"build/build.js"
    },
    module:{
        loaders:[
            //.css文件使用style-loader和css-loader来处理
            {test:/\.css$/, loader:"style!css"},
            //.js文件使用jsx-loader来编译处理
            {test:/\.js$/, loader:"jsx-loader"},
            // {
            //     test:/\.less$/,
            //     loader:"style!css!less"
            // }
        ]
    },
    resolve:{
        extensions:['','.js','.jsx']
    },
    plugins:[]
};

6、接着需要使用一些执行命令安装一下加载器

（1）jsx-loader加载器 npm install jsx-loader --save-dev

(2) style-loader加载器 npm install jsx-loader --save-dev

(3) css-loader加载器  npm install  css-loader --save-dev

7、局部安装webpack 执行命令：npm install webpack --save-dev

8、最后执行webpack命令，在根目录下会生成一个build文件夹中build.js

9、可以使用命令：webpack --display-error-details命令，可以方便出错的时候查看详细的错误信息。

五、加载器的配置

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "build.js",
    path: __dirname + '/assets/',
    publicPath: "/assets/"
  },
  module: {
    loaders: [
      {test: /.css$/, loader: 'style!css'},
      {test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
  }
  resolve: {
extensions: ['', '.js', '.jsx'],
//模块别名定义，方便后续直接引用别名，无须多写长长的地址
alias: {
    a : 'js/assets/a.js',  // 后面直接引用 require(“a”)即可引用到模块
    b : 'js/assets/b.js',
    c : 'js/assets/c.js'
}
  },
  plugins: [commonsPlugin, new ExtractTextPlugin("[name].css")]
}

module.loader: 其中test是正则表达式，对符合的文件名使用相应的加载器.

/.css$/会匹配 xx.css文件，但是并不适用于xx.sass或者xx.css.zip文件.

url-loader 它会将样式中引用到的图片转为模块来处理; 配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式。

entry 模块的入口文件。依赖项数组中所有的文件会按顺序打包，每个文件进行依赖的递归查找，直到所有模块都被打成包；

output：模块的输出文件，其中有如下参数：

filename: 打包后的文件名

path: 打包文件存放的绝对路径。

publicPath: 网站运行时的访问路径。

relolve.extensions: 自动扩展文件的后缀名，比如我们在require模块的时候，可以不用写后缀名的。

relolve.alias: 模块别名定义，方便后续直接引用别名，无须多写长长的地址

plugins 是插件项;

webpack入门的更多相关文章

  1. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  2. webpack入门——webpack的安装与使用

    一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...

  3. 一小时包教会 —— webpack 入门指南

    什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...

  4. Webpack 入门指南 - 3. Hello, Angular2!

    Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目 ...

  5. Webpack 入门指南 - 2.模块

    这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长 ...

  6. Webpack 入门指南 - 1.安装

    Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...

  7. webpack入门和实战(一)：webpack配置及技巧

    一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...

  8. webpack入门--前端必备

    webpack入门--前端必备 什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来 ...

  9. webpack入门笔记

    此为第一篇主要是webpack入门笔记: http://if-true.com/2015/10/16/webpack-tutorial-translate.html

  10. webpack入门必知必会

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 这是我第一篇介绍webpack的文章,先从一个入门教程开始吧,后续会有更多相关webpack的文章推 ...

随机推荐

  1. Git/GitHub 初用体验与总结

    Git,一个神奇而又陌生的东西,居然到现在才去了解它,就像有一位仁兄说的,现在不会用Git真的都不好意思说自己搞IT的. 简单的讲,这Git是目前最先进的分布式版本控制系统,和他相对应的就是众所周知的 ...

  2. DataGrid新增行数据

    本文将介绍一下,如何通过Jquery MiniUI来添加Datagrid一行. 1.效果展示: ↓ 2.具体代码: <script type="text/javascript" ...

  3. IE6不支持min-heightt和min-width的解决办法

    IE6不支持min-height的解决办法 最小高度min-height是很有用的,但IE6却不支持.真烦人.有没有办法呢? 我们可以利用IE6不识别!important来实现: height:aut ...

  4. 170103、Redis官方集群方案 Redis Cluster

    前面我们谈了Redis Sharding多服务器集群技术,Redis Sharding是客户端Sharding技术,对于服务端来说,各个Redis服务器彼此是相互独立的,这对于服务端根据需要灵活部署R ...

  5. Oracle序列(Sequence)创建、使用、修改、删除

    Oracle对象课程:序列(Sequence)创建.使用.修改.删除,序列(Sequence)是用来生成连续的整数数据的对象.序列常常用来作为主键中增长列,序列中的可以升序生成,也可以降序生成.创建序 ...

  6. Java设计模式（二）——迭代模式

    迭代模式的基本定义:对于一组对象集合(数组.堆栈.列表或散列),用户无需关心它的底层实现而能够通过调用统一接口遍历当中的所有元素.由于jdk已经对常见的迭代模式实现了封装,本文直接提供Collecti ...

  7. 基于php开发的RESTful ApiDoc文档

    apiDoc基于rest的web API文档生成器,可以根据代码注释生成web api文档,自动生成静态的html网页文档,不仅支持项目版本号,还支持API版本号. 使用apiDoc不需要自己麻烦的调 ...

  8. 使用js倒计时还有几天及计时过了几天

    公司主营业务是体育赛事为主的:尤其是足球赛事.现正值2016法国欧洲杯:之前忙于做欧洲杯专题没时间总结.现分享一个工作中需求带来的经历. 需求是:从现在开始倒计时欧洲杯还有多久开赛:当开赛之后开始计算 ...

  9. 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动（xml方法）

    之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...

  10. d3.js读书笔记-2

    比例尺 比例尺基本内容 比例尺是一组把输入域映射为输出范围的函数.任意数据集中的值不可能恰好与图表中的像素尺度一一对应.比例尺就是把这些数据值映射为可视化图形中使用的新值的便捷手段.D3的比例尺就是那 ...