webpack.config.js

var path = require('path');
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var vue = require("vue-loader");

//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src/main.js');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

var plugins = [
	//压缩js 
	// new webpack.optimize.UglifyJsPlugin({minimize: true}),
	//提公用js到common.js文件中
	new webpack.optimize.CommonsChunkPlugin('common.js'),
	//将样式统一发布到style.css中
	new ExtractTextPlugin("style.css", {
		allChunks: true
	}),
	// 使用 ProvidePlugin 加载使用率高的依赖库
	new webpack.ProvidePlugin({
		$: 'webpack-zepto'
	})
];

module.exports = {
	//项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
	entry: {
		build : APP_PATH
	},
	//输出的文件名 合并以后的js会命名为bundle.js
	output: {
		path: BUILD_PATH,
		filename: '[name].js',
		// 指向异步加载的路径
		publicPath :  '/build/',
		// 非主文件的命名规则
		chunkFilename: '[id].build.js?[chunkhash]'
	},
	module: {
		loaders: [
			{
				test: /\.vue$/,
				loader: 'vue',
			},
			{
				test: /\.scss$/,
				loader: ExtractTextPlugin.extract("style-loader", 'css-loader')
			},
			{
				test: /\.css$/,
				loader: ExtractTextPlugin.extract("style-loader", "css-loader")
			},
			{
				test: /\.(png|jpg|gif)$/,
				loader: 'url?limit=40000'
			},
			/*{
				test: /\.jsx?$/,
				loader: 'babel',
				include: APP_PATH,
				query: {
					presets: ['es2015']
				}
			}*/
			{ test: /\.js$/, loader: 'babel', exclude: /node_modules/},
		]
	},
	vue: {
		css: ExtractTextPlugin.extract("css"),
		sass: ExtractTextPlugin.extract("css!sass-loader")
	},
	resolve: {
		extensions: ['', '.js', '.vue'],
		alias: {
			components: path.join(__dirname, './src/components')
		}
	},
	devtool: '#source-map',
	babel: {
		presets: ['es2015'],
		plugins: ['transform-runtime']
	},
	devServer: {
		host: '192.168.1.110',
		historyApiFallback: true,
		hot: true,
		inline: true,
		progress: true, //打包进度反馈
	},
	plugins: plugins
};