webpack打包工具的使用

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

webpack的使用：
1、打开命令行工具，进入项目所在的位置，npm init 初始化项目，生成package.json文件（标准的npm说明文件，包括当前项目的依赖模块，自定义的脚本任务等等）

//package.json
{
  "name": "webpack",
  "version": "1.0.1",
  "description": "webpack test",
  "main": "main.js",
  "scripts": {
    "server": "webpack-dev-server --open",      //启动本地服务器
    "test": "a test command",
    "start": "webpack",
    "webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reason"
  },
  "author": "cg",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "jsx-loader": "^0.13.2",
    "style-loader": "^0.19.0",
    "webpack-dev-server": "^2.9.1"
  }
}

2、本地安装webpack，npm install webpack --save-dev，安装之后，项目下会有node_modules文件夹，这是项目依赖所在的包；外部导入的项目，如果存在webpack.config.js文件，可以npm install 生成node_modules文件夹

3、新建webpack.config.js，建立webpack配置文件

//webpack.config.js
const webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');//用于生成绝对路径

module.exports = {
  devtool: 'eval-source-map',        //为我们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试
  entry: __dirname+"./src/main.js", //唯一入口文件，“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
  output: {
    path:__dirname+"/src",         //打包后文件存放的位置
    filename: "build/build.js",    //打包后输出文件的文件名
    publicPath:'http://cdn.com/'  //满足上线
  },
  devServer: {                 //构建本地服务器
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } ,
  module: {
    loaders: [
       {
        test:/\.js$/,
        loader:'babel',
        query:{
          presets:['es2015']  //告诉babel-loader处理怎样js转换成浏览器支持的js代码
        },
        exclude:path.resolve(__dirname,'./node_modules  /'),//不处理node_modules
        include:'./src/'//只打包src目录下的文件
       },{
        test:/\.css$/,
        loader:'style-loader!css-loader!postcss-loader'  //处理css文件
       },{
        test:/\.less$/,
        loader:'style!css!postcss!less'
       },{
        test:/\.scss$/,
        loader:'style!css!postcss!scss'
       }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  plugins: [
     new htmlWebpackPlugin({
      template:'index.html',
      filename:'index-[hash].html',
      inject:'head',   //表示脚本嵌入到头部
      minify:{
        removeComments:true   //对生成的html进行压缩
      },
      excludeChunks:['a','c']
     })
  ],
};

4、在命令行输入 webpack 打包运行，在package.json的script脚本中添加"start": "webpack"，可以使用npm start 打包运行项目。

loaders

• test：一个用以匹配loaders所处理文件的拓展名的正则表达式
• loader：loader的名称
• include/exclude:手动添加必须处理的文件或屏蔽不需要处理的文件
• query：为loaders提供额外的设置选项

Babel
编译JavaScript的平台，使得ES6、ES7，以及基于JavaScript的扩展语言，比如React的JSX能够被当前浏览器所支持
Babel完全可以在 webpack.config.js 中进行配置，但由于babel具有非常多的配置选项，在webpack.config.js文件中进行配置会使得这个文件变得复杂，因此可以将babel的配置选项放入单独的名为 “.babelrc” 的配置文件中。

//.babelrc
{
  "presets": [
    "es2015",
    "stage-2",
    "react"
  ],
  "plugins": [
    ["transform-runtime"],
    [
      "transform-es2015-for-of"
    ],
    [
      "transform-class-properties"
    ],
    [
      "react-transform",
      {
        "transforms": [{
          "transform": "react-transform-hmr",
          "imports": [
            "react"
          ],
          "locals": [
            "module"
          ]
        }]
      }
    ]
  ]
}

插件
用来拓展Webpack功能的，在整个构建过程中生效，执行相关任务。