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的引用。