webpack 发布配置

上次写的是开发配置，这次是发布配置：

var path = require('path');
var webpack = require('webpack');
var node_modules_dir = path.resolve(__dirname, 'node_modules');


//引用单独打包模块
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var config = {
  entry: {
    app: path.resolve(__dirname, 'app/main.js'),
   // mobile:path.resolve(__dirname, 'app/mobile.js'),
    // 当 React 作为一个 node 模块安装的时候，
    // 我们可以直接指向它，就比如 require('react')
    vendors: ['react']
  }, 
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
     publicPath: "../"  //html引用路径，在这里是本地地址。
  }
  ,module: {
    loaders: [
        //babel 可以将es6代码转换成es5的代码
        { test: /\.jsx?$/, // 用正则来匹配文件路径，这段意思是匹配 js 或者 jsx
          exclude: [node_modules_dir],
          loader: 'babel' // 加载模块 "babel" 是 "babel-loader" 的缩写
        }
        ,{test:/\.scss$/,loader:ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")}
            //这里本来只选css文件，但这样最后style.css内只会有css的文件并没有less的，而less还是以style引用的
            //所以这里加上了|less这样，处理的模块就需要是css!less 而不是css-loader一个了 
        ,{test: /\.(css|less)$/, loader: ExtractTextPlugin.extract("style-loader", "css!less")}
        
        ,{
            test: /\.(png|jpg|jpeg)$/,
            loader: 'url-loader?limit=2000&name=images/[hash:8].[name].[ext]'
        }
        ,{
           test: /\.woff$/,
           loader: 'url?limit=100000'
        }        
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')//生成公用的文件
    ,new ExtractTextPlugin("style/style.css", {allChunks: true})// 配置css 单独打包
  ]
};


module.exports = config;

解析：

entry是对象配置的，为main定义了app名称，vendors数组配置单独打包的模块。生成名为vendors

output配置了输入目录dist 输出名称为[name].js表示以定义的app vendors来替换。

publicPath: "../"  //html引用路径，在这里是本地地址。它对于css中引用图片会在前加上../

引用了单独打包模块

在loaders内配置的css less scss都用到了，这样它们都解析完后会合并到指定的css文件内。

还有图片的配置，name=images/[hash:8].[name].[ext]设置了name参数。表示图片的保存地

在plugins内有二个配置，一个是公用js的打包配置，另一个是css合并打包目录和名子。

打包使用：

在打包项目时，只需修改下配置里的主js引用地址和输出时的目录

然后运行npm run deploy 

会把打包的js css 图片都放在输出目录下。

但是没有页面。

所以页面需要我们手动复制过来并添加css 公用js  打包后app的引用。