初始webpack1. install: 2. package.json 如果我们想在greets的文件中，知道具体的时

webpack:

需要npm / yarn 去进行包管理

需要 node.js 的环境

1. install:

npm install webpack --save-dev

2. package.json

"script": {
    "build": "webpack -p",
    "watch": "webpack -- watch"
}

在终端执行操作时，webpack 也会进行相应的操作

npm run build： 在终端利用 webpack来进行绑定我们的文件 （-P 参数 代表着我们的绑定代码）

npm ru watch: 会开始一个进程自动的绑定我们改变的文件

3.config file (知道要绑定哪些文件)

webpack.config.js

var path = require('path');

module.export = {
    entry: './assets/js/index.js', //  主js文件
    output: {
        filename: 'bundle.js',
        path: path.resolve(_dirname, 'dist') // webpack后，生成的文件
    }
}

在HTML中去引入这个文件：

<script src="./dist/bundle.js"></script>

4.Webpack Modules

webpack 有很多方法去操作，接下来用的是ES6的import方法

1.我们先添加一个module，比如是 greet.js 并去写一个 简单的export函数

greeter.js

function greet () {
    console.log("have a greate day!")
};

export default freet;

如果要用这个模块，我们可以在这个入口点import一下，

import greet from './greeter.js';

console.log("l am the entry point");

greet();

即可 npm run build

渲染到游览器的流程

moudle(greeter.js)  ---> entry point (index.js) -----> output(bundle.js) --> app(index.html)----> browser

5.Requiring Libraries

如果我们想在greets的文件中，知道具体的时间，哪一年哪一日引入的，我们可以使用 moment.js 。

npm install moment --save

greeter.js

import moment from 'moment'

function greet () {
    var day = moment().format('dddd');
    console.log('Have a great' + day +'!';)
}

export default greet;

即可得到具体的天数.

渲染到游览器的流程

library(moment.js) --->moudle(greeter.js)  ---> entry point (index.js) -----> output(bundle.js) --> app(index.html) ---> browser

6.Loaders(加载器)

加载器是webpack在打包过程中去任务进行预处理或者后置处理的过程

例如：我们想知道我们的js文件是否有问题，就可以用JSHint加载器

安装加载器：

npm install jshint jshint-loader --save -dev

然后再去webpack.config.js中去进行处理，去初始化loader，并告诉它哪些文件需要检查，哪些文件不需要检查

var path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // Add the JSHint loader
  module: {
    rules: [{
      test: /\.js$/, // Run the loader on all .js files
      exclude: /node_modules/, // ignore all files in the node_modules folder
      use: 'jshint-loader'
    }]
  }
};

当webpack启动时就会在终端列出错误和警告清单