這段時(shí)間準(zhǔn)備自己寫(xiě)一個(gè)博客使用react生逸，因此自然也接觸到了很流行的打包工具webpack。寫(xiě)了一個(gè)簡(jiǎn)單的react和webpack的配置模版沃疮，如果覺(jué)得不錯(cuò)可以star一哈~
https://github.com/YingQQQ/webpack-react
一、WebPack的安裝
Webpack常規(guī)的安裝是通過(guò)npm。
Webpack的有些命令需要電腦安裝才能使用，所以需要通過(guò)npm命名進(jìn)行Webpack的全局安裝：

$ npm install webpack -g

安裝之后執(zhí)行

webpack -v

二、webpack基本命令

$ webpack --config XXX.js //使用另一份配置文件（比如webpack.dev.config.js）來(lái)打包

$ webpack --watch //監(jiān)聽(tīng)變動(dòng)并自動(dòng)打包

$ webpack -p//壓縮混淆腳本

$ webpack -d//生成map映射文件，告知哪些模塊的去向 
$ webpack --progress //顯示進(jìn)度條
$ webpack --color //添加顏色

三蓄诽、 webpack.config.js
一般來(lái)說(shuō)都會(huì)有兩個(gè)配置文件一個(gè)用于Dev，一個(gè)用于Build.但是他們有一些配置是公用的媒吗。因此我們就用 process.env.npm_lifecycle_event這個(gè)參數(shù)來(lái)辨別開(kāi)發(fā)環(huán)境仑氛。

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');//webpack合并工具。
const validate = require('webpack-validator')//webpack錯(cuò)誤配置提示工具。
const CleanWebpackPlugin = require('clean-webpack-plugin');//build時(shí)刪除原文件
const ExtractTextPlugin = require('extract-text-webpack-plugin');//提取樣式插件
const HtmlWebpackPlugin = require('html-webpack-plugin');//自動(dòng)生成html插件

const TARGET = process.env.npm_lifecycle_event;

const PATHS = {
  app: path.resolve(__dirname, 'app'),
  style: [
    path.join(__dirname, 'app/style','Main.css'),
  ],
  build: path.join(__dirname, 'build'),
  test: path.join(__dirname, 'tests')
};;//文件入口配置

//Dev 和BUILD 共同配置
const common = merge(
  {
    entry: {
      app: PATHS.app
    },//入口文件配置
    output: {
      path: PATHS.build,
      filename: '[name].js'
    },//入口文件輸出配置
    resolve: {
      extensions: ['', '.js', '.jsx']
    }
  },
  module: {
    preLoaders: [
      {
        test: /\.(js|jsx)$/,
        loaders: ['eslint'],
        include: PATHS.app
      }
    ]//eslint檢測(cè)代碼錯(cuò)誤
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loaders: ['babel?cacheDirectory'],
        query: {
           'presets': ['es2015'],
            'plugins': [
               'transform-es3-property-literals',
               'transform-es3-member-expression-literals'
            ]
        }
      }//設(shè)置允許編譯ES6
    ]
  }
  plugins: [
    new HtmlWebpackPlugin({
      template: require('html-webpack-template'),
      title: 'My App',//設(shè)置title的名字
      inject: false,
      appMountId: 'app',//設(shè)置標(biāo)簽的id
      //filename: 'index.html',設(shè)置這個(gè)html的文件名,默認(rèn)是index.html
      // template:'header.html',要使用的模塊的路徑,例如jade,ejs
      // inject: 'body',把模板注入到哪個(gè)標(biāo)簽后 'body'
      // favicon:'./images/favico.ico',給html添加一個(gè)favicon  './images/favico.ico'
      // minify:true,是否壓縮  true false
      // hash:true,是否hash化 true false ,
      // cache:false,是否緩存,
      // showErrors:false,是否顯示錯(cuò)誤,
      // xhtml:false 是否自動(dòng)關(guān)閉標(biāo)簽 默認(rèn)false
    })
  ]
);
var config;

switch(TARGET) {
  case 'build':
    config = merge(
      common,
      {
        devtool: 'source-map',
        entry: {
          style: PATHS.style
        },//提供css文件入口
        output: {
          path: PATHS.build,
          filename: '[name].[chunkhash].js',
          chunkFilename: '[chunkhash].js'
        }
      },
      module: {
        loaders: [
          //提取樣式
          {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style', 'css'),
            include: PATHS.style
          }
        ]
      },
      plugins: [
        new CleanWebpackPlugin(PATHS.build, {
          root: process.cwd()
        }),
        new webpack.optimize.CommonsChunkPlugin({
            // 與 entry 中的 vendors 對(duì)應(yīng)
            name: ['vendors', 'manifest'],
            // 輸出的公共資源名稱
            filename: 'common.bundle.js',
            // 對(duì)所有entry實(shí)行這個(gè)規(guī)則
            minChunks: Infinity
        }),
        // 把jquery作為全局變量插入到所有的代碼中
        // 然后就可以直接在頁(yè)面中使用jQuery了
        // new webpack.ProvidePlugin({
        //     $: 'jquery',
        //     jQuery: 'jquery',
        //     'window.jQuery': 'jquery'
        // }),例如想在js中用$锯岖，如果通過(guò)webpack加載介袜，需要將$與jQuery對(duì)應(yīng)起來(lái),
        //我這里不使用如有需要自行添加。
        new webpack.DefinePlugin({
          process.env.NODE_ENV:'production'
        })出吹，//設(shè)置build時(shí)的關(guān)鍵字遇伞，便于壓縮文件。
        new webpack.optimize.UglifyJsPlugin({
            compress: {
              warnings: false
          }
        })捶牢，//代碼丑化
        new ExtractTextPlugin('[name].[chunkhash].css')
      ]
    );
    break;
  default:
    config = merge(
      common,
      {
        devtool: 'eval-source-map',
        entry: {
          style: PATHS.style
        }
      },
      devServer: {
        historyApiFallback: true,//查看歷史url
        contentBase: "./",//設(shè)定根目錄鸠珠。如果不進(jìn)行設(shè)定的話，默認(rèn)是在當(dāng)前目錄下秋麸。
        quiet: false, //控制臺(tái)中不輸出打包的信息
        noInfo: false,
        hot: true, //開(kāi)啟熱點(diǎn)
        inline: true, //開(kāi)啟頁(yè)面自動(dòng)刷新
        lazy: false, //不啟動(dòng)懶加載
        progress: true, //顯示打包的進(jìn)度
        watchOptions: {
            aggregateTimeout: 300
        },
        port: '8088' //設(shè)置端口號(hào)
      },//webpack-dev-server可以幫你啟動(dòng)一個(gè)服務(wù)器在Dev的時(shí)候
      module: {
        loaders: [
          {
            test: /\.css$/,
            loaders: ['style', 'css'],
            include: PATHS.style
          }
        ]
      }
    );
}
module.exports = validate(config, {
  quiet: true
});

簡(jiǎn)單的寫(xiě)了一寫(xiě)不要嫌棄~~