webpack,遇见你!

webpack  ---> why?

对js进行处理。

在处理js的时候，比css 要复杂的多, 与css相比， js的执行，存在相互依赖关系

比如 a.js的执行 需要依赖b.js的加载

a.js + b.js(错了)    b.js --> a.js （对的）

也就是说，在处理js的时候，要处理好js相互依赖的关系，就可以对js进行文件合并、压缩

如何处理js加载的相互依赖关系？ 2大规范

1. CMD ---> CommonJs Modules Definition

2. AMD ----> Asynchronous Module Definition

console.log(1);

setTimeout(function(){

    console.log(2);     

    //回调函数 callback： 当一个函数作为一个形参传递给另外一个函数的时候，该函数就称为回调函数

    console.log(3);  //异步编程的特点： 代码的顺序需要靠 回调函数去维持

}, 0)

webpack 2大规范 它都支持

安装 webpack?

npm init -y; --> 自动的生成 package.json （npm install） 生成一个插件的依赖列表，方便于

你日后与别人或者自己通过 npm install 进行下载

{

  "name": "webpack_tech",

  "version": "1.0.0",

  "description": "webpack  ---> why?",

  "main": "readme.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "webpack -p",

    "watch": "webpack -w"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "webpack": "^1.14.0"

  }

}

npm install webpack --save-dev  把webpack下载到当前文件夹目录中

调用：

node_modules/.bin/webpack

npm run build

使用？

对 webpack.config.js 进行配置

var webpack = require('webpack'); //加载webpack模块

//进行一定的配置

module.exports = {

    entry: {

      //入口js文件

      app_gyf: './index.js'

    },

    output: {

      //入口js文件，在经过webpack处理之后，你希望它输出到哪个目录下

      path: './build', //发布目录

      filename: '[name].js'

    }

}

/*//压缩打包之后 js代码*/

压缩： webpack -p

监听改变: webpack -w

index.js

var Hello = require('./Components/hello.js') //模块化的加载

var b = require('./Components/b.js') //加载我们b模块

// Hello ? <div>Hello world</div>

document.body.appendChild(Hello);

console.log(123);

console.log(b.name);

b.say();

b.js

var name = 'I am Body'

function sayName(){

    console.log('说出我的名字', name);

}

module.exports = {

    name: 'I am B',

    say: sayName

}