webpack入门

序言

>webpack推荐使用commonjs方式来加载模块,但是对AMD/CMD也有很好的兼容支持
>commonjs和CMD是两个词

commonjs:

var a = require('./a');

amd:

define(['a','b'],function(a,b){
        module.exports = ...;
    });

官网

中文网址学习:
http://webpackdoc.com/start.html
http://www.w2bc.com/Article/50764
http://www.w2bc.com/article/101955

1 安装

npm i webpack -g

2 使用

2.1 打包一个简单的js文件
    webpack a.js b.js bundle.js 
    把a.js和b.js打包成bundle.js

2.2 简单的模块
    module.exports

3 loader

本质是个node模块
3.1 简写 !xxx-loader可以简写为!xxx
3.2 安装loader
3.3 --module-bind 'css=style!css'

4 配置文件(webpack.config.js)

为什么要使用配置文件,为了使用简单点

var webpack = require('webpack')

    module.exports = {
      entry: './entry.js',
      output: {
        path: __dirname,
        filename: 'bundle.js'
      },
      module: {
        loaders: [
          {test: /\.css$/, loader: 'style!css'}
        ]
      }
    }

5 插件,plugins

使用一个能写banner的东西

6 重要的–watch(-w)

监视文件的修改,及时的去编译文件

7 视频

视频