四个核心概念

• 入口（entyr）
• 输出（output）
• loader （除了js以外的文件处理）
• 插件（plugins）

配置 webpack.config.js

const xx = require(); //引入插件
const path = require('path');

const config = {
   //入口
   entry: string | Array<string>, 
   //产出
   output:{
    path: path.resolve(__dirname,''),
    filename:'' 
   },
   //loader
   module: {
    rules:[] 
  },
  //插件
   plugins:[] 
};

modele.exports = config;

css 和 typescript 的 loader 使用示例

npm install --save-dev css-loader //命令行
npm install --save-dev ts-loader //命令行

modele.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
     ]
  }
};

loader 三种使用方法 webpack.config.js配置、内联、CLI
推荐配置用法，三种用法示例详见 https://doc.webpack-china.org/concepts/loaders/

webpack可用命令行参数

--watch
--display-error-details 
--progress
--display-modules 
--display-reasons
-p //压缩混淆脚本
-d //生成map映射文件，告知各模块打包位置

一些使用技巧

1.shimming
2.自定义公共模块提取
3.独立打包样式文件
4.使用CDN/远程文件
5.与 grunt / gulp 配合
6.React 相关
详见http://www.cnblogs.com/vajoy/p/4650467.html（文末“其他”）

附：
webpack 中文文档：https://doc.webpack-china.org/concepts/