执行webpack-dev-server报红色

来源：3-8 webpack-dev-server

带娃儿先走

2017-10-08

写回答

4回答

Rosen

2017-10-08

已采纳

npm ls webpack
npm ls webpack -g
npm ls webpack-dev-server
npm ls webpack-dev-server -g

用这四个命令检查全局和项目的版本，看哪个用的不对了

带娃儿先走

非常感谢！

2017-10-13

共2条回复

带娃儿先走

提问者

2017-10-09

PS E:\gitmmall\mmall-fe> npm ls webpack -g
C:\Users\17936\AppData\Roaming\npm
├── webpack@3.6.0
└─┬ webpack-dev-server@2.9.1
  └── webpack@3.6.0

PS E:\gitmmall\mmall-fe> npm ls webpack
mmall-fe@1.0.0 E:\gitmmall\mmall-fe
└── webpack@1.15.0

PS E:\gitmmall\mmall-fe> npm ls webpack -g
C:\Users\17936\AppData\Roaming\npm
├── webpack@3.6.0
└─┬ webpack-dev-server@2.9.1
  └── webpack@3.6.0

PS E:\gitmmall\mmall-fe> npm ls webpack-dev-server
mmall-fe@1.0.0 E:\gitmmall\mmall-fe
└── webpack-dev-server@1.16.5

PS E:\gitmmall\mmall-fe> npm ls webpack-dev-server -g
C:\Users\17936\AppData\Roaming\npm
└── webpack-dev-server@2.9.1

Rosen

全局的webpack和webpack-dev-server都先卸载，再指定版本安装

2017-10-10

共1条回复

带娃儿先走

提问者

2017-10-08

//2017年10月6日13:22:15

var webpack           = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//获取html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
	return{
		template	: './src/view/'+name+'.html',
		filename	: 'view/'+name+'.html',
		inject		: true,
		hash		: true,
		chunks		: ['common',name]
	}
}
//webpack config
var config={
	entry:{
		'common' :['./src/page/common/index.js'],
		'index'  :['./src/page/index/index.js'],
		'login'  :['./src/page/login/index.js']
		
	},
	output:{
		path:'./dist',
		filename:'js/[name].js'
	},
	externals:{
		'jquery':'window.jQuery'
	},
	module:{
		loaders:[
			{test: /\.css$/,loader: ExtractTextPlugin.extract("style-loader","css-loader")},
			{test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]' },
		]
	},
	plugins:[
		//独立通用模块到js/base.js
		new webpack.optimize.CommonsChunkPlugin({
			name:'common',
			filename:'js/base.js'
		}),
		//把css单独打包到文件里
		new ExtractTextPlugin('css/[name].css'),
		//html模板的处理
		new HtmlWebpackPlugin(getHtmlConfig('index')),
		new HtmlWebpackPlugin(getHtmlConfig('login')),
	]
};

module.exports=config;