webpack学习之路

webpack 是一个模块打包工具，输入为包含依赖关系的模块集，输出为打包合并的前端静态资源。
webpack的loader:处理各种需要被处理的静态文件
webpack支持CommonJs、AMD规范

模块系统的几大类型：

style.css:

body{
    background:#ddd;
}

配置webpack.config.js:

var path = require('path')   //path是node.js内置的package，用来处理路径的。用于连接路径。该方法的主要用途在于，会正确使用当前系统的路径分隔符，Unix系统是/，Windows系统是\
var webpack = require('webpack');
module.exports = {
  entry: ['./src/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    })
  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    },
    {
        test: /\.(png|jpg)$/,
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    }]
  }
}

在入口文件引入内容

require（'./style.css'）
require（'./demo.png'）

再次运行，dist文件内会有两个文件，是webpack打包后的文件。

webpack不仅有单一的入口文件也有多个入口文件，以及多个打包目标。

    entry: {
        index: ["./source/page/index"],
        designer: './source/cmd/designer'
    },
    output: {
        filename: "./deploy/[name].js"
    },

最终打包出:

├── index.js
└── designer.js

[name] entry 对应的名称
[hash] webpack 命令执行结果显示的 Hash 值
[chunkhash] chunk 的 hash

webpack如何解析JSX和ES6语法？
那就用Babel吧！
在module里面添加：

module: {
    loaders: [{
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
        presets: ['es2015', 'stage-0', 'react']
        }
    }]
    }
}

强调：.css 文件应用 "style" 和 "css" loader

{
    test: /.css$/,
    loader: "style-loader!css-loader"
}

webpack其实还有好多插件可以供我们使用。详细的可以去官网