Webpack

参考文章：
入门 Webpack，看这篇就够了
Webpack 中文文档

一、基本使用举例

1、命令行调用

webpack main.js bundle.js

常用参数

-p                 # 混淆、压缩
--progress         # 显示进度
--display-modules  # 显示加载模块
--watch            # 自动监测变化，重新打包
--colors           # 控制台带颜色输出
--display-reasons  # 显示引用模块原因

2、加载 css
首先安装支持模块 css-loader 和 style-loader：

npm install css-loader style-loader --save-dev

使用方法

（1）在文件中明确指定 loader：

// js 文件
require('style-loader!css-loader!./mystyle.css');

# shell 命令
webpack main.js bundle.js

（2）命令行中指定参数

// js 文件
require('./mystyle.css');

# shell 命令
webpack main.js bundle.js --module-bind 'css=style-loader!css-loader'

二、通过配置文件来使用 Webpack

Webpack 默认配置文件名为 webpack.config.js。如果目录下有这个文件，直接在控制台执行 webpack 就可以了。如果配置文件使用了其他名字，则需要这样执行：

webpack --config yourWebpackConfigFile.js

最基本的配置文件：

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

其他配置文件形式，参考这里

三、loader 及 plugin 配置使用

const path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');


module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader' //添加对样式表的处理
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
      filename: 'index.html',
      inject: 'body',
      minify: {
        // collapseWhitespace: true,
        removeComments: true,
        removeAttributeQuotes: true
      },
      myKey: "myKeyTest" //自定义值，页面中通过 <%= htmlWebpackPlugin.options.myKey %> 访问
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_debugger: true,
        drop_console: true
      }
    })
  ]
};