说明

1.webpack工作内容
Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
2.webpack工作方式
把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders,plugins处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

使用

1.如果在nodejs中全局安装了webpack和webpack-dev-server,可以在git bash直接使用’webpack’命令进行打包，使用’webpack-dev-server’命令启动打包后生成的项目
2.在打包之前,要先配置webpack.config.js文件,’webpack’命令会根据webpack.config.js文件的配置项去打包文件
3.如果想使用不同的配置文件去打包项目，可以使用’webpack –config 文件名’命令去打包
4.如果不想带文件名去打包,可以在package.json的scripts对象中配置命令‘xxx’,然后在git bash中使用命令‘npm run xxx’进行打包

"scripts": {
    "start": "webpack-dev-server",
    "build": "webpack --config webpack.config.build.js",
    "dev":"webpack --config webpack.config.dev.js"
  }

执行 npm run build 则按照webpack.config.build.js文件配置的内容去打包
同样，执行 npm run dev 则按照webpack.config.dev.js文件配置的内容去打包
但要注意,使用配置命令’start’时，直接执行’npm start’，就可以执行其对于的命令，中间不需要加run

webpack.config.js 配置

module.exports = {}
1.配置根路径
配置入口文件前，可以用context配置根路径，这样在配置时，就不用将文件路径写进去，直接将文件配置进去就可以了
可以借助path模块拼接路径字符串

const path = require('path')

module.exports = {
  /**
   * The base directory
   */
  context: path.join(__dirname, './src'),//这样入口文件就是指src文件夹下面的那些文件
}

2.入口文件
入口文件是指打包后项目生成的可以访问的文件

//单入口：
 entry: './index.js',/*打包单个文件*/
 entry: ['./index1.js','./index2.js'],/*打包多个文件*/

//多入口：
entry: {
    home: './home',
    user: ['./user', './account']
  },

多入口文件数组的KEY值可用于命名输出文件名，其对应的值即是要打包的源文件

3.输出文件

output: {

/* filename方式一：直接指定文件名*/
    filename: 'bundle.js',

/* filename方式二：映射变量[name]和[hash]，[name]即定义入口文件的key值，[hash]是webpack在打包的时候按照一定规则生成的值,是MD5加密的值,如果文件没有发生变化，hash值不会变,可用于版本控制
(CDN一般缓存时间比较长，文件发生变化，hash值就会变，文件名就会变，CDN就能及时更新文件)
 * 还可以加[chunkhash],这里是作为版本号使用，方便上线时静态资源的版本管理
 * 单入口[name]被映射成‘main’
*/
    filename: '[name].bundle.[hash].js',

    path: '/home/proj/public/assets'，/*指定输入文件存放路径*/
    libraryTarget：
  }

其他配置参数

4.配置加载器loader

loader 是对应用程序中资源文件进行转换。它们是（运行在 Node.js 中的）函数，可以将资源文件作为参数的来源，然后返回新的资源文件。
官方可用loader

Loaders的配置包括以下几方面：
test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
loader：loader的名称（必须）
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）

loader被配置在rules数组中，数组每一个对象可配置一个或多个loader
例：

module: {
   rules: [
     {
       test: /\.js$/,
       include: path.join(__dirname, './src'),
       use: 'babel-loader'
     }
   ]
 },

常用loader:
babel-loader:编译js,考虑到babel具有非常多的配置选项,一般把babel的配置选项放在一个单独的名为 “.babelrc” 的配置文件中
css-loader:使你能够使用类似@import 和 url(…)的方法实现 require()的功能,获取css文件里面的样式
style-loader:将css样式插件js文件，与css-loader一起使用能够把样式表嵌入webpack打包后的JS文件中
autoprefixer-loader:自动添加前缀，使css文件更有兼容性
postcss-loader:css会自动根据Can i use里的数据添加不同前缀，可与autoprefixer-loader结合使用
ExtractTextPlugin.extract:将css单独打包成一个.css文件，使用这个插件，需要require 插件extract-text-webpack-plugin

//配置代码：
1.
 module: {
    rules: [
      {
        test: /\.css$/,
        include: [
          path.join(__dirname, './src')
        ],
        use: ['style-loader', 'css-loader'] 
        //链式调用loader的时候，会以数组逆序的顺序执行，
        //先执行css-loder,再执行style-loader
      }
    ]
  },

2.
module: {
    rules: [{
      test: /\.css$/,
      include: [
       path.join(__dirname, './src'),
      ],
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader'
      })
    }]
  },

plugins: [
    new ExtractTextPlugin('[name].css')
  ]
3.
module: {
    rules: [{
      test: /\.css$/,
      include: [
       path.join(__dirname, './src')
      ],
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'autoprefixer-loader']
      })
    }]
  },
  plugins: [
    new ExtractTextPlugin('[name].css')
  ]

5.配置插件plugin
插件目的在于解决 loader 无法实现的其他事,配置插件都在plugin数组中，数组每一项就是new一个plugin,插件的配置也在new时以参数形式传递进去
例：

//打包公共文件方式一：

plugins: [
    new CommonsChunkPlugin({
      name: 'commons',
      filename: 'commons.js'
    }),
    new ExtractTextPlugin('[name].css')
  ]

常用插件：
CommonsChunkPlugin：将多个文件通用的东西打包成一个文件
webpack.optimize.CommonsChunkPlugin：require(‘webpack’),使用webpack的optimize.CommonsChunkPlugin将打包的文件转化为公共文件
HtmlWebpackPlugin：是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。

//打包公共文件方式二：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    app: './',
    vendor: ['jquery', 'underscore'],//将文件中require的'jquery', 'underscore'打包成公共文件vendor.bundle.js
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor',
      filename: 'vendor.bundle.js'
    })
  ]
}

入门Webpack

写一个webpack 的loader

1.相当于写一个普通的模块

module.exports = function (source){
  .....
  ...
  return xxx
}

2.获取配置参数
方式一
直接使用API:this.query
方式二
使用loader-utils库

1 2	const loaderutils = require('loader-utils') const options = loaderutils.getOptions(this);

3.处理模块依赖
方式一：转化成require语句
例如,css-loader将@import和url(…)替换会require(…)
方式二：使用this.resolve函数解析路径
例如,less-loader将less编译器进行扩展自定义路径解析逻辑然后利用this.resolve解析依赖

4.不要使用绝对路径
5.如果要包裹另外一个包将这个包作为peerDependency在package.json中引入
6.返回值
如果只是返回一个值可以用return
如果返回多个值需要调用API：this.callback(),但依然要在最后return一个undefined

7.本地配置使用

单个：path.resolve(‘../../loader.js’)

{
  test: /\.js$/
  use: [
    {
      loader: path.resolve('path/to/loader.js'),
      options: {/* ... */}
    }
  ]
}

多个或一个

module: {
    rules: [
      {
        test: /\.js/,
        use: [{
          loader:'define-loader',
          options:{name:'alice'}
         }
        ],
      }
    ]
  },
  resolveLoader: {
    modules: [
      'node_modules',
      path.resolve(__dirname, 'loaders')
    ]
  }

中文
 How to write a loader
loader API

写一个webpack 的plugin

按照格式，根据compiler 和 compilation 对象处理流程上的钩子函数，
在不同阶段插入我们要做的事情
1.格式

class DefPlugin {
  constructor(name) {
  }

  apply(compiler) {
  // 指定挂载的webpack事件钩子。
    compiler.plugin("compile", function(params) {
       console.log("The compiler is starting to compile...");
     });
     // 指定挂载的webpack事件钩子。
    compiler.plugin('emit', function(compilation, callback) {
      // 现在设置回调来访问编译中的步骤：
    compilation.plugin("optimize", function() {
      console.log("Assets are being optimized.");
    });
    //功能完成后调用webpack提供的回调。
    callback();

  })
 }
}
module.exports = DefPlugin

2.使用
直接在webpack.config.js文件中require一下就好


const Plugin = require('./myplugin')

module.exports = {
    context: path.join(__dirname, 'src'),
    entry: './index.js',
    output: {
        libraryTarget: 'commonjs2',
        path: path.join(__dirname, 'dist'),
        filename: './bundle.js'
    },
    plugins: [
        new Plugin
    ]
}

3.compiler
compiler 对象代表了完整的 webpack 环境配置。这个对象在启动 webpack 时被一次性建立，并在所有可操作的设置中被配置，包括原始配置，loader 和插件。当在 webpack 环境中应用一个插件时，插件将收到一个编译器对象的引用。可以使用它来访问 webpack 的主环境。
源码
4.compilation
compilation 对象代表了一次单一的版本构建和生成资源。当运行 webpack 开发环境中间件时，每当检测到一个文件变化，一次新的编译将被创建，从而生成一组新的编译资源。一个编译对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。编译对象也提供了很多关键点回调供插件做自定义处理时选择使用
源码
5.tabable

webpack性能优化

1.将不再使用的依赖及时删除
2.不要为了实现小功能引入大型lib
3.合理配置babel
4.根据使用场景合理使用优化插件
例如使用happypack,webpack-uglify-parallel 在开发阶段进行多核并行压缩
相关链接
 学习链接

gulp

api:
task：
src:
watch：用来监视文件的变化；

jshint：js 代码检查
uglify：压缩js
minify-css:压缩css
minfy-html:压缩html
concat:合并文件

babel

babel是一个js转换器
可以将es6,es7,react/jsx的语法通过他的插件转编译成es5的或者说支持在现有环境运行的语法
使用babel,除了可以使用package.json进行配置，一般会为它建立专门的.babelrc文件进行配置

{
  "presets": [],
  "plugins": []
}

使用babel-preset-env转换es5,就将‘env’添加到.babelrc的presents数组中
使用babel-preset-react转换jsx,就将‘react’添加到.babelrc的presents数组中
使用babel-preset-stage-x转换es7不同阶段语法,就将‘stage-x’添加到.babelrc的presents数组中,x目前可以为0,1,2,3
使用babel-core模块，可以在代码中手动调用babelAPI进行转码
使用babel-polyfill模块，可以转换新版es6/es7里面的API,如generator,Symbol,Promise等
安装babel-cli实现命令行进行转码
另外babel经常用于前置转码，比如与eslint结合进行代码检查，与mocha进行脚本测试